如何在反应中启用热模块更换（HMR）？答案

【问题标题】：How can I enable Hot Module Replacement(HMR) in react?如何在反应中启用热模块更换（HMR）？
【发布时间】：2021-08-28 03:19:35
【问题描述】：

create-react-app 是否内置了对 HMR 的支持？我已经看到响应应用程序在更改时重新加载。但这不是 HMR。我需要添加什么 webpack 配置来启用 HMR。我在网上阅读了有关将webpack-dev-serve 中的hot 选项设置为true 的信息。我对反应中的 HMR 感到困惑。

搜索了一段时间后发现了这个

import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App'

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

ReactDOM.render(
  <App />,
  document.getElementById('app')
)

然后它说在webpack.config.js中添加HotModuleReplacementPlugin
我需要手动添加它还是预先添加它。我还读到反应使用ReactRefreshWebpackPlugin。我很困惑，请帮忙。

【问题讨论】：

标签： javascript reactjs webpack hot-module-replacement

【解决方案1】：

您可以在这里找到问题的答案：https://www.youtube.com/watch?v=f-ctxG2qEps&t=279s

如果您想从头开始配置 HMR，请查看：https://github.com/pmmmwh/react-refresh-webpack-plugin/

不要忘记将这一行添加到 devServer 中：

devServer: {
    hot: true,
    liveReload: false,
},

有关工作示例，请查看此 repo：https://github.com/matheus4lves/react-pagination

【讨论】：

【解决方案2】：

使用 webpack-dev-server，我们可以使用 React 设置热模块替换。这意味着每当我们修改组件并保存文件时，webpack 将替换页面上的模块，而不会重新加载，不会丢失组件状态。

npm install react-hot-loader --save-dev

要使用 react-hot-loader 加载器，我们可以将其添加到加载器对象中的加载器数组中。

{
  test: /\.js$/,
  exclude: /node_modules/,
  loaders: ["react-hot", "babel-loader"],
}

当找到匹配的文件时，它们现在首先通过 react-hot，然后通过 babel-loader。

最后我们需要使用两个新选项来运行 webpack-dev-server：

webpack-dev-server --hot --inline

附言

在此之前，我们需要设置 webpack-dev-server，以执行此操作我们需要在本地和全局安装 webpack-dev-server。您可以使用以下命令安装它：

npm install webpack-dev-server --global

npm install webpack-dev-server --save-dev

【讨论】：

使用create-react-app的项目设置是否默认启用？