webpack配置webpack-dev-server不能即时编译文件

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，则必须禁用“安全写入”。

请注意，许多编辑器支持“安全写入”功能，并且默认情况下启用它，这使得dev服务器无法正确观看文件。 “安全写入”意味着更改不会直接写入原始文件，而是写入临时文件，而保存操作成功完成后，会将其更名并替换原始文件。此行为会导致文件观察器因为原始文件被删除而丢失曲目。为了防止这个问题，你必须在编辑器中禁用“安全写入”功能。

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