概述
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 的行为。