webpack的热更新原理

news2024/11/13 15:12:28

Webpack热更新（ Hot Module Replacement，简称 HMR），无需完全刷新整个页面的同时，更新所有类型的模块，是 Webpack 提供的最有用的功能之一。

保留在完全重新加载页面期间丢失的应用程序状态。
只更新变更内容，以节省宝贵的开发时间。
在源代码中对 CSS / JS 进行修改，会立刻在浏览器中进行更新，这几乎相当于在浏览器 devtools 直接更改样式。

HMR作为一个Webpack内置的功能，可以通过HotModuleReplacementPlugin或--hot开启。

刷新我们一般分为两种：

一种是页面刷新，不保留页面状态，就是简单粗暴，直接window.location.reload()。
另一种是基于WDS (Webpack-dev-server)的模块热替换，只需要局部刷新页面上发生变化的模块，同时可以保留当前的页面状态，比如复选框的选中状态、输入框的输入等。

webpack 构建

项目启动之后，会进行首次构建打包，控制台中会输出整个的构建过程，可以观察到一个 Hash 值 3606e1ab1ddcf6626797。
在这里插入图片描述
在每次代码的修改后，保存时都会在控制台上出现 compiling…字样，可以在控制台中观察到：

Hash 值更新：4f8c0eff7ac051c13277；
新生成文件：3606e1ab1ddcf6626797.hot-update.json
main1.3606e1ab1ddcf6626797.hot-update.js。

如果没有任何改动，直接保存，控制台输出编译打包信息，Hash 值没有发生变化，仍旧是 4f8c0eff7ac051c13277。

再次修改代码保存，控制台输出编译打包信息。根据文件名可以发现，上次输出的 Hash 值被作为本次编译新生成的 Hmr 文件标识。同样，本次输出的 Hash 值会被作为下次热更新的标识。

webpack watch

为什么代码的改动保存会自动编译，重新打包？这一系列的重新检测编译依赖于 Webpack 的文件监听：在项目启动之后，Webpack 会通过 Compiler 类的 Run 方法开启编译构建过程，编译完成后，调用 Watch 方法监听文件变更，当文件发生变化，重新编译，编译完成之后继续监听。

在这里插入图片描述

页面的访问需要依赖 Web 服务器，那要如何将 Webpack 编译打包之后的文件传递给 Web 服务器呢？这就要看 Webpack-dev-middleware了。 Webpack-dev-middleware 是一个封装器（ wrapper ），它可以把 Webpack 处理过的文件发送到一个Server（其中 Webpack-Dev-Server 就是内置了 Webpack-dev-middleware 和 Express 服务器）。上面有说到编译之后的文件会被写入到内存，而 Webpack-dev-middleware 插件通过 memory-fs 实现静态资源请求直接访问内存文件。

	const webpack = require('webpack');
	const webpackConfig = require('./webpack.dev.conf');
	const compiler = webpack(webpackConfig);
	debug('webpack编译完成');
	debug('将编译流通过webpack-dev-middleware');
	const devMiddleware = require('webpack-dev-middleware')(compiler, {
	// self-define options
	});

上面代码可以看到，Webpack 编译打包之后得到一个 Compilation ，并将 Compilation 传递到 Webpack-dev-middleware 插件中，Webpack-dev-middleware 可以通过 Compilation 调用 Webpack中的 Watch 方法实时监控文件变化，并重新编译打包写入内存。

留意一下浏览器端，在 Network 中可以看到几个请求：
/__Webpack_hmr 请求返回的消息包含了首次 Hash 值，每次代码变动重新编译后，浏览器会发出 hash.hot-update.json、fileChunk.hash.hot-update.js 资源请求。
在这里插入图片描述

点开查看 hash.hot-update.json 请求，返回的结果中，h 是一个 hash 值，用于下次文件热更新请求的前缀，c 表示当前要热更新的文件是 main1 。
在这里插入图片描述
继续查看 fileChunk.hash.hot-update.js，返回的内容是使用 webpackHotUpdate 标识的 fileChunk 内容。

在这里插入图片描述

热更新源码

我们根据webpack-dev-server的package.json中的bin命令，可以找到命令的入口文件bin/webpack-dev-server.js。

	// node_modules/webpack-dev-server/bin/webpack-dev-server.js
	
	// 生成webpack编译主引擎 compiler
	let compiler = webpack(config);
	
	// 启动本地服务
	let server = new Server(compiler, options, log);
	server.listen(options.port, options.host, (err) => {
	    if (err) {throw err};
	});

本地服务代码：

	// node_modules/webpack-dev-server/lib/Server.js
	class Server {
	    constructor() {
	        this.setupApp();
	        this.createServer();
	    }
	    
	    setupApp() {
	        // 依赖了express
	    	this.app = new express();
	    }
	    
	    createServer() {
	        this.listeningApp = http.createServer(this.app);
	    }
	    listen(port, hostname, fn) {
	        return this.listeningApp.listen(port, hostname, (err) => {
	            // 启动express服务后，启动websocket服务
	            this.createSocketServer();
	        }
	    }                                   
	}

总结：

这一小节代码主要做了三件事：

启动webpack，生成compiler实例。compiler上有很多方法，比如可以启动 webpack 所有编译工作，以及监听本地文件的变化。
使用express框架启动本地server`，让浏览器可以请求本地的静态资源。
本地server启动之后，再去启动websocket服务，通过websocket，可以建立本地服务和浏览器的双向通信。这样就可以实现当本地文件发生变化，立马告知浏览器可以热更新代码啦！

如果不了解websocket，建议简单了解一下websocket速成.