【Webpack】生命周期

概述

Webpack 的生命周期是指从启动到结束整个过程中会经历的一系列步骤。简单来说，Webpack 的生命周期分为以下几个主要阶段：

1）初始化：Webpack 读取配置文件，初始化参数。
2）编译：根据入口文件，递归地构建依赖图。
3）模块解析与转换：模块被解析、编译和转换成标准模块。
4）优化：在生成块和模块之后，对依赖关系进行优化。
5）生成：根据最终的依赖关系，生成最终的输出文件。

扩展

1）初始化：

• Webpack 从配置文件中读取配置，初始化编译器 (Compiler) 对象。
• 初始化之后，调用所有配置的插件的 apply 方法，附上 Compiler 实例。
• 根据配置文件中的 entry，确定构建的入口文件。

2）编译：

• 从入口文件开始，调用对应的 loader 进行处理。
• 递归地解析入口文件中依赖的模块，同样应用相应的 loader。
• 构建依赖图（Dependency Graph），其中每个模块都是节点。

3）模块解析与转换：

• Webpack 内部使用 acorn 或 esprima 等工具对模块进行解析。
• loader 将特定类型的文件（如 TypeScript、Sass）转换成 JavaScript 模块。
• 在此过程中，如果遇到动态导入等需要进一步解析的模块，会继续处理。

4）优化：

• 此阶段进行模块优化，包括 Tree-Shaking、Scope Hoisting 等。
• 优化图形中模块的依赖关系，消除冗余代码。

5）生成：

• 根据优化后的依赖关系图，生成块（Chunk）。
• 最后将这些块输出到配置好的输出目录，每个块即为最终生成的文件（如 bundle.js）。

插件在不同的生命周期钩子中插入代码，例如：compiler.hooks.run.tap 可以在编译开始时执行，compilation.hooks.optimize 可以优化模块。通过这些钩子，能够更灵活地控制 Webpack 的行为。