标准答案
- Webpack 会先读取配置和插件,初始化 compiler。
- 从 entry 开始构建依赖图,解析 import、require 等依赖关系。
- 遇到不同类型的资源时,根据 module.rules 使用 loader 转换成模块。
- 依赖图构建完成后,Webpack 会把模块组织成 chunk,并进行代码分割、Tree Shaking、压缩等优化。
- 最后把 chunk 和 assets 输出到目标目录,插件可以在多个生命周期阶段介入。
题目解析
Webpack 的核心不是“把文件合并在一起”,而是从入口出发建立一张模块依赖图。只要资源能通过 loader 转成模块,它就可以进入这张图里被统一分析和打包。
chunk 是理解产物的关键。一个项目可能有入口 chunk、异步 chunk、公共依赖 chunk,代码分割和缓存策略都建立在这些 chunk 的组织方式上。
构建慢通常也要沿这个流程拆开看:解析慢、loader 转换慢、依赖太多、压缩慢、source map 慢、插件做了重活,定位方向会完全不同。
代码示例
可以把 Webpack 构建流程压缩成下面这条主线。
Text
config
-> compiler
-> entry
-> dependency graph
-> loader transform
-> chunks
-> optimize
-> emit assets常见误区
- 只说“Webpack 会打包 JS”,忽略 CSS、图片、字体等资源也可以进入模块图。
- 把 loader 和 plugin 的执行位置混在一起,无法解释构建扩展点。
- 优化构建速度时没有分阶段定位,直接盲目加缓存或换工具。