2021/04/09 - webpack热更新流程

[lxinr]

1. 在Webpack的配置中添加 HotModuleReplacementPlugin 插件
2. entry 注入热更新代码，用于保证服务端与客户端之间能够通信

webpack-hot-middleware/client?path=http://127.0.0.1:9000/__webpack_hmr&noInfo=false&reload=true&quiet=false 

3. 客户端首次打开后，服务端与客户端通过WebScoket建立通信（webpack-hot-middleware使用的是window.EventSource）
4. 调用webpack的api对文件系统进行watch，其本质就是node中fs模块的watch，当有文件修改时，webpack就会对文件进行重新编译打包，然后保存到内存中，用到的库是memory-fs
5. devServer通知浏览器端文件发生了改变，并调用 webpack api 监听 compile的done事件，当compile完成后将编译打包后的新模块hash值发送到浏览器端
6. 浏览器端接收到服务端消息做出响应，一般会先接收一个内容为hash的响应来告知是哪个hash的模块，待接收到ok时执行reload操作
7. webpack接收到最新hash值验证并请求模块代码
8. HotModuleReplacement.runtime对模块进行热更新，具体包括模块匹配，模块替换等操作
9. 最后调用module.hot.accept()完成热更新

参考：
Advanced-Frontend/Daily-Interview-Question#118

https://zhuanlan.zhihu.com/p/30669007

https://zhuanlan.zhihu.com/p/30623057