Webpack HMR 原理全解析，前端大厂高频面试题解析

最新推荐文章于 2024-06-13 21:59:00 发布

2401_84023579

最新推荐文章于 2024-06-13 21:59:00 发布

阅读量881

点赞数 24

分类专栏： 2024年程序员学习文章标签：前端 webpack node.js

本文链接：https://blog.csdn.net/2401_84023579/article/details/137254143

版权

2024年程序员学习专栏收录该内容

238 篇文章 0 订阅

订阅专栏

本文详细阐述了Webpack5中模块热替换(HotModuleReplacement,HMR)的核心机制，包括Webpack运行时如何注入HMR客户端、增量构建过程、module.hot.accept回调的使用和Vue-loader在HMR中的应用实例。重点讲解了HMR的工作原理和关键接口的使用，以及如何在实际项目中利用这些机制进行高效开发。

摘要由CSDN通过智能技术生成

浏览器加载发生变更的增量模块
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);

它接受两个参数：

path：指定需要拦截变更行为的模块路径
callback：模块更新后，将最新模块代码应用到运行环境的函数

例如，对于如下代码：

// src/bar.js

export const bar = ‘bar’

// src/index.js

import { bar } from ‘./bar’;

const node = document.createElement(‘div’)

node.innerText = bar;

document.body.appendChild(node)

module.hot.accept(‘./bar.js’, function () {

node.innerText = bar;

})

示例中，module.hot.accept 函数监听 ./bar.js 模块的变更事件，一旦代码发生变动就触发回调，将 ./bar.js 导出的值应用到页面上，从而实现热更新效果。

module.hot.accept 的作用并不复杂，但使用过程中还是有一些值得注意的点，下面细讲。

2.4.1 失败兜底

module.hot.accept 函数只接受具体路径的 path 参数，也就是说我们无法通过 glob 或类似风格的方式批量注册热更新回调。

一旦某个模块没有注册对应的 module.hot.accept 函数后，HMR 运行时会执行兜底策略，通常是刷新页面，确保页面上运行的始终是最新的代码。

2.4.2 更新事件冒泡

在 Webpack HMR 框架中，module.hot.accept 函数只能捕获当前模块对应子孙模块的更新事件，例如对于下面的模块依赖树：

示例中，更新事件会沿着模块依赖树自底向上逐级传递，从 foo 到 index ，从 bar-1 到 bar 再到 index，但不支持反向或跨子树传递，也就是说：

在 foo.js 中无法捕获 bar.js 及其子模块的变更事件
在 bar-1.js 中无法捕获 bar.js 的变更事件

这一特性与 DOM 事件规范中的冒泡过程极为相似，使用时如果摸不准模块的依赖关系，建议直接在应用的入口文件中编写热更新函数。

2.4.3 无参数调用

除上述调用方式外，module.hot.accept 函数还支持无参数调用风格，作用是捕获当前文件的变更事件，并从模块第一行开始重新运行该模块的代码，例如：

// src/bar.js

console.log(‘bar’);

module.hot.accept();

示例模块发生变动之后，会从头开始重复执行 console.log 语句。

2.5 小结

回顾整个 HMR 过程，所有的状态流转均由 WebSocket 消息驱动，这部分逻辑由 HMR 运行时控制，开发者几乎无感。

唯一需要开发者关心的是为每一个需要处理热更新的文件注册 module.hot.accept 回调，所幸这部分需求已经被许多成熟的 Loader 处理，作为示例，下一节我们挖掘 vue-loader 源码，学习如何灵活使用 module.hot.accept 函数处理文件更新。

三、 vue-loader 如何实现 HMR

========================

vue-loader 是一个用于处理 Vue Single File Component 的 Webpack 加载器，它能够将如下格式的内容转译为可在浏览器运行的等价代码：

除常规的代码转译外，在 HMR 模式下，vue-loader 还会为每一个 Vue 文件注入一段处理模块替换的逻辑，如：

“./src/a.vue”:

/!*****************!\

!*** ./src/a.vue ***!

*******************/

/***/

((module, webpack_exports, webpack_require) => {

// 模块代码

// …

/* hot reload */

if (true) {

var api = webpack_require( /*! …/node_modules/vue-hot-reload-api/dist/index.js */ “…/node_modules/vue-hot-reload-api/dist/index.js”)

api.install(webpack_require( /*! vue */ “…/node_modules/vue/dist/vue.runtime.esm.js”))

if (api.compatible) {

module.hot.accept()

if (!api.isRecorded(‘45c6ab58’)) {

api.createRecord(‘45c6ab58’, component.options)

} else {

api.reload(‘45c6ab58’, component.options)

}

module.hot.accept( /*! ./a.vue?vue&type=template&id=45c6ab58& */ “./src/a.vue?vue&type=template&id=45c6ab58&”, WEBPACK_OUTDATED_DEPENDENCIES => {

/* harmony import */

a_vue_vue_type_template_id_45c6ab58___WEBPACK_IMPORTED_MODULE_0_ = webpack_require( /*! ./a.vue?vue&type=template&id=45c6ab58& */ “./src/a.vue?vue&type=template&id=45c6ab58&”);

(function () {

api.rerender(‘45c6ab58’, {

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。