webpack 热更新

Posted 2021-09-04 前端精髓

当某个模块发生变化的时候，websocket收到推送

第一次{ type: 'hash', data: 'd8f78ce94da18bb8dfcf' }
第二次{ type: 'hash', data: 'b302d600cbc15a1cf1c8' }

收到推送之后立马发生了一个请求

http://localhost:3000/d8f78ce94da18bb8dfcf.hot-update.json

请求返回

{"h":"b302d600cbc15a1cf1c8","c":{"0":false,"main":true}}

main模块需要更新，然后再发送一个JSONP请求

http://localhost:3000/main.d8f78ce94da18bb8dfcf.hot-update.js

代码被执行。

注意：第二次更新使用的是第一次的hash，也就是说当前更新操作使用的是上一次推送过来的hash值

总结：收到推送，发送ajax请求（请求一个JSON文件），JSON文件返回了哪些模块需要更新，最后发送JSONP请求，最新的代码配执行。