1. HMR-热模块更换热模块更换
当代码更改时，在维护当前页面状态时，本地更新修改模块
2. Thttp协议的特征
它只能启动客户端的请求。如果服务器处理某些数据需要很长时间或链接太长，则真正的接口处理结果只能通过前端的多个回合查询获得。
3. webSocket协议的特征所有-Dual -dwork Communication.com of TCP协议以确保数据的可靠性，在建立链接之前，还存在握手阶段，该链接与HTTP协议具有良好的兼容性。数据格式为轻量级，可以发送文本或第二级数据。没有同源策略。协议徽标为WS
这是Ruan Yifeng老师的文章的建议
1.您需要在节点层上启动两个服务器端终端，一个是负责使用HTTP协议的静态资源路由，而另一个使用WebSocket协议负责发送更新消息通知
2.服务器需要具有更新侦听文件的能力。每个开发人员更改文件代码并触发WebPack文件监视，然后重新compiles。
3.客户端需要自动构建WebSocket客户端的能力。在接收到服务器的更新通知和新的模块ID之后，然后通过HTTP协议积极拉动新模块代码，然后用新的模块代码替换旧模块以替换以下旧模块替换，请执行新的模块代码
首次，控制台输出这次汇编的哈希值作为标记，以及相应的bundle.js file.js file.JS文件。在代码重新触发代码的编译后，控制台将输出相应的汇编过程在带有先前哈希值的哈希值，捆绑文件以及json和hot-update.js文件中。根据哈希值获得修改的模块代码并更新缓存并执行新代码块。
这里不难看到热门更新的核心原理是使用HTTP + WebSocket。Websocket用于在服务方面发送代码更新通知。但是，由于坚定的策略，对数据代码的具体引用是通过HTTP协议。类似数据加密过程是SM2 + S4的组合，以使完整播放到完整的播放到双方的优势
添加脚本，脚本：{“ dev”：“ webpack-dev-server-config webpack.dev.js -pen”}
所以
此时，WebPack的HMR基本上已经完成了节点层的处理。该部分还允许具有静态资源路由并主动将代码更新通知发送到客户端。
WebPack客户端的代码绝对不会让开发人员自己意识到它，否则会有奇怪的问题。该代码处理的一部分由黑匣子处理，隐藏在服务器中。ADDDDDEVSERVERENTRYPOINTS方法，并悄悄地将条目添加到在WebPack软件包期间注入此代码处理。
可以从中可以看出，客户端要求的两个功能分为两个代码模块，一个是构建Websocket客户端，另一个是处理客户端的代码模块更新和替换。
当客户端收到服务器返回的确定消息时，将调用ReloAdapp。这是如何处理的方法
所以
如果您发送它，您将收到它。查找相应的回调处理，并将处理该部分的代码分为热模块。根据哈希获取新的代码模块并替换执行执行
Module.hot.check方法实际上是在注入另一种隐藏方法的方法。
hotulereplacementPlugin
由于对另一个插头的分析，请稍后将其扩展。感兴趣的读者可以访问webpack/lib/hotulereplacement.js读取源代码。
在这里，我们重点介绍已向模块注入了哪种代码。
您在此处使用JSONP获取新模块代码的原因是因为可以直接执行JSONP获得的代码，并且Hash.hot-update.js代码具有WebPackHotupDate函数调用。最后，查看此功能如何处理代码模块。更换和执行
Hotapply确实很复杂，知道该过程可能很好
最后，使用流程图整理关键节点
原始：https：//juejin.cn/post/7094635045834948615