当前位置：首页 > news >正文

webpack原理之-打包流程热更新HMR

news 2025/7/19 21:37:44

webpack打包流程？

1. 初始化: 启动构建，读取与合并配置参数，加载Plugin，实例化Compiler；

2. 编译: 从 entry出发，针对每个 Module 串行调用对应的 loader 去翻译文件的内容，再找到该 Module 依赖的Module，递归地进行编译处理；

3. 输出:将编译后的 Module 组合成 Chunk，将 Chunk 转换成文件，输出到文件系统中。

loader和plugin到底是什么呢？

loader即文件加载器：用来预处理文件。

plugin即插件：用来增强功能。

比如css-loader, 就是解析CSS文件，并处理CSS中的依赖关系，可以将css都提取出来，如果js中包含css代码，会为其创建一个css文件。

处理一个文件可以使用多个loader，loader的执行顺序和配置中的顺序是相反的，最后一个loader最先执行，第一个loader最后执行。

第一个执行的loader接受源文件作为参数内容，其他的loader接受前一个loader的返回值作为自己的参数，最后一个执行的loader会返回此模块的JavaScript源码。

loader即为文件加载器，操作的是文件，将文件A通过loader转换成文件B，是一个单纯的文件转化过程。

plugin即为插件，是一个扩展器，丰富webpack本身，增强功能，针对的是在loader结束之后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，监听webpack打包过程中的某些节点，执行广泛的任务。

webpack 在编译代码过程中，会触发一系列 Tapable 钩子事件，插件所做的，就是找到相应的钩子，往上面挂上自己的任务，也就是注册事件，这样，当 webpack 构建的时候，插件注册的事件就会随着钩子的触发而执行了。

webpack热更新如何实现的？HMR

Hot Module Replacement，可以理解为模块热替换，指在应用程序运行的过程中，替换、添加、删除模块，而无需重新刷新整个应用。

具体过程如下：

1. webpack在watch模式下，利用webpack-dev-server 和 webpack 之间的接⼝交互，监听文件变化，如果更改内容，就会将变化的内容重新编译，存在内存里；

2. 通过 sockjs（webpack-dev-server 的依赖）在浏览器端和服务端之间建⽴⼀个 websocket ⻓连接，将 webpack 编译打包的各个阶段的状态信息告知浏览器端，同时也包括 Server 监听静态⽂件变化的信息。浏览器端根据这些 socket 消息进⾏不同的操作。服务端传递的最主要信息还是新模块的 hash 值，后⾯的步骤根据这⼀ hash 值来进⾏模块热替换；

3. HMR的 runtime 拿到了更新后的hash只，会向server端发送请求获取更新列表，然后再发送一次请求获取所有更新内容的代码；

4. 将新旧模块进行对比，决定是否更新，如果确定更新，就会检查模块之间的依赖关系，更新依赖引用；

5. 当HMR失败后，会触发live reload，刷新页面，获取最新的chunk。