Webpack：如何使用webpack-dev-server编译，写入磁盘并提供静态内容（js / css）
我想构build我的js / css代码，将它写在磁盘上，并使用webpack-dev-server在一个命令中提供。 我不想为生产模式设置另一台服务器。 我们该怎么做呢？ 在下面分享我的webpack.config.js文件内容：
module.exports = { watch: true, entry: [ './src/index.js' ], output: { path: __dirname +'/dist/', publicPath: '/dist/', filename: 'bundle.js' }, module: { loaders: [ { exclude:/(node_modules)/, loader: 'babel', query: { presets: ['es2015', 'react'] } } ] }, devServer: { historyApiFallback: true, contentBase: './' } }; 请在下面的package.json中find启动脚本：
"start": "webpack-dev-server --progress --colors"
我正在运行“npm run start”。 请帮忙。
您可以将您的start脚本定义更改为：
"start": "webpack --watch & webpack-dev-server --inline --progress --colors" 。
这会将webpack watch-and-rebuild过程发送到后台，以便您可以在使用webpack-dev-server更改修改后的模块时重新加载已修改的模块。
编辑：
这些插件都可以做你想要的：
webpack-dev-server使用“虚拟”Express服务器与Sock.js结合模拟在您的机器上运行的服务器。 关于编译，webpack-dev-server会在检测到代码发生变化时重新编译bundle 。 然而，这种重新编译是从内存中提供的，而不是项目的build目录（或者在你的情况下是dist目录）。 从文档 ：
使用这个configuration，webpack-dev-server将会在
build文件夹中提供静态文件。 它会监视你的源文件，并在更改时重新编译这个包。
关于写入你的磁盘，webpack-dev-server不会这样做。 这部分是由上面写的内容来解决的。 此外，请注意以下内容，也来自Webpack文档：
这个修改后的bundle从内存中在
publicPath指定的相对path中publicPath（请参阅API）。 它不会被写入您的configurationoutput目录。 如果bundle已经存在于相同的URLpath中，则内存中的bundle优先（默认情况下）。
要写入磁盘，请使用普通的webpack模块。 当然，正如你的问题所暗示的，在每次更改之后进行手动重新编译是很乏味的。 为了解决这个难题，包括watch标志。 从terminal，你可以执行命令：
$ webpack --watch
不过，我宁愿将其委派给NPM脚本。 请注意，下面的-w标志等同于编写--watch 。
// NPM `scripts` field: "watch": "webpack -w"
如果你想运行webpack-dev-server，同时让你的修改被重新编译并写入你的输出目录，你可以添加一个额外的NPM脚本，如下所示：
"scripts": { "serve": "npm run watch && npm run start", "start": "webpack-dev-server --progress --colors", "watch": "webpack -w" }
然后，在你的terminal中，执行$ npm run serve来完成这个任务。
如果您对自动重新加载的便利感兴趣，可以通过在Webpackconfiguration文件的plugins字段中定义以下内容来实现：
new webpack.HotModuleReplacementPlugin()
注意：这可能需要Babel的其他configuration设置。 如果我是你，我会从你的babel加载器中取出query字段，而是把你的Babelconfiguration委托给一个外部的.babelrc文件。 一个很好的使用与热重装兼容可能是这样的：
{ "presets": ["env", "es2015", "react"], "plugins": ["react-hot-loader/babel"] }
在一个侧面说明，我创build了一个样板库 ，可以很容易地启动我想要的结构的项目。 Webpack的configuration可能会特别感兴趣。 特别是，它采用了Webpack 2，并包含其他的构build工具，如Babel（用于转发），ESLint（语法检查器）以及对CSS / Sass和各种其他文件格式的支持。