web-dev-qa-db-ja.com

React + Webpack HMRはページを更新しています（ホットロードではありません）

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ローダーよりもサポートが少ないように思われるため、これは実際には使用したくありません）。

javascriptreactjswebpackwebpack-dev-serverreact-hot-loader
13
Not loved

私はちょうどこの問題に遭遇しました。いくつかのこと：

特定の問題のデバッグに役立てるために、「ログの保存」を有効にしてみてください（Chrome開発ツール））。これにより、ページが更新されてもコンソールログが保持されるため、少なくともメッセージを表示できます。そのwebpack-dev-serverは、更新をトリガーする前にログを記録しています。

"Preserve log" option in Chrome devtools

私の場合、エントリjsファイルでHMRをオプトインしていなかったため、webpack-dev-serverが更新されていました。ファイルに次の行を追加すると、問題が解決しました。

// Opt-in to Webpack hot module replacement
if (module.hot) module.hot.accept()

module.hot AP​​Iの詳細については、 webpack HMR docs が非常に役立ちます。

更新：時代の終わり、webpack1のドキュメントはもうアップしていません。まだ探している人のために、 HMRドキュメントは今ここにあります 。

18
Elliot