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”。请帮忙。

原文由 JVM 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 foundling 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

新版 webpack-dev-server 发布，支持 writeToDisk 选项。

 devServer: {
  writeToDisk: true
}

原文由 musa 发布，翻译遵循 CC BY-SA 4.0 许可协议