Question

我有以下webpack配置文件。

const path = require('path');
const webpack = require('webpack');

module.exports = {
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'scripts.min.js'
},

resolve: {
    root: [
        path.resolve('./src'),
        path.resolve('./node_modules')
    ]
},

entry: './src/app.js',

module: {
    loaders: [
        {
            test: /\.js$/,
            loader: 'babel'
        }
    ]
},

devServer: {
    // compress: true,
    inline: true,
    stats: 'errors-only'
},

plugins: [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ 'mangle': false, sourcemap: false })
]

};

问题在于，当我运行webpack-dev-server命令时，它会运行服务器，但是当我对任何js文件进行更改时，它们不会即时编译。所以我不得不停止服务器并运行webpack，然后运行webpack-dev-server命令以使工作正常。

如何使webpack-dev-server工作，以便在监视所有js，css，scss文件并编译它们时会飞行？

Answer 1

如果您正在使用IDE，则必须禁用＆＃34;安全写入＆＃34;。

请注意，许多编辑器支持“安全写入”功能并默认启用它，这使得dev服务器无法正确查看文件。 “安全写入”意味着更改不会直接写入原始文件，而是写入临时文件，当保存操作成功完成时，将重命名并替换原始文件。此行为导致文件观察程序丢失该轨道，因为原始文件已被删除。为了防止出现此问题，您必须在编辑器中禁用“安全写入”功能。

http://webpack.github.io/docs/webpack-dev-server.html#hot-mode

webpack配置webpack-dev-server不会动态编译文件

1 个答案: