⚡ 30 秒速记

• 核心判断：构建工具从入口解析依赖图，经转换和优化生成可在目标运行时加载的模块与资源
• 原理主线：围绕 「工作过程简介」、「工作原理剖析」、「写在最后」 建立输入、状态变化与输出之间的因果关系
• 文章范围：介绍了Webpack的核心工作原理和运行机制，包括打包流程、依赖关系解析、Loader与Plugin的作用，以及如何通过源码查阅深入理解Webpack的各个关键环节，帮助前端开发者全面掌握Webpack的工作方式和扩展能力。
• 边界与代价：静态分析受模块语法、动态依赖和副作用声明限制；拆包过细也会增加请求和运行时成本
• 工程落地：优化前先测构建阶段、产物组成和缓存命中，再针对解析、转换、压缩或运行时逐层处理

Webpack 从入口递归解析依赖，把各类资源转换成模块，再合并并输出浏览器可运行的产物。 CLI 会整合命令行参数和配置并创建 Compiler，一次构建的数据则集中在 Compilation 中。进入 make 阶段后，它从入口建立依赖树，调用对应 Loader 处理模块，并借助语法树继续发现依赖。Plugin 通过生命周期钩子扩展构建流程，而不是取代这条核心链路。

这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。

版本校准： 旧文中的 webpack 4、JSONP 更新清单或 react-hot-loader 代码用于解释历史链路，不应直接复制到新项目。当前 webpack-dev-server 4+ 默认启用 HMR，严格 ESM 可使用 import.meta.webpackHot；生产环境不得携带 HMR runtime。以 webpack HMR 官方指南 和项目锁定版本为准。

工作过程简介

其实 Webpack 官网首屏的英雄区就已经很清楚地描述了它的工作原理，如下图所示：

那这里我们先来快速理解一下 Webpack 打包的核心工作过程。我们以一个普通的前端项目为例，项目中一般都会散落着各种各样的代码及资源文件，如下图所示：

比如 JS、CSS、图片、字体等，这些文件在 Webpack 的思想中都属于当前项目中的一个模块。Webpack 可以通过打包，将它们最终聚集到一起。Webpack 在整个打包的过程中：

• 通过 Loader 处理特殊类型资源的加载，例如加载样式、图片；
• 通过 Plugin 实现各种自动化的构建任务，例如自动压缩、自动发布。

具体来看打包的过程，Webpack 启动后，会根据我们的配置，找到项目中的某个指定文件（一般这个文件都会是一个 JS 文件）作为入口。然后顺着入口文件中的代码，根据代码中出现的 import（ES Modules）或者是 require（CommonJS）之类的语句，解析推断出来这个文件所依赖的资源模块，然后再分别去解析每个资源模块的依赖，周而复始，最后形成整个项目中所有用到的文件之间的依赖关系树，下面这个动画生动的演示了这个过程：