理解 webpack 热更新

一、开启：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 可以直接执行代码，更新代码，而不用刷新页面更新。