关于第八点“Webpack的热更新是如何做到的?说明其原理里面”的第六点有一些疑惑,所以自己搞了个demo试了下,查看了下里面的hash的究竟,也算是验证下里面所说。
首先随便新建一个vue的项目并开启,打开浏览器进入谷歌开发者工具。
服务启动之后,Webpack服务端和浏览器端建立Websocket,并推送一个hash值。
-先观察Websocket,里面会有服务端推送的hash值(e487d4acba3c261d8936
)。
-修改demo,并切换到浏览器,进行了热更新。
可以发现Websocket的messages中的hash改变了(bd46921f462c00862bec
)。
同时又多了两个请求:
第一个是接收到上一步传递给他的新模块hash 值,它通过 JsonpMainTemplate.runtime 向 server 端发送 Ajax 请求,服务端返回一个 json,该 json 包含了所有要更新的模块的 hash 值。
第二个请求是获取到更新列表后,该模块再次通过 jsonp 请求,获取到最新的模块代码。
接下来看一下两个请求中的内容。
第一次请求:
这里浏览器端将demo修改之后服务端通过Websocket发送的hash为参数,发送给服务端,返回了所有需要更新的模块的 hash 值(这里就一个需要更新的模块)
第二次请求:
获取到最新的模块代码两次请求的name是以上一次的Websocket传来的hash(e487d4acba3c261d8936
)作为其命名:e487d4acba3c261d8936.hot-update.json
和index.e487d4acba3c261d8936.hot-update.js
。然后JsonpMainTemplate.runtime向Webpack服务端请求的参数是新更新的模块的hash值。
同时,每次修改都会覆盖上一次打包好的代码,每次打包文件的hash值都会改变。撤销回退,也是会新产生hash。
第一次在掘金写文章,请大家批评指正。以后多写写。