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