前言
Webpack 是前端工程化中非常强大的打包工具，但是在开发过程中每次更改代码都需要重新打包，浪费了开发者大量的时间和精力。为了解决这个问题，Webpack 提供了热更新机制(HMR)。
热更新使得代码修改后无需刷新页面就能立即在浏览器中查看最新更改。本文主要讲解 Webpack 中热更新插件 HMR 的使用。
HMR 的基本原理
HMR 的基本原理是在前端代码中集成一段客户端的脚本，在代码更改时通过 WebSocket 协议与服务器通信，根据服务器端的响应情况来实现页面的更新。
当某一个依赖模块发生变化时，webpack 发送 build 事件通知客户端，客户端根据这个信号，使用模块热替换(HMR) API 进行模块的增量更新，然后将更新后的模块进行重新渲染。
HMR 的使用
Webpack 4 以后，HMR 已经内置在了 webpack-dev-server 中，我们只需要在配置文件中添加热更新插件即可。
安装 webpack-dev-server
npm install webpack-dev-server --save-dev
配置 webpack-dev-server
在 webpack 的配置文件中添加以下内容：
devServer: {
hot: true // 开启热更新
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]使用 HMR API
在 JavaScript 中使用 HMR API 来启用基于组件的代码热更新。
if (module.hot) {
module.hot.accept('./module.js', function() {
// 当 module.js 更新时触发回调（可选）
})
}基于 React 的 HMR 实现
React 是目前最流行的前端框架之一，下面我们以 React 为例来进行 HMR 的实现。
安装 react-hot-loader
npm install --save-dev react-hot-loader
引入 react-hot-loader
在我们的项目入口中引入 react-hot-loader：
-- -------------------- ---- ------- -- -------- ------ - --- - ---- ----------------------- ------ ----- ---- ------- ------ -------- ---- ----------- ------ --- ---- ------- ----- ------ - -------- ----------------------- --- --------------------------------
配置 webpack
在 webpack 的配置文件中添加以下内容：
-- -------------------- ---- -------
----- -
---------------------------
---------------------
- - ------------------
-------------- - -
------ -
----- ----------------
--
------- -
----- -------------------- --------
--------- --------------------
--
-------- -
--- -----------------------------
--- -----------------------
--
---------- -
------------ -----------
----- -----
---- ---- -- -----
--
------- -
------ -
-
----- ----------
---- -----------------
-------- --------------
-
-
--
-------- -
------ -
------------ -----------------------
-
-
-以上就是基于 React 实现的 HMR，使用起来非常简单，你只需要在你的 App.js 模块中进行修改，修改后即可在不刷新页面的情况下立即看到效果。
总结
HMR 能够极大地提升开发效率，但是如果在生产环境使用，可能会出现一些问题，因此在开发环境中使用 HMR 是一个明智的选择。
本文主要介绍了如何在 Webpack 中使用 HMR，以及如何在 React 中实现 HMR。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c0f22f83d39b488154d8be