webpack plugin 核心机制分析

webpack plugin 核心机制分析

什么是 plugin ?

webpack 编译的各个阶段都会为编译对象初始化不同的 Hook,开发者考科一在自己编写的 plugin 中监听到这些 Hook，在打包的某个特定的时间段出发对应的 Hook 从而注入特定逻辑，来实现自己的需求。类比 Vue React 的生命周期函数

前置知识点 Tapable

tapable 这个小型的 library 是 webpack 的核心工具，但是也可以用于其他地方，以提供类似的插件接口。webpack 中许多对象扩展自 tapable 类，这个类暴露 tap tapAsync tabPromise 方法，可以使用这些方法，注入自定义的构建步骤，这些步骤将在整个编译过程中不同时机触发。

tapable

const { SyncHook } = require("tapable");
const hook = new SyncHook(["name", "age"]);

// hook.tab 处理的时间就是一个 plugin，动态注册一个插件
hook.tap("plugin1", (name, age) => {
  console.log(name, age);
});
hook.call("John", 18);

const { AsyncSeriesBaiduHook } = require("tapable");
const sHook = new asyncSeriesBaiduHook(["name", "age"]);
sHook.tapAsync("plugin1", (name, age, callback) => {
  setTimeout(() => {
    console.log(name, age);
    callback();
  }, 3000);
});

sHook.tabPromise("plugin2", (name, age) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(name, age);
      resolve();
    }, 3000);
  });
});

sHook.callAsync("John", 18, () => {
  console.log("all done");
});