create-react-app是否内置了对HMR的支持？我见过react app在更改时重新加载。但这不是HMR。我需要添加什么webpack配置才能启用HMR。我在网上读到关于将webpack-dev-serve中的hot选项设置为true。我对react中的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
我需要手动添加它还是它是预先添加的。另外我读到react使用ReactRefreshWebpackPlugin。我很困惑，请帮助。
1条答案
按热度按时间vhmi4jdf1#
首先，我们必须记住HMR是如何工作的：
它允许所有类型的模块在运行时进行更新，而不需要 * 完全 * 刷新。
其次，我们必须记住React是如何工作的：它只会更新DOM中需要更新的部分。例如，如果你有一个React应用程序，并向其中 * 添加 * 一个段落，则会添加该段落的DOM节点，而页面不会重新加载。如果你更改现有段落的内容，则只有表示段落内容的DOM节点会重新加载，因为它需要重写。
第三
自webpack-dev-server v4.0.0起，默认情况下启用热模块替换。
第四
Create React App在后台使用webpack。你可以通过以下命令弹出它来查看整个配置：
npm run eject综上所述，Create React App默认情况下启用了HMR。您可以按照以下步骤进行确认：
1.通过执行以下命令创建和运行应用程序：
1.应用程序在浏览器中打开后，选择一段文本，例如单词“reload”。然后，转到您的源代码并更改
App.js文件中应用程序的背景颜色。您会注意到，由于文本仍处于选中状态，因此背景颜色会在未完全刷新的情况下发生变化。现在，如果您更改源代码中段落的内容，你会看到选择消失了。这是React正在重写DOM，只有一小部分需要更新。此外，如果在浏览器中选择段落的文本并转到源代码并更改链接的内容，你会看到链接的内容在没有清除选择的情况下更新，再次，因为React只会更新DOM中需要更新的部分。