React-hotwebpackローダーを正しく動作させるのに少し問題があります。
ページをロードすると、期待どおりに次のように表示されます。
[HMR] WDSからの更新信号を待っています...
[WDS]ホットモジュールの交換が有効になっています。
しかし、変更を保存すると、ページは自動的にブラウザーをハードリフレッシュします(HMRの置き換えではありません)。
//webpack.config.js
{
entry: {
client: 'webpack-dev-server/client?http://localhost:8786', // WebpackDevServer Host and port
app: "./HelloWorld.tsx"
},
devtool: process.env.WEBPACK_DEVTOOL || 'cheap-module-source-map',
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].entry.js'
},
module: {
loaders: [
{
test: /\.ts(x?)$/,
loaders: ['react-hot', 'babel-loader?cacheDirectory=true,presets[]=es2015,presets[]=react', 'ts-loader']
}
]
},
devServer: {
contentBase: "./dist",
port:8786
},
plugins: [
new webpack.NoErrorsPlugin()
]
}
コマンド:webpack-dev-server --hot --inline
興味深い補足として、babel-preset-react-hmre
を使用すると、すべてが期待どおりに機能します。 (ただし、適切なreact-hotローダーよりもサポートが少ないように思われるため、これは実際には使用したくありません)。
私はちょうどこの問題に遭遇しました。いくつかのこと:
特定の問題のデバッグに役立てるために、「ログの保存」を有効にしてみてください(Chrome開発ツール))。これにより、ページが更新されてもコンソールログが保持されるため、少なくともメッセージを表示できます。そのwebpack-dev-serverは、更新をトリガーする前にログを記録しています。
私の場合、エントリjsファイルでHMRをオプトインしていなかったため、webpack-dev-serverが更新されていました。ファイルに次の行を追加すると、問題が解決しました。
// Opt-in to Webpack hot module replacement
if (module.hot) module.hot.accept()
module.hot
APIの詳細については、 webpack HMR docs が非常に役立ちます。
更新:時代の終わり、webpack1のドキュメントはもうアップしていません。まだ探している人のために、 HMRドキュメントは今ここにあります 。