webpack构建过程

495 阅读2分钟

在 Webpack 的构建过程中,Compilation 是一个非常核心的类,它代表了一次资源的编译过程。Webpack 实例化 Compilation 对象的时机主要是在每次构建开始时,即每次运行构建任务或进行一次增量编译(在开发模式下,使用 watch 模式时)时。

具体来说,Compilation 对象的实例化通常发生在以下几个步骤:

  1. 初始化编译过程

    • Webpack 在开始一次新的构建过程时,会调用 Compiler 实例的 run 方法或 watch 方法。这两个方法负责初始化一次完整的编译过程。
  2. 创建 Compilation 对象

    • 在编译过程开始时,Webpack 会调用内部的 compiler.newCompilation 方法创建一个新的 Compilation 实例。这个方法通常位于 Webpack 的核心代码中,负责初始化一个新的编译对象,储存编译过程中所需的所有状态和资源。
  3. 触发 compilation 事件

    • Compilation 对象创建后,Webpack 会触发 compiler 实例上的 compilation 事件,并传递新创建的 Compilation 对象。开发者和插件可以在这个事件中对 Compilation 对象进行操作或扩展。
    compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
        console.log('A new compilation is created!');
    });
    
  4. 开始编译模块

    • Webpack 使用 Compilation 对象来管理整个编译过程,包括解析模块、生成依赖关系图、优化代码等。它会调用 compilation 对象的方法来执行这些任务。

具体流程示例

以下是一个高层次的流程示例,展示了 Compilation 对象的创建和使用:

  1. Webpack CLI 或 API 调用

    • 用户通过命令行或 Webpack API 启动构建过程。
    webpack --config webpack.config.js
    
  2. 创建 Compiler 实例

    • Webpack 使用配置文件创建一个 Compiler 实例。
    const compiler = webpack(config);
    
  3. 启动编译过程

    • 调用 runwatch 方法启动编译过程。
    compiler.run((err, stats) => {
        // 编译完成的回调
    });
    
  4. 创建 Compilation 实例

    • 在编译过程开始时,Webpack 内部会调用 compiler.newCompilation 方法创建一个新的 Compilation 实例。
    const compilation = compiler.newCompilation();
    
  5. 触发 compilation 事件

    • 创建 Compilation 实例后,触发 compilation 事件。
    compiler.hooks.compilation.call(compilation);
    
  6. 编译模块和资源

    • 使用 Compilation 对象解析和编译模块,生成最终的资源。
    compilation.buildModule(module, (err) => {
        // 模块编译完成
    });
    

总的来说,Compilation 对象的实例化是在每次构建任务开始时进行的,是 Webpack 内部一个非常关键的步骤。它管理和控制整个编译过程,记录编译状态和生成结果。