2024年最全Webpack HMR 原理全解析，2024年最新2024前端大厂面试知识分享

2301_82244607

于 2024-05-14 12:57:09 发布

阅读量932

点赞数 23

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2301_82244607/article/details/138850303

版权

程序员专栏收录该内容

162 篇文章 0 订阅

订阅专栏

最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

弹框消失，你必须重新执行交互动作才会重新弹出

再小的改动，例如更新字体大小，改变备注信息都会需要整个页面重新加载执行，影响开发体验。引入 HMR 后，虽然无法覆盖所有场景，但大多数小改动都可以实时热更新到页面上，从而确保连续、顺畅的开发调试体验，对开发效率有较大增益效果。

1.2 使用 HMR

Webpack 生态下，只需要经过简单的配置即可启动 HMR 功能，大致上分两步：

配置 devServer.hot 属性为 true，如：

// webpack.config.js

module.exports = {

// …

devServer: {

// 必须设置 devServer.hot = true，启动 HMR 功能

hot: true

}

};

之后，还需要调用 module.hot.accept 接口，声明如何将模块安全地替换为最新代码，如：

import component from “./component”;

let demoComponent = component();

document.body.appendChild(demoComponent);

// HMR interface

if (module.hot) {

// Capture hot update

module.hot.accept(“./component”, () => {

const nextComponent = component();

// Replace old content with the hot loaded one

document.body.replaceChild(nextComponent, demoComponent);

demoComponent = nextComponent;

});

}

模块代码的替换逻辑可能非常复杂，幸运的是我们通常不太需要对此过多关注，因为业界许多 Webpack Loader 已经提供了针对不同资源的 HMR 功能，例如：

style-loader 内置 Css 模块热更
vue-loader 内置 Vue 模块热更
react-hot-reload 内置 React 模块热更接口

因此，站在使用的角度，只需要针对不同资源配置对应支持 HMR 的 Loader 即可，很容易上手。

二、实现原理

======

Webpack HMR 特性的原理并不复杂，核心流程：

使用 webpack-dev-server (后面简称 WDS)托管静态资源，同时以 Runtime 方式注入 HMR 客户端代码
浏览器加载页面后，与 WDS 建立 WebSocket 连接
Webpack 监听到文件变化后，增量构建发生变更的模块，并通过 WebSocket 发送 hash 事件
浏览器接收到 hash 事件后，请求 manifest 资源文件，确认增量变更范围
浏览器加载发生变更的增量模块
Webpack 运行时触发变更模块的 module.hot.accept 回调，执行代码变更逻辑
done

接下来我会展开 HMR 的核心源码，详细讲解 Webpack 5 中 Hot Module Replacement 原理的关键部分，内容略微晦涩，不感兴趣的同学可以直接跳到下一章。

2.1 注入 HMR 客户端运行时

执行 npx webpack serve 命令后，WDS 调用 HotModuleReplacementPlugin 插件向应用的主 Chunk 注入一系列 HMR Runtime，包括：

用于建立 WebSocket 连接，处理 hash 等消息的运行时代码
用于加载热更新资源的 RuntimeGlobals.hmrDownloadManifest 与 RuntimeGlobals.hmrDownloadUpdateHandlers 接口
用于处理模块更新策略的 module.hot.accept 接口
等等

关于 Webpack Runti me，可参考 Webpack 原理系列六：彻底理解 Webpack 运行时。

经过 HotModuleReplacementPlugin 处理后，构建产物中即包含了所有运行 HMR 所需的客户端运行时与接口。这些 HMR 运行时会在浏览器执行一套基于 WebSocket 消息的时序框架，如图：

2.2 增量构建

除注入客户端代码外，HotModuleReplacementPlugin 插件还会借助 Webpack 的 watch 能力，在代码文件发生变化后执行增量构建，生成：

manifest 文件：JSON 格式文件，包含所有发生变更的模块列表，命名为 [hash].hot-update.json
模块变更文件：js 格式，包含编译后的模块代码，命名为 [hash].hot-update.js

增量构建完毕后，Webpack 将触发 compilation.hooks.done 钩子，并传递本次构建的统计信息对象 stats。WDS 则监听 done 钩子，在回调中通过 WebSocket 发送模块更新消息：

{“type”:“hash”,“data”:“${stats.hash}”}

实际效果：

2.3 加载更新

客户端接受到 hash 消息后，首先发出 manifest 请求获取本轮热更新涉及的 chunk，如：

注意，在 Webpack 4 及之前，热更新文件以模块为单位，即所有发生变化的模块都会生成对应的热更新文件； Webpack 5 之后热更新文件以 chunk 为单位，如上例中， main chunk 下任意文件的变化都只会生成 main.[hash].hot-update.js 更新文件。

manifest 请求完成后，客户端 HMR 运行时开始下载发生变化的 chunk 文件，将最新模块代码加载到本地。

2.4module.hot.accept回调

经过上述步骤，浏览器加载完最新模块代码后，HMR 运行时会继续触发 module.hot.accept 回调，将最新代码替换到运行环境中。

module.hot.accept 是 HMR 运行时暴露给用户代码的重要接口之一，它在 Webpack HMR 体系中开了一个口子，让用户能够自定义模块热替换的逻辑。module.hot.accept 接口签名如下：

module.hot.accept(path?: string, callback?: function);

它接受两个参数：