webpack热更新原理

开启

在devServer中添加hot: true字段，webpack会自动添加HotModuleReplacementPlugin

原理

有三个角色： 本地文件、服务器端、浏览器端
第一步
webpack对文件进行监听（watch），当文件发生变化时，webpack dev server对文件进行重新打包编译
第二步
由sockjs在服务器端和浏览器端开启一个websocket长连接，将webpack 热更新阶段各阶段的状态告知浏览器。当编译完成后，将编译打包后的新模块的hash值发送到浏览器端
第三步
浏览器端接收hash值，并对其作出响应。浏览器端接收到类型为hash的消息后，将hash值暂存起来。浏览器接收到类型为ok的消息后，根据devServer中hot配置，决定是进行刷新操作还是热更新操作
第四步
HMR runtime验证hash值，并请求新的模块代码
第五步
HMR runtime对模块进行热更新，并且模块热更新操作都是发生在HMR runtime中的hotApply方法中
总结
当开启热更新后，启动本地服务时，会开启一个websocket长连接，当代码发生变化时，通过websocket进行通信，将变化的代码推送到浏览器端进行自动更新。