理解webpack热更新原理

本文参考链接：https://mp.weixin.qq.com/s/2L9Y0pdwTTmd8U2kXHFlPA

一、开启：HotModuleReplacementPlugin/--hot

二、webpack编译构建后，控制台出现：

       1、新的hash值 // 作为下次热更新的标识

       2、新的json文件 // h代表新hash,c代表要热更新的模块

       3、新的js文件 // 本次修改后的代码

三、热更新实现原理：

        1、启动webpack生成compiler实例，compiler上有很多方法，例如监听本地文件的变化

        2、使用express框架启动本地server,让浏览器可以请求本地的静态资源

        3、启动websocket服务，当本地文件发生变化，可以立即告知浏览器可以热更新代码

四、启动本地服务前在入口增加两个文件

        1、获取websocket客户端代码

        2、根据配置获取webpack热更新代码路径

五、过程：

        1、监听webpack编译结束，通过websocket给浏览器发送通知，ok和hash事件，浏览器拿到最新的hash值做更新检查逻辑

        2、webpack-deb-server主要职责：启动服务和前置准备工作

        3、webpack-dev-middleware主要职责：本地文件的编译和输出以及监听

        4、浏览器接收到通知，hash事件：更新最新一次打包后的hash值

                                              ok事件：进行热更新检查

        5、利用上一次保存的hash值，发送xxx/hash.hot-update.json的ajax请求，获取热更新模块

        6、通过jsonp方式发送xxx/hash.hot-update.js请求，使用jsonp可以直接执行代码，更新代码，而不用刷新页面更新