随着前端工程化的发展，越来越多的前端项目开始使用 Webpack 进行代码的打包和构建。Webpack 不仅提供了强大的静态资源管理能力，还支持模块热更新 (Hot Module Replacement, 简称 HMR) 功能，能够实现在不重新加载整个页面的情况下，使修改的代码立即生效，提升开发效率。本文将介绍 Webpack4 中模块热更新的原理及使用方法。
HMR 原理
模块热更新的核心原理是在运行时替换新模块代码。在传统的开发模式下，修改代码后需要重新打包和刷新页面才能看到效果，而 HMR 只替换修改的模块代码而不重新加载整个页面来使修改生效。HMR 是通过监听文件变化，将修改后的只需更新的模块代码进行替换，来实现实时预览效果。
具体来说，HMR 实现的过程大致分为四个阶段：
- 检测更新：Webpack 开启监听行为，检测文件是否发生了变化；
- 生成更新：对于发生变化的文件，Webpack 实时编译构建出最新的模块代码，同时生成更新描述文件；
- 应用更新：Webpack Dev Server 通过 WebSocket 将更新描述文件推送到客户端，客户端根据更新描述文件去更新相应的模块代码；
- 完成更新：客户端将更新后的模块代码用新代码替换旧代码，完成模块热更新。
HMR 使用方法
在 Webpack4 中使用 HMR 非常简单，只需要在 devServer 配置中增加 hot 和 hotOnly 两个参数即可开启 HMR 功能。
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
----- --------------
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
---------- -
------------ ---------
---- -----
-------- -----
--
-------- -
--- -------------------------------------
--
--其中，hot 参数用于启用 HMR 功能，hotOnly 参数用于强制开启 HMR 功能，即使编译失败时也不刷新页面。此外，我们还需要在配置中添加 webpack.HotModuleReplacementPlugin() 插件以启用 HMR 功能。
除了配置 devServer 和插件以外，我们还需要在应用代码中添加 HMR 的相关代码。以 React 项目为例，在组件代码中增加如下语句即可实现热更新：
if (module.hot) {
module.hot.accept('./my-component', () => {
// 当 my-component 模块发生变化时，执行相关操作
});
}这里的 module.hot 是 Webpack 提供的模块热替换接口，调用 accept 方法注册模块热替换的回调函数。当 my-component 模块发生变化后，回调函数会被触发，我们可以在回调函数中执行相应的更新操作。
HMR 示例
下面我们来结合一个简单的 React 示例来演示 HMR 的使用方法。
-- -------------------- ---- -------
-- --------
------ ----- ---- --------
------ -------- ---- ------------
------ ----------- ---- -----------------
---------------------------- --- ---------------------------------
-- ------------ -
----------------------------------- -- -- -
----- ------------- - ----------------------------------
------------------------------ --- ---------------------------------
---
-// my-component.js import React from 'react'; export default () => <div>My Component</div>;
在上面的示例中，我们通过 ReactDOM.render 将 MyComponent 渲染到页面上，并在 index.js 中注册了 HMR 的回调函数，当 my-component.js 模块发生变化时，回调函数会被触发，我们可以在回调函数中重新渲染 MyComponent 组件，从而实现热更新。
完整的示例代码见这里。
总结
通过以上简单的介绍，我们可以看到 Webpack4 中 HMR 的使用非常方便，只需要在配置中增加 hot 和 hotOnly 参数，使用 webpack.HotModuleReplacementPlugin() 插件以及在应用代码中注册 HMR 回调函数即可。HMR 能够帮助开发人员提高开发效率，提供更加流畅和快速的开发体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64aa515948841e9894673e19