webpack 热更新

基本概念

• WDS：webpack-dev-server
• WDM：webpack-dev-middleware
• HMR：hot-module-replacement
• HMR Runtime：模块热更新所需的模块连接逻辑和解析逻辑、交互逻辑
• Manifest：在webpack编译器执行、解析和映射应用程序时保留所有模块的详细要点的数据集合。当完成打包并发送到浏览器时，会在HMR Runtime通过Manifest来解析(模块标识符)和加载模块。

实现方案

• webpack-dev-server + webpack.HotModuleReplacementPlugin
• webpack-dev-middleware + webpack-hot-middleware

热更新图解

图片来源于互联网

热更新流程

1. 启动阶段

   1. 开启模块热替换后，webpack会在模块对应的bundle.js中插入一段处理实时重载的脚本(devServer.inline:true)，bundle.js会被传输给Bundle Server(bundle.js全部存储在内存中)。当在浏览器打开调试页面时，便会进行网络请求拿到该bundle.js，bundle.js中的该脚本会与WDS建立webSocekt连接，进而建立起HMR Runtime。

2. 更新阶段

   1. 当模块被修改且保存后被重新编译，在生成新的bundle.js的同时会生成对应的**.hot-update.js(更新过的chunk)、**.hot-update.json(manifest)，然后传输给HMR Server，HMR Server将上述内容作为update发送给HMR Runtime，HMR Runtime进行检查更新并对manifest进行解析，然后对更新过的chunk列表会和浏览器加载过的 chunk 列表进行比较，对每个加载过的chunk会下载相对应的更新过的chunk(资源从Bundle Server下载)。当所有更新过的chunk完成下载，HMR Runtime切换到ready状态。
   2. HMR Runtime的apply方法将所有更新过的chunk标记为无效。对于每个无效模块都需要有一个更新处理函数(update handler)或者在它的父级模块们中有更新处理函数。否则会进行无效标记冒泡从而也使父级无效。每个冒泡继续直到到达应用程序入口起点或者到达带有更新处理函数的模块（以最先到达为准，冒泡停止）。如果它从入口起点开始冒泡，则此过程失败。
   3. 之后，所有无效模块都被处理和解除加载，然后更新当前hash并且调用所有accept处理函数，HMR Runtime切换回闲置状态(idle)，一切照常继续。