Webpack 的构建流程是怎样的？

详细解析#

三个阶段#

1. 初始化：读取 webpack.config.js，和命令行参数、默认配置合并成最终配置；创建 Compiler 对象，依次调用每个插件的 apply(compiler)，再根据配置注册内置插件（比如根据 entry 注册入口插件）
2. 编译（make）：compiler.run() 后创建一个 Compilation，从每个入口开始构建模块：
   • 解析模块路径（resolve），找到对应的文件
   • 按 module.rules 匹配 loader，把文件内容转换成 JavaScript
   • 用 JavaScript 解析器（webpack 内部用 acorn）把代码解析成 AST，找出 import、require、import() 等依赖
   • 对每个依赖重复上面的过程，直到所有模块都处理完
3. 输出（seal 和 emit）：
   • 根据入口和 import() 把模块分配到 chunk，再按 splitChunks 等规则优化（见 代码分割）
   • 做 tree shaking 标记、模块合并（scope hoisting）、压缩等优化
   • 为每个 chunk 生成最终代码，和运行时代码一起变成输出资源（asset）
   • 写入 output.path，触发 done 钩子

config + CLI 参数
      │ 合并
      ▼
  Compiler ── 调用每个插件的 apply()
      │ run
      ▼
 Compilation ── make：入口 → resolve → loader → 解析 AST → 收集依赖 → 递归
      │            得到模块依赖图
      │ seal：模块 → chunk → 优化 → 生成代码 → processAssets
      ▼
   emit：写入磁盘 → done

Compiler 和 Compilation#

插件一般先在 Compiler 的 thisCompilation 或 compilation 钩子里拿到 Compilation，再去 tap Compilation 的钩子，写法见 Loader 和 Plugin。

Tapable 钩子#

webpack 的钩子都来自 Tapable 库，按执行方式分成几类：

同步钩子只能用 tap 注册；异步钩子还可以用 tapAsync（回调风格）或 tapPromise（返回 Promise）。

产物里的运行时#

浏览器不认识 webpack 的模块图，所以输出的代码里会带一段运行时：所有模块被包成函数放进一张模块表，由 __webpack_require__ 按 id 加载并缓存。下面是简化后的样子，结构和真实产物一致：

;(() => {
  // 模块表：key 是模块 id（开发模式下是路径，生产模式下是数字），value 是包装后的模块函数
  const modules = {
    './src/math.js': (module, exports, require) => {
      require.d(exports, { cube: () => cube }) // ESM 导出被改写成 getter，实现活绑定
      function cube(x) {
        return x * x * x
      }
    },
    './src/index.js': (module, exports, require) => {
      const math = require('./src/math.js') // import 被改写成 __webpack_require__
      console.log(math.cube(3))
    },
  }

  const cache = {}
  function __webpack_require__(id) {
    if (cache[id]) return cache[id].exports // 每个模块只执行一次
    const module = (cache[id] = { exports: {} })
    modules[id](module, module.exports, __webpack_require__)
    return module.exports
  }
  __webpack_require__.d = (exports, getters) => {
    for (const key in getters) {
      Object.defineProperty(exports, key, { enumerable: true, get: getters[key] })
    }
  }

  __webpack_require__('./src/index.js') // 从入口开始执行
})()

异步 chunk 由运行时里的 __webpack_require__.e 负责：插入 script 标签加载 chunk 文件，chunk 加载后把自己的模块注册进模块表，再执行。生产模式下开启 scope hoisting 后，能合并的 ESM 模块会被拼进同一个函数作用域，模块表会小很多。

面试官可能追问#

易错点#

• Compiler 只有一个，Compilation 每次构建都会新建；在 watch 模式下把状态存在 Compilation 上，下次构建就丢了
• 依赖收集靠的是解析 AST，不是执行代码。import('./locale/' + lang) 这类带表达式的路径，webpack 会把整个目录下匹配的文件都打包进来；路径完全是变量时，只能给出警告，无法打包
• loader 处理完的结果必须是 webpack 能解析的模块（JavaScript，或 webpack 5 支持的 asset、JSON 等类型），否则会报 "Module parse failed"