极客时间返利平台,你可以在上边通过山月的链接购买课程,并添加我的微信 (shanyue94) 领取返现。
每天晚上九点 B站讲解前端工程化直播,并解答相关问题。

# webpack 中什么是 HMR,原理是什么

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 79 (opens new window)

HMR(Hot Module Replacement),热更新又称热替换,基于 webpack-dev-server。 第一步:webpack 对文件系统进行 watch 打包到内存中 第二步:devServer 通知浏览器端文件发生改变,在这一阶段,sockjs 是服务端和浏览器端之间的桥梁,在启动 devServer 的时候,sockjs 在服务端和浏览器端建立了一个 webSocket 长连接,以便将 webpack 编译和打包的各个阶段状态告知浏览器 第三步:webpack-dev-server/client 接收到服务端消息做出响应 第四步:webpack 接收到最新 hash 值验证并请求模块代码 第五步:HotModuleReplacement.runtime 对模块进行热更新 第六步:调用 accept 方法,及时将新后的内容插入到页面中

@wjw-gavin 可以把其中的 npm 包列出来,比如 webpack 如何对 fs 进行 watch 的

HMR,Hot Module Replacement,热模块替换,见名思意,即无需刷新再内存环境中即可替换掉过旧模块。与 Live Reload 相对应。

在 webpack 的运行时中 __webpack__modules__ 用以维护所有的模块。而热模块替换的原理,即通过 chunk 的方式加载最新的 modules,找到 __webpack__modules__ 中对应的模块逐一替换,并删除其上下缓存。

其精简数据结构用以下代码表示:

const __webpack_modules = [
  (module, exports, __webpack_require__) => {
    __webpack_require__(0);
  },
  () => {
    console.log(这是一号模块);
  },
];

// JSONP 异步加载的所需要更新的 modules
self["webpackHotUpdate"](0, {
  1: () => {
    console.log("这是最新的三号模块");
  },
});

其下为更具体更完整的流程,每一步都涉及众多,有兴趣的可阅读 webpack-dev-server 及开发环境 webpack 运行时的源码。

  1. webpack-dev-server 将打包输出 bundle 使用内存型文件系统控制,而非真实的文件系统。此时使用的是 memfs (opens new window) 模拟 node.js fs API
  2. 每当文件发生变更时,webpac 将会重新编译,webpack-dev-server 将会监控到此时文件变更事件,并找到其对应的 module。此时使用的是 chokidar (opens new window) 监控文件变更
  3. webpack-dev-server 将会把变更模块通知到浏览器端,此时使用 websocket 与浏览器进行交流。此时使用的是 ws (opens new window)
  4. 浏览器根据 websocket 接收到 hash,并通过 hash 以 JSONP 的方式请求更新模块的 chunk
  5. 浏览器加载 chunk,并使用新的模块对旧模块进行热替换,并删除其缓存
Last Updated: 11/27/2021, 10:11:48 AM