请描述 Webpack 进行一次完整打包构建时，从读取入口文件到输出最终 bundle 的整体执行流程是怎样的？

回答思路

1. 【回答框架 1】初始化阶段：Webpack 读取配置（如 webpack.config.js），创建 Compiler 实例，并注册所有内置插件和用户配置的插件。随后 Compiler 开始运行，调用 run 方法启动构建。
2. 【回答框架 2】编译阶段：从配置的 entry 入口开始，Webpack 递归解析模块依赖。每个模块会先通过对应的 loader 进行转换（如 babel-loader 处理 ES6），然后生成模块的抽象语法树，分析其依赖关系，并将模块及其依赖加入到模块列表中。
3. 【回答框架 3】构建模块与生成 chunk：Webpack 为每个模块生成唯一的模块 ID，并根据依赖关系将模块分组为 chunk。同时，插件可以在此阶段介入，如代码分割插件可以生成多个 chunk。
4. 【回答框架 4】输出阶段：Webpack 将所有 chunk 渲染为静态资源文件，包括处理 hash、文件名等。最后根据 output 配置将文件写入指定目录，完成打包构建。
5. 【回答框架 5】整个过程通过 Tapable 事件流机制，在多个生命周期钩子（如 before-run、before-compile、emit 等）触发插件回调，实现高度可扩展性。
6. 【关键点 1】Webpack 构建核心流程为：初始化 Compiler 与插件、递归解析入口及依赖、通过 loader 转换模块、生成 chunk、输出 bundle。
7. 【关键点 2】模块解析基于增强的 resolve 规则，支持 extensions、alias 等配置。
8. 【关键点 3】loader 的执行顺序是从右到左、从下到上，且每个 loader 处理后的结果传给下一个 loader。
9. 【关键点 4】插件通过 Tapable 钩子介入构建各阶段，如 optimize、emit 等。
10. 【关键点 5】输出资源支持代码分割和缓存优化（如 contenthash）。
11. 【易错点 1】混淆了 loader 与插件的作用：loader 用于转换模块内容，而插件用于处理构建流程中的任务。
12. 【易错点 2】忽略模块依赖图的构建顺序，可能误解为一次性编译所有文件，实际是递归分析依赖。
13. 【易错点 3】认为 Webpack 直接输出可执行代码，实际上输出的是浏览器可运行的静态资源（包含模块运行时和加载逻辑）。