webpack热更新原理

热更新（Hot Module Replacement，简称HMR）是指在无需刷新整个页面，只更新页面的局部完成更新。HMR是webpack的内置功能，可以通过HotModuleReplacementPlugin或--hot开启。

webpack热更新基本原理：

1、修改的entry配置

在启动webpack的本地服务之前，调用了updateCompiler(iler)方法，该方法修改了的entry配置：在entry中新增两个js文件，这意味着这两个js文件会在打包时随着入口文件一起打包为。

一个是webpack-dev-server/client/，负责与本地服务建立webSocket通信。另一个是webpack/hot/，负责浏览器在收到本地服务消息后进行热更新检查及更新操作。因为这两个操作都需要在浏览器端完成，所以需要随入口文件一起打包，这样就能在浏览器的环境中运行了。

2、启动本地服务

简单来说就是

webpack依赖express启动了一个本地服务器，可以访问本地静态资源。

生成了compiler对象，可以对本地文件的修改进行监听

启动本地服务后，可以通过webSocket与浏览器端进行通信

3、监听文件发生变化

在setupDevMiddleware中监听了本地文件的变化，当文件发生变化时重新进行编译。然后执行setFs方法，将编译后的文件打包内存。

4、监听webpack编译完成

当一次webpack编译结束，就会调用_sendStats方法通过websocket给浏览器发送通知，ok和hash事件，这样浏览器就可以拿到最新的hash值了，做检查更新逻辑。

5、浏览器收到检查更新通知

浏览器收到ok和hash事件，开始检查更新。

hash事件：更新最新一次打包的值

ok事件：进行更新检查

6、HotModuleReplacementPlugin进行更新

在此之前，一直是webpack-dev-server所做的事情，接下来更新这里是HotModuleReplacementPlugin负责。HotModuleReplacementPlugin里面的k方法，发送请求，获取上一次的hash值，在使用hotApply（这里省略一些步骤…）删除掉旧的模块，添加新的模块。