React + Webpack HMR 正在刷新頁面（不是熱加載）

Question

我在讓 react-hot webpack 加載器正常工作時遇到了一些麻煩。

當我加載頁面時，我得到了我所期望的以下內容：

[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 加載器更不受支持）。

Answer 1

我剛剛遇到了這個問題。 一些事情：

為了幫助調試您的特定問題，請嘗試啟用“保留日志”（在 Chrome 開發工具中）。 這將在頁面刷新時保留控制台日志，因此您至少可以看到 webpack-dev-server 在觸發刷新之前記錄的任何消息。

在我的例子中，webpack-dev-server 令人耳目一新，因為我沒有在我的入口 js 文件中選擇 HMR。 將以下行添加到文件中解決了問題：

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

有關module.hot API 的詳細信息， webpack HMR 文檔非常有幫助。