手写Webpack生命周期及其实现过程

itc码老师
3,318 阅读3分钟

Webpack 是一个流行的前端打包工具，它提供了许多生命周期钩子来帮助开发者在构建项目时进行定制化处理。本文将介绍 Webpack 生命周期的概念以及如何使用 JavaScript 代码模拟实现 Webpack 生命周期的执行过程。

Webpack 生命周期简介

Webpack 生命周期是指 Webpack 在执行过程中所遵循的一系列钩子函数，每个钩子函数代表着一个特定的阶段，开发者可以通过注册回调函数的方式，在这些钩子函数中完成自定义的操作。Webpack 生命周期主要分为以下 11 个阶段：

  1. beforeRun在 Webpack 开始读取配置之前，该钩子将被调用。
  2. run在 Webpack 开始编译时，该钩子将被调用。
  3. watchRun在使用 webpack-dev-server 进行开发时，该钩子将被调用。
  4. beforeCompile在 Webpack 开始编译之前，该钩子将被调用。
  5. compile在 Webpack 开始编译时，该钩子将被调用。
  6. thisCompilation在创建新的 Compilation 对象时，该钩子将被调用。
  7. compilation在编译时，每当 Webpack 生成一个新的 Compilation 对象时，该钩子将被调用。
  8. emit在生成资源之前，该钩子将被调用。
  9. afterEmit在生成资源之后，该钩子将被调用。
  10. done在 Webpack 编译完成时，该钩子将被调用。
  11. assetEmitted 生命周期钩子是在所有资源（如 JavaScript、CSS、图片等）都已经生成到输出目录中后，即 webpack 打包完毕后触发的。
graph LR;
  beforeRun --> run;
  run -->|watching| watchRun;
  run -->|normal| beforeCompile;
  beforeCompile --> compile;
  compile -->|normal| thisCompilation;
  thisCompilation --> compilation;
  compilation -->|normal| emit;
  compilation -->|failed| done;
  emit -->|normal| afterEmit;
  emit -->|failed| done;
  afterEmit --> done;

以上是，基于 webpack 生命周期的执行顺序进行绘制的流程图。其中包含了判断分支以及交叉情况，如编译出现错误时，直接跳转到 done 生命周期等。

模拟实现Webpack生命周期

要模拟实现 Webpack 生命周期，我们需要先定义一个 Compiler 类，该类包含所有的生命周期钩子以及相应的回调函数列表。然后我们可以向 Compiler 类的实例中添加回调函数，以在特定的生命周期中执行自定义的操作。最后，我们可以调用 run 方法，以按照 Webpack 生命周期的顺序执行所有的回调函数。

下面是我们使用 JavaScript 实现的 Compiler 类及其相关方法：

class Compiler {
  constructor() {
    this.hooks = {
      beforeRun: [],
      run: [],
      watchRun: [],
      beforeCompile: [],
      compile: [],
      thisCompilation: [],
      compilation: [],
      emit: [],
      afterEmit: [],
      done: []
    };
  }

  run() {
    console.log('Webpack starting to compile...');
    this.callHook('beforeRun');
    this.callHook('run');
    this.callHook('watchRun');
    this.callHook('beforeCompile');
    this.callHook('compile');
    this.callHook('thisCompilation');
    this.callHook('compilation');
    this.callHook('emit');
    this.callHook('afterEmit');
    this.callHook('done');
    console.log('Webpack compilation complete!');
  }

  callHook(name) {
    this.hooks[name].forEach(hook => hook());
  }

  plugin(name, callback) {
    this.hooks[name].push(callback);
  }
}

接下来，我们使用上述定义的Compiler类来模拟Webpack的生命周期。具体地，我们分别定义了beforeRun、run、watchRun、beforeCompile、compile、thisCompilation、compilation、emit、afterEmit、done等回调函数，并使用plugin方法将其注册到对应的生命周期中。最后，我们调用run方法来启动Webpack的构建过程，该方法将按照注册的生命周期顺序执行相应的回调函数。

const compiler = new Compiler();

compiler.plugin('beforeRun', () => console.log('beforeRun'));
compiler.plugin('run', () => console.log('run'));
compiler.plugin('watchRun', () => console.log('watchRun'));
compiler.plugin('beforeCompile', () => console.log('beforeCompile'));
compiler.plugin('compile', () => console.log('compile'));
compiler.plugin('thisCompilation', () => console.log('thisCompilation'));
compiler.plugin('compilation', () => console.log('compilation'));
compiler.plugin('emit', () => console.log('emit'));
compiler.plugin('afterEmit', () => console.log('afterEmit'));
compiler.plugin('done', () => console.log('done'));

compiler.run();

当我们运行这段代码时，可以看到控制台输出了编译过程中的各个生命周期的名称。这就说明了我们的 Compiler 类已经能够正常地添加生命周期钩子并在执行编译过程时按照指定的顺序调用这些钩子了。

上述示例代码虽然简单，但是它为我们理解 webpack 中的生命周期提供了一个非常好的入门。在实际开发中，我们可以根据自己的需求添加自定义的钩子函数，来扩展 webpack 的功能。

avatar
文章
阅读
粉丝