webpack热更新原理

webpack热更新原理

一、什么是热更新？

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

二、webpack热更新基本原理

1.修改webpack.config.js的entry配置

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

// 修改后的entry入口
{ entry:
    { index: 
        [
            // 上面获取的clientEntry
            'xxx/node_modules/webpack-dev-server/client/index.js?http://localhost:8080',
            // 上面获取的hotEntry
            'xxx/node_modules/webpack/hot/dev-server.js',
            // 开发配置的入口
            './src/index.js'
    	],
    },
}      

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

2.启动本地服务

简单来说就是

1. webpack依赖express启动了一个本地服务器，可以访问本地静态资源。
2. 生成了compiler对象，可以对本地文件的修改进行监听
3. 启动本地服务后，可以通过webSocket与浏览器端进行通信

3.监听文件发生变化

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

4.监听webpack编译完成

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

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

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

• hash事件：更新最新一次打包的值
• ok事件：进行更新检查

6.HotModuleReplacementPlugin进行更新

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

参考博文：
[1]: 轻松理解webpack热更新原理