React + Webpack HMR 正在刷新页面(不是热加载)

IT技术 javascript reactjs webpack webpack-dev-server react-hot-loader
2021-05-14 21:21:41

我在让 react-hot webpack 加载器正常工作时遇到了一些麻烦。

当我加载页面时,我得到了我所期望的以下内容:

[HMR] 正在等待来自 WDS 的更新信号...
[WDS] 热module更换已启用。

但是当我保存更改时,页面会自动硬刷新浏览器(而不是 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 加载器更不受支持)。

1个回答

我刚刚遇到了这个问题。一些事情:

为了帮助调试您的特定问题,请尝试启用“保留日志”(在 Chrome 开发工具中)。这将在页面刷新时保留控制台日志,因此您至少可以看到 webpack-dev-server 在触发刷新之前记录的任何消息。

Chrome devtools 中的“保留日志”选项

在我的例子中 webpack-dev-server 令人耳目一新,因为我没有在我的入口 js 文件中选择 HMR。将以下行添加到文件中解决了问题:

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

有关module.hotAPI 的详细信息,webpack HMR 文档非常有帮助。