如何在反应中启用热模块更换HMR？

问题描述

create-react-app 是否内置对 HMR 的支持？我已经看到反应应用程序在更改时重新加载。但这不是 HMR。我需要添加什么 webpack 配置来启用 HMR。我在网上阅读了有关将 hot 中的 webpack-dev-serve 选项设置为 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')
)

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

解决方法

使用 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

hot-module-replacement javascript reactjs reactjs reactjs reactjs webpack webpack webpack