webpack 是前端开发中广泛使用的打包工具，它可以将多个文件打包成一个或多个文件，提高前端项目的性能和可维护性。而 Hot Module Replacement(HMR) 是 webpack 提供的一种开发模式，它能够在不刷新浏览器的情况下，动态更新代码，提高开发效率。本文将对 webpack HMR 的原理进行分析，并给出示例代码。
HMR 的原理
HMR 是一种在运行时更新应用程序的技术，它通过将新模块与旧模块进行比较，然后将差异应用于正在运行的应用程序。在 webpack 中，HMR 是通过 webpack-dev-server 实现的。webpack-dev-server 是一个基于 Express 的开发服务器，它可以实现 HMR 功能。
在 webpack 中，每个模块都有一个唯一的标识符，当模块发生变化时，webpack 会生成一个新的标识符，并将新模块与旧模块进行比较。如果新模块与旧模块不同，webpack 会将新模块发送到客户端，客户端接收到新模块后，会将新模块与旧模块进行比较，并将差异应用于正在运行的应用程序。
为了实现 HMR，webpack 提供了两个插件：webpack.HotModuleReplacementPlugin 和 webpack.NamedModulesPlugin。其中，webpack.HotModuleReplacementPlugin 负责启用 HMR 功能，webpack.NamedModulesPlugin 负责将模块的相对路径作为模块的名称，这样在控制台中输出的日志更易于理解。
在 webpack 配置文件中，需要将这两个插件添加到 plugins 数组中，如下所示：
// javascriptcn.com 代码示例
const webpack = require('webpack');
module.exports = {
// ...
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
],
};同时，需要在 webpack-dev-server 的配置中添加 hot: true 选项，如下所示：
const webpack = require('webpack');
module.exports = {
// ...
devServer: {
hot: true,
},
};在代码中，需要使用 webpack 提供的 module.hot.accept 方法来实现 HMR。module.hot.accept 方法接受两个参数：要更新的模块和更新的回调函数。当模块发生变化时，module.hot.accept 方法会调用回调函数，从而实现模块的更新。
例如，下面是一个简单的示例代码：
// javascriptcn.com 代码示例
import { hello } from './hello';
document.write(hello());
if (module.hot) {
module.hot.accept('./hello', () => {
document.write(hello());
});
}在上面的代码中，首先导入了一个 hello 模块，并将其输出到页面上。然后，使用 module.hot.accept 方法来监听 hello 模块的变化。当 hello 模块发生变化时，会执行回调函数，并将新的 hello 模块输出到页面上。
总结
通过本文的介绍，我们了解了 webpack HMR 的原理和使用方法。HMR 可以帮助我们在开发过程中快速更新代码，提高开发效率。在实际开发中，我们可以根据项目的需求和特点来选择是否使用 HMR。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657e7297d2f5e1655d947096