React + Webpack HMR 正在刷新页面（不是热加载）

Posted 2023-02-21

【中文标题】React + Webpack HMR 正在刷新页面（不是热加载）

【英文标题】：React + Webpack HMR is refreshing the page (not hot loading)

【发布时间】：2016-09-13 06:44:13

【问题描述】：

我在让 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 加载器支持）。

【问题讨论】：

如果你在命令行中使用热+内联的开发服务器，你不应该在你的配置中指定它

@dominictobias 我错过了什么吗？ Afaik 我没有在配置中指定热或内联。

你有 client: 'webpack-dev-server/client?http://localhost:8786', 在那里，不确定这是否会有所帮助，但你不应该在开发服务器使用这些选项时添加它

实际上react-hot 应该在那里。我有同样的问题（刷新而不是热替换），但请注意，这些热加载程序都不能与无状态反应组件一起使用。如果它不起作用，您可能还想给github.com/gaearon/react-transform-hmr 一个机会

@dominictobias 我不认为问题出在组件本身，就好像我使用 babel-preset-react-hmre 它确实会热加载更改。我来看看 react-transform-hmr，看起来好像有一个新的 react-hot loader 即将推出，我也可以试试。

【参考方案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 docs 非常有用。

【讨论】：

您在哪里添加了以下行？

在作为项目“入口”文件提供给 webpack 的文件中。