webpack的热更新使用及原理分析（是如何做到在不刷新浏览器的前提下更新页面的）

[GGXXMM]

webpack的热更新使用

1、webpack-dev-server + HotModuleReplacementPlugin

2、webpack-dev-middleware（使用较多）

热更新原理分析

Webpack Compile：将JS编译成Bundle
bundle.js：构建输出的文件
Bundle Server：提供文件在浏览器的访问
HRM Server：将热更新的文件输出给HRM Runtime
HRM Runtime：会被注入到浏览器，更新文件的变化

热更新过程描述：

1. 当修改了一个或多个文件；
2. 文件系统接收更改并通知webpack；
3. webpack重新编译构建一个或多个模块，并通知HRM服务器进行更新；
4. HRM Server使用websocket通知HRM Runtime需要更新，HRM Runtime注入浏览器，更新文件的变化。

参考：https://juejin.cn/post/6844904008432222215