标准答案

  1. Webpack 会先读取配置和插件,初始化 compiler。
  2. 从 entry 开始构建依赖图,解析 import、require 等依赖关系。
  3. 遇到不同类型的资源时,根据 module.rules 使用 loader 转换成模块。
  4. 依赖图构建完成后,Webpack 会把模块组织成 chunk,并进行代码分割、Tree Shaking、压缩等优化。
  5. 最后把 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 的执行位置混在一起,无法解释构建扩展点。
  • 优化构建速度时没有分阶段定位,直接盲目加缓存或换工具。

作者信息