Webpack 打包流程
Webpack 从入口分析到输出产物的核心打包流程。
#tech / dev / frontend / eng
#type / concept
#status / growing
[!info] related notes
Webpack 打包流程
Webpack 的核心不是“把文件压成一个包”，而是围绕模块依赖图做分析、转换和输出。
一句话定义
Webpack 会从入口出发构建依赖图，经过模块解析、资源转换、代码封装和优化后，最终输出浏览器可用的静态资源。
最稳的理解顺序
- 读取配置和入口
- 从入口递归分析依赖
- 遇到不同类型的模块时交给 Loader 转换
- 形成模块依赖图
- 在构建阶段由 Plugin 参与扩展和优化
- 生成 chunk、bundle 以及最终产物
流程拆开看
入口分析
Webpack 从 entry 指定的模块开始，把它当成整个依赖图的起点。
模块递归解析
当入口文件里继续 import 其他模块时，Webpack 会继续向下分析，直到把依赖关系收集出来。
资源转换
对 CSS、TypeScript、图片等资源，Webpack 会交给对应 Loader 处理。
构建与优化
在模块图形成后，Webpack 会进行 chunk 拆分、运行时代码注入、压缩、抽离等处理，这一阶段 Plugin 会大量参与。
输出产物
最终根据 output 配置生成浏览器可用的 JS、CSS、静态资源和 HTML 辅助产物。
最容易误解的点
- Webpack 不只是“压缩工具”，它先做的是模块图构建
Loader和Plugin都参与流程，但位置不同- 开发环境和生产构建都可能走这套思路，只是优化目标不同
最短记忆方式
Webpack = 入口出发 -> 构建依赖图 -> 转换资源 -> 优化输出。
面试要点
来自 webpack-build-process-interview-question 的面试视角整理。
一句话回答
Webpack 会从入口文件出发递归分析依赖，借助 Loader 转换不同类型的模块，再由 Plugin 扩展构建过程，最后输出可部署的静态资源。
最稳的回答主线
- 读取配置和入口
- 从入口递归收集依赖
- 用 Loader 处理不同资源
- 形成模块依赖图
- 在构建阶段做拆包、压缩、注入等优化
- 输出最终 bundle 或其他静态资源
面试里一句加分点
如果能顺手补一句“Webpack 的核心其实是依赖图构建”，通常就已经比只会说打包压缩更深入。
最短记忆方式
入口 -> 依赖图 -> 转换 -> 优化 -> 输出。