核心代码,注释必读
// download:3w 52xueit com
vue 2.x 响应式
Object.defineProperty
爱学it学无止境
在 Webpack 的构建过程中,Compilation 是一个非常核心的类,它代表了一次资源的编译过程。Webpack 实例化 Compilation 对象的时机主要是在每次构建开始时,即每次运行构建任务或进行一次增量编译(在开发模式下,使用 watch 模式时)时。
具体来说,Compilation 对象的实例化通常发生在以下几个步骤:
初始化编译过程:
Webpack 在开始一次新的构建过程时,会调用 Compiler 实例的 run 方法或 watch 方法。这两个方法负责初始化一次完整的编译过程。
创建 Compilation 对象:
在编译过程开始时,Webpack 会调用内部的 compiler.newCompilation 方法创建一个新的 Compilation 实例。这个方法通常位于 Webpack 的核心代码中,负责初始化一个新的编译对象,储存编译过程中所需的所有状态和资源。
触发 compilation 事件:
在 Compilation 对象创建后,Webpack 会触发 compiler 实例上的 compilation 事件,并传递新创建的 Compilation 对象。开发者和插件可以在这个事件中对 Compilation 对象进行操作或扩展。
compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
console.log('A new compilation is created!');
});
开始编译模块:
Webpack 使用 Compilation 对象来管理整个编译过程,包括解析模块、生成依赖关系图、优化代码等。它会调用 compilation 对象的方法来执行这些任务。
具体流程示例
以下是一个高层次的流程示例,展示了 Compilation 对象的创建和使用:
Webpack CLI 或 API 调用:
用户通过命令行或 Webpack API 启动构建过程。
webpack --config webpack.config.js
创建 Compiler 实例:
Webpack 使用配置文件创建一个 Compiler 实例。
const compiler = webpack(config);
启动编译过程:
调用 run 或 watch 方法启动编译过程。
compiler.run((err, stats) => {
// 编译完成的回调
});
创建 Compilation 实例:
在编译过程开始时,Webpack 内部会调用 compiler.newCompilation 方法创建一个新的 Compilation 实例。
const compilation = compiler.newCompilation();
触发 compilation 事件:
创建 Compilation 实例后,触发 compilation 事件。
compiler.hooks.compilation.call(compilation);
编译模块和资源:
使用 Compilation 对象解析和编译模块,生成最终的资源。
compilation.buildModule(module, (err) => {
// 模块编译完成
});
总的来说,Compilation 对象的实例化是在每次构建任务开始时进行的,是 Webpack 内部一个非常关键的步骤。它管理和控制整个编译过程,记录编译状态和生成结果。
领取专属 10元无门槛券
私享最新 技术干货