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