Webpack 是前端开发中非常流行的打包工具，它可以将多个模块打包成一个文件，方便前端开发和部署。而模块热更新 HMR 则是 Webpack 中非常重要的功能，可以让我们在修改代码时不需要刷新页面，即可看到修改后的效果，大大提高了开发效率。
HMR 原理
在了解 HMR 的使用方法之前，我们先来了解一下 HMR 的原理。当我们修改了某个模块的代码后，Webpack 会通过 WebSocket 和浏览器建立一个连接，将修改后的代码发送给浏览器。浏览器接收到代码后，会通过 Webpack 的 HMR runtime 将代码更新到页面上。整个过程如下图所示：
在这个过程中，HMR runtime 起到了非常重要的作用。它会监听服务器推送的新模块代码，然后通过一系列的处理，将新的模块代码更新到页面上。
HMR 使用方法
了解了 HMR 的原理之后，我们来看一下如何在 Webpack 中使用 HMR。
首先，我们需要在 Webpack 配置文件中开启 HMR 功能。在 webpack.config.js 中添加以下代码：
-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -
-- ---
---------- -
---- ----
--
-------- -
--- ------------------------------------
-
--其中，devServer.hot 表示开启 HMR 功能，plugins 中的 webpack.HotModuleReplacementPlugin() 则是 Webpack 内置的插件，用于启用 HMR 功能。
接着，在我们的入口文件中添加以下代码：
if (module.hot) {
module.hot.accept('./app.js', function() {
// 当 app.js 模块更新时，执行此回调函数
});
}这段代码的作用是监听 app.js 模块的变化，当该模块发生变化时，执行回调函数中的代码。
最后，在 package.json 中添加以下代码：
{
"scripts": {
"start": "webpack-dev-server --mode=development --open"
}
}这段代码的作用是启动 Webpack 开发服务器，开启 HMR 功能。
现在，我们就可以在项目中使用 HMR 了。当我们修改了 app.js 中的代码时，浏览器会自动刷新，显示新的代码效果。而在使用 HMR 的情况下，我们只需要修改 app.js 中的代码，页面就会自动更新，无需刷新页面，提高了开发效率。
示例代码
以下是一个使用 HMR 的示例代码：
-- -------------------- ---- -------
-- ------
------ ------------ ---- ------------
-------------------- ---------
-- ------------ -
--------------------------------- ---------- -
----------------------- --------
-------------------- ---------
---
-// message.js
export default function printMessage(message) {
console.log(message);
}在上面的代码中，我们在 app.js 中引入了 message.js 模块，并在页面上打印出了 Hello, World!。接着，我们监听了 message.js 模块的变化，当该模块发生变化时，控制台会输出 message.js 模块已更新，并重新打印出 Hello, World!。
总结
通过本文的介绍，我们了解了 Webpack 模块热更新 HMR 的原理和使用方法。在实际的项目开发中，使用 HMR 可以大幅提高开发效率，让我们更加快速地开发出高质量的前端应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/655dcddfd2f5e1655d81661d