Webpackバックエンドとフロントエンドのホットリロード

Question

Webpackを使用して、クライアントサイドとサーバーサイドの両方のコードを再ロードしようとしています。私が現時点で持っている設定は、webpack-dev-serverコマンドを実行するとファイルを自動的に再構築します。しかし、何も私はそれを手動で更新しても、ブラウザでの更新、画面上の同じ内容

var webpack = require('webpack'); 
var path = require('path'); 
var fs = require('fs'); 

var nodeModules = {}; 
fs.readdirSync('node_modules') 
    .filter(function(x) { 
     return ['.bin'].indexOf(x) === -1; 
    }) 
    .forEach(function(mod) { 
     nodeModules[mod] = 'commonjs ' + mod; 
    }); 

module.exports = { 
    entry: [ './server/server.js', './client/app.js'], 
    target: 'node', 
    output: { 
     path: path.join(__dirname, 'build'), 
     filename: '[name].js' 
    }, 
    module: { 
     loaders: [{ 
      exclude: /node_modules/, 
      loader: 'babel' 
     }] 
    }, 
    resolve: { 
     extensions: ['', '.js', '.jsx'] 
    }, 
    externals: nodeModules, 
    devServer: { 
     historyApiFallback: true, 
     contentBase: './' 
    } 
}; 

Answer 1

あなたと対話する必要がありHMRのために、ご使用の環境に埋め込まれたランタイムAPIがあります。最低でも、あなたはどこかにあなたのエントリポイントスクリプトに次を追加する必要があります。

if (module.hot) { 
    module.hot.accept() 
} 

は、より良いアイデアを得るために、新しいドキュメントに記載されているcode sampleを見てください。