首先要理解webpack中比较核心的概念：

webpack编译过程中一个比较重要的概念compiler、compilation，如下：

webpack 执行流程和事件流如下图所示：

webpack的运行是一个串行过程，过程如下：

初始化：启动构建，读取与合并配置参数，加载 Plugin，实例化 Compiler。

编译：从 Entry 发出，针对每个 Module 串行调用对应的 Loader 去翻译文件内容，再找到该 Module 依赖的 Module，递归地进行编译处理。

输出：对编译后的 Module 组合成 Chunk，把 Chunk 转换成文件，输出到文件系统。

如果只执行一次构建，以上阶段将会按照顺序各执行一次。但在开启监听模式下，流程将变为如下：

具体运行过程：

这里主要最重要的就是compilation过程，compilation 实际上就是调用相应的 loader 处理文件生成 chunks并对这些 chunks 做优化的过程。几个关键的事件（Compilation对象this.hooks中）：

补充

补充：webpack 的运行是一个串行过程，整体可分为四个阶段：

  1. 初始化：从 webpack.config.js + shell 合并参数；加载所有 Plugin；实例化 Compiler（贯穿整个生命周期的全局对象，继承自 Tapable）；执行 compiler.hooks.beforeRun / run / beforeCompile / compile 等钩子。
  2. 编译（make）：从 entry 出发，递归地：① 调用匹配的 loader 把源码转换为 JS；② 用 acorn 解析成 AST，提取 import / require 等依赖；③ 把新模块加入依赖图。这一阶段会产生 compilation（单次构建上下文），触发 make 钩子。
  3. 构建（build / seal）：把模块组合成 Chunk（包含 entry 与其依赖），按 splitChunks 规则拆 chunk，再优化（tree shaking、scope hoisting、压缩等）。触发 optimize、optimizeAssets 等钩子。
  4. 输出（emit）：根据 output 配置把每个 chunk 写出为最终文件（文件名含 hash）。触发 emit 钩子（这是插件修改产物的最后机会）。

监听模式下（webpack --watch 或 webpack-dev-server）：第 2~4 步会循环执行，依赖图变化时增量重建并通过 WebSocket 通知浏览器做 HMR。

关键对象：

  • Compiler：全局、单例，代表 webpack 从启动到退出的完整生命周期。
  • Compilation：单次构建的上下文，模块、依赖、chunk 都归它管理；watch 模式下每次文件变更都会创建新的 Compilation。

来源整理自：我的有道云笔记