Webpack 的打包过程是一个递归构建依赖关系图并生成优化后静态资源的过程，其核心流程可概括为以下几个关键阶段：

1.启动阶段：初始化与配置合并

Webpack 首先会从命令行或 webpack.config.js 中获取配置参数，并将这些参数与默认配置合并，生成完整的 options 对象。随后，Webpack 会创建 Compiler 对象，该对象作为整个打包流程的管理者，负责协调后续所有操作。在此阶段，用户配置的插件（Plugins）会被注册到 Compiler 的钩子系统中，例如 environment 和 initialize 钩子，为后续流程做准备。

2. 编译与构建阶段：模块解析与依赖收集

编译阶段是打包流程的核心，主要任务是从入口文件开始，递归分析模块依赖并构建依赖图。

• 模块解析与转换：Webpack 会调用对应的 Loader 对非 JavaScript 模块（如 CSS、图片等）进行转换，将其处理为 JavaScript 代码。

• 依赖收集：使用 Babel 等工具将模块代码解析为抽象语法树（AST），遍历 AST 时遇到 import 或 require 语句时，会创建 Dependency 对象记录模块依赖关系，并递归处理依赖模块，最终形成完整的模块依赖图（Module Graph）。

• 关键对象：此阶段会生成 Compilation 对象，它代表单次构建的上下文，包含当前构建的所有模块和资源信息。

3. 输出阶段：打包与资源生成

在依赖图构建完成后，Webpack 进入生成阶段，将模块组织为更高效的输出结构。

• Chunk 划分：根据入口配置和依赖关系，将模块分组为 Chunk（如 Entry Chunk、Async Chunk），并建立 Chunk 之间的依赖关系（Chunk Graph）。

• 代码优化：通过插件系统（如 Tree Shaking、代码分割）对 Chunk 进行优化，例如删除未使用代码或提取公共模块。

• 资源生成：为每个 Chunk 生成对应的资产文件（如 JavaScript 文件），并计算文件哈希值用于缓存。