工程化知识卡片 008: webpack HMR 实现的核心原理

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

大家好，我是山月。

这是我在掘金发表的前端工程化知识卡片集合 8/36

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 模拟 node.js fs API
2. 每当文件发生变更时，webpac 将会重新编译，webpack-dev-server 将会监控到此时文件变更事件，并找到其对应的 module。此时使用的是 chokidar 监控文件变更
3. webpack-dev-server 将会把变更模块通知到浏览器端，此时使用 websocket 与浏览器进行交流。此时使用的是 ws
4. 浏览器根据 websocket 接收到 hash，并通过 hash 以 JSONP 的方式请求更新模块的 chunk
5. 浏览器加载 chunk，并使用新的模块对旧模块进行热替换，并删除其缓存