webpack：什么是模块热更新

什么是模块热更新

webpack的一个功能，可以使代码修改后不用刷新页面就自动更新，提升开发效率

通过配置devServer的hot为true和hotModuleReplacement插件完成

原理：

1.启动dev-server，webpack开始构建，在编译期间会向 entry 文件注入热更新代码；

2.Client 首次打开后，Server 和 Client 基于Socket建立通讯渠道；

3.修改文件，Server 端监听文件发送变动，webpack开始编译，直到编译完成会触发"Done"事件；

4.Server通过socket 发送消息告知 Client；

5.Client根据Server的消息（hash值和state状态），通过发送ajax请求到 Server端获取新的JS模块

7.Client获取到新的JS模块后，会更新 modules tree并替换掉现有的模块；

8.最后调用 module.hot.accept() 完成热更新；