Webpack：如何使用webpack-dev-server进行编译，在磁盘上写以及提供静态内容（js / css）

Question

我想构建我的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中使用的启动脚本：

"start": "webpack-dev-server --progress --colors"

我正在运行“ npm run start”。请帮忙。

Answer 1

您可以将start脚本定义更改为此：

"start": "webpack --watch & webpack-dev-server --inline --progress --colors"。

这会将webpack的监视和重建过程发送到后台，这样，当您使用进行更改时，也可以热重新加载修改后的模块webpack-dev-server。

编辑：

这些插件都可以满足您的要求：

• https://github.com/gajus/write-file-webpack-plugin
• https://github.com/FormidableLabs/webpack-disk-plugin