在现代的前端开发中，Webpack 已经成为不可或缺的打包工具。它强大的打包功能使得前端开发者可以愉快地使用各种现代化的工具链，例如 React、Vue 和 Angular 等等。而其中一项非常有用的功能就是 HMR（Hot Module Replacement）热更新。
HMR 是什么？
简单来说，HMR 是一种开发时优化技术，它可以在不刷新页面的情况下，仅仅替换更新代码中的部分模块，实现代码的实时更新。
这种机制使得我们在修改代码时无需重新加载页面，从而大大节省了开发时间。这特别适用于需要频繁修改代码的开发场景，例如 React Native 和 React Native Web。
如何启用 HMR？
启用 HMR 非常简单。我们只需要在使用 Webpack 进行打包时，将 webpack-dev-server 的 hot 配置项设置为 true 即可:
// webpack.config.js
devServer: {
hot: true
}同时，在入口文件中，需要添加以下代码：
// index.js
if (module.hot) {
module.hot.accept();
}这段代码的含义是，如果模块支持热更新，则开始接受热更模块。
HMR 的原理
为了更好地理解 HMR 的工作原理，我们先来看一下 Webpack 的工作流程。
Webpack 在打包时，会将所有代码（modules）打包成一系列的 chunks，并将这些 chunks 输出到一个或多个 bundle 中。每个 chunk 中可能包含多个 modules，以及它们之间的依赖关系。
然而，在 HMR 模式下，当某个 module 发生改变时，Webpack 仅仅编译这个 module，并将这个新的 module 和其依赖的 modules，插入到原来的 bundle 中。
为了让这个更清晰，让我们来看一个简单的例子。
我们有一个项目结构如下：
- project
- src
- app.js
- utils.js
- index.html
- webpack.config.js我们有两个模块：app.js 和 utils.js。app.js 负责渲染 UI，而 utils.js 则是一些工具函数。现在我们修改了 utils.js：
// utils.js
module.exports = function add(a, b) {
return a + b;
};然后，Webpack 会监听到 utils.js 发生改变，随后重新编译这个模块，并且输出一个新的 bundle。这个新的 bundle 包含了新的 utils.js 文件和其依赖的更新代码。
最后，Webpack 会将新的 bundle 发送给浏览器，并通过 WebSocket 通知浏览器使用新的 bundle。
HMR 和 React
在 React 中使用 HMR 非常简单，我们只需要安装 react-hot-loader 并添加一个 Webpack loader：
-- -------------------- ---- -------
-- -----------------
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- --------------------- ----------------------
-
-
--
-
----- ---------
---- -
---------------
-------------
-
------- -----------------
-------- -
-------- -- -- ---------------------------
-
-
-
--
-
----- ----------
------- ---------------------------
-------- --------------
-
--然后在 React 组件中，我们只需要将它们包装在 hot 函数中：
-- -------------------- ---- -------
-- -------
------ ----- ---- --------
----- --- ------- --------------- -
-------- -
------ -
-----
---------- ------ ---- -- -----------
------
--
-
-
------ ------- -----------------现在，我们在修改 React 组件代码时，Webpack 将会在不刷新页面的情况下，仅仅替换更新代码中的部分模块，实现代码的实时更新。
总结
HMR 是一种极其有用的开发时优化技术，它可以在不刷新页面的情况下，实现代码的实时更新。因此，我们应该在开发时使用它来提高工作效率。
在 Webpack 中启用 HMR 非常简单，只需要将 webpack-dev-server 的 hot 配置项设置为 true 并且在入口文件中添加相应的代码即可。
HMR 的工作原理是，当某个 module 发生变化后，Webpack 仅仅会重新编译这个模块，并将这个新的模块和其依赖的模块，插入到原来的 bundle 中。
最后，我们看了在 React 中如何使用 HMR，使用 HMR 来提高工作效率，是我们每个前端开发者必须掌握的技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f0302ef6b2d6eab3a21eca