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