Tag: webpack dev server

如何使用webpack-dev-server和html-webpack-plugin观看index.html: 我正在使用webpack-dev-server与html-webpack-plugin进行开发，以生成带修订源的index.html。事情是每次我改变index.html捆绑系统不会重新重build。我知道索引是不是在入口，但有没有办法解决这个问题？

如果文件名为jsx，webpack无法find模块: 当我写这样的webpack.config.js module.exports = { entry: './index.jsx', output: { filename: 'bundle.js' }, module: { loaders: [{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'react'] } }] } }; 并在index.jsx我导入一个react模块的App import React from 'react'; import { render } from 'react-dom'; import App from './containers/App'; let rootElement = document.getElementById('box') render( <App />, rootElement ) 我发现如果我在App.jsx命名模块的应用程序，然后webpack会在index.jsx说，找不到模块的App […]

Webpack-dev-server不会生成源地图: 我使用babel-loader ，但无法弄清楚如何生成或在哪里查找转发文件的源地图。我尝试了eval-source-map ， inline-source-map ， source-map 。 webpack.config.js const BowerWebpackPlugin = require("bower-webpack-plugin"); module.exports = { entry: './src/script/index.jsx', output: { filename: 'bundle.js', sourceMapFilename: "bundle.js.map", publicPath: 'http://localhost:8090/assets' }, debug: true, devtool: 'inline-source-map', module: { loaders: [ { test: /\.js[x]?$/, loaders: ['react-hot', 'jsx', 'babel'], exclude: /node_modules/ }, { test: /\.scss$/, loaders: [ 'style', 'css?sourceMap', 'sass?sourceMap' ] }, […]

webpack-dev-server不会监视我的文件更改: 在webpack-dev-server运行时更改我的文件时，不更新软件包的文件。下面是我的webpack.config.js和package.json文件，你可以从我的npm脚本中看到，我已经解决了在同一命令（ npm run watch & webpack-dev-server –content-base ./ –port 9966 ）： webpack.config.js： 'use strict'; var ReactStylePlugin = require('react-style-webpack-plugin'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var webpack = require('webpack'); module.exports = { devtool: 'sourcemap', entry: ['./js/main.js'], output: { filename: 'bundle.js', path: __dirname + '/assets', publicPath: __dirname + '/' }, module: { loaders: [ { test: /\.js$/, loaders: […]

如果我使用像express这样的节点服务器，是否需要webpack-dev-server？: 我正在跟随一些教程来构build一个同构的应用程序与快递和反应。我对webpack-dev-server感到困惑。 webpack教程介绍了关于webpack-dev-server：这绑定一个小型快递服务器localhost：8080，它为您的静态资产以及捆绑包（自动编译）提供服务。它会在重新编译包（socket.io）时自动更新浏览器页面。在浏览器中打开http：// localhost：8080 / webpack-dev-server / bundle 。因为我有快递服务器，我真的需要webpack-dev-server吗？或者使用它的优点和缺点是什么？如果我想使用react-hot-loader，webpack-dev-server是否必要？

Webpack：沉默输出: 我想知道是否有一个configuration选项告诉webpack只logging到terminal的“重要信息”。几乎只是错误和警告，并不是所有这些：有这么多的输出！愿意压制常见的东西，只有webpack输出的警告/错误。想为webpack ， webpack-dev-server和karma-webpack解决scheme。注意：我尝试了noInfo: true and quiet: true但是这似乎没有办法。编辑：我想这可能是不可能的，所以我在github上创build了一个问题： https ： //github.com/webpack/webpack/issues/1191

在Cloud9.io的Webpack开发服务器上运行我的React应用程序时，收到“无效的主机头”消息: 我正在使用作为一个环境，一个Cloud9.io Ubuntu的VM在线IDE，我已经减less了解决这个错误，只是与Webpack开发服务器运行应用程序。我启动它： webpack-dev-server -d –watch –history-api-fallback –host $IP –port $PORT $ IP是一个variables，其主机地址$ PORT有端口号。我被指示在Cloud 9中部署应用程序时使用这些variables，因为它们具有默认的IP和端口信息。服务器启动并编译代码，没问题，虽然没有显示我的索引文件。只有一个带有“无效主机标题”的空白屏幕作为文本。这是请求： GET / HTTP/1.1 Host: store-client-nestroia1.c9users.io Connection: keep-alive Pragma: no-cache Cache-Control: no-cache Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 DNT: 1 Accept-Encoding: gzip, deflate, sdch, br Accept-Language: […]

Webpack-dev-server提供一个目录列表，而不是应用程序页面: 我只能在/public下看到实际的应用程序。 webpack.config.js中的configuration如下： var path = require('path'); var webpack = require('webpack'); module.exports = { entry: [ 'webpack-dev-server/client?http://localhost:8080', 'webpack/hot/only-dev-server', './app/js/App.js' ], output: { path: path.join(__dirname, 'public'), filename: 'bundle.js', publicPath: 'http://localhost:8080' }, module: { loaders: [ { test: /\.js$/, loaders: ['react-hot', 'babel-loader'], exclude: /node_modules/ } ] }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() ] }; 项目层次是：应用 JS […]

Webpack手表不工作在Windows上Webstorm？: 所以基本上我有一个使用Webpack的项目，如果我使用Webpack -w编译，使用另一个编辑器编辑文件将触发手表; 但是，如果我使用Webstorm编辑文件，什么都不会发生。我遇到了这个post ，似乎我不是唯一的，但是这个解决scheme是Ubuntu的，所以我想知道是否有什么类似的Windows？谢谢

Webpack如何构build生产代码以及如何使用它: 我对webpack非常陌生，我发现在生产版本中，我们可以减less整体代码的大小。目前webpack大约build立了8MB的文件和5MB的main.js。如何减less生产构build中的代码的大小？我从互联网上find一个示例webpackconfiguration文件，并为我的应用程序进行了configuration，我运行了npm run build及其开始构build，并在./dist/目录中生成了一些文件。这些文件仍然很重（与开发版本相同）如何使用这些文件？目前我正在使用webpack-dev-server来运行应用程序。 package.json文件 { "name": "MyAPP", "version": "0.1.0", "description": "", "main": "src/server/server.js", "repository": { "type": "git", "url": "" }, "keywords": [ ], "author": "Iam", "license": "MIT", "homepage": "http://example.com", "scripts": { "test": "", "start": "babel-node src/server/bin/server", "build": "rimraf dist && NODE_ENV=production webpack –config ./webpack.production.config.js –progress –profile –colors" }, "dependencies": […]