执行 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}”}
实际效果