可以通过插件扩展 webpack，加入自定义的构建行为，使 webpack 可以执行更广泛的任务，拥有更强的构建能力

1. Plugin 工作原理

webpack 就像一条生产线，要经过一系列处理流程后才能将源文件转换成输出结果。这条生产线上的每个处理流程的职责都是单一的，多个流程之间有存在依赖关系，只有完成当前处理后才能交给下一个流程去处理。

插件就像是一个插入到生产线中的一个功能，在特定的时机对生产线上的资源做处理。

webpack 通过 Tapable 来组织这条复杂的生产线。 webpack 在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条生产线中，去改变生产线的运作。

webpack 的事件流机制保证了插件的有序性，使得整个系统扩展性很好。

站在代码逻辑的角度就是：webpack 在编译代码过程中，会触发一系列 Tapable 钩子事件，插件所做的，就是找到相应的钩子，往上面挂上自己的任务，也就是注册事件，这样当 webpack 构建的时候，插件注册的事件就会随着钩子的触发而执行。

2. Webpack 内部的钩子

2.1 钩子

钩子的本质就是：事件。为了方便开发者直接介入和控制编译过程，webpack 把编译过程中触发的各类关键事件封装成事件接口暴露了出来。这些接口被很形象地称做：hooks（钩子），开发插件，离不开这些钩子。

2.2 Tapable

Tapable 为 webpack 提供了统一的插件接口（钩子）类型定义，它是 webpack 的核心功能库。webpack 中目前有十种 hooks，在 Tapable 源码中可以看到，他们是：

// https://github.com/webpack/tapable/blob/master/lib/index.js
exports.SyncHook = require("./SyncHook");
exports.SyncBailHook = require("./SyncBailHook");
exports.SyncWaterfallHook = require("./SyncWaterfallHook");
exports.SyncLoopHook = require("./SyncLoopHook");
exports.AsyncParallelHook = require("./AsyncParallelHook");
exports.AsyncParallelBailHook = require("./AsyncParallelBailHook");
exports.AsyncSeriesHook = require("./AsyncSeriesHook");
exports.AsyncSeriesBailHook = require("./AsyncSeriesBailHook");
exports.AsyncSeriesLoopHook = require("./AsyncSeriesLoopHook");
exports.AsyncSeriesWaterfallHook = require("./AsyncSeriesWaterfallHook");
exports.HookMap = require("./HookMap");
exports.MultiHook = require("./MultiHook");

Tapable 还统一暴露了三个方法给插件，用于注入不同类型的自定义构建行为：

tap：可以注册同步钩子和异步钩子
tapAsync：回调方式注册异步钩子
tapPromise：Promise 方式注册异步钩子

2.3 Plugin 构建对象

2.3.1 Compiler

compiler 对象中保存着完整的 Webpack 环境配置，每次启动 webpack 构建时它都是一个独一无二，仅仅会创建一次的对象。

这个对象会在首次启动 Webpack 时创建，可以通过 compiler 对象上访问到 Webapck 的主环境配置，如 loader 、 plugin等配置信息。

它有以下主要属性：

compiler.options 可以访问本次启动 webpack 时候所有的配置文件，包括但不限于 loaders 、entry 、output 、plugin 等等完整配置信息
compiler.inputFileSystem 和 compiler.outputFileSystem 可以进行文件操作，相当于 Nodejs 中 fs
compiler.hooks 可以注册 tapable 的不同种类 Hook，从而可以在 compiler 生命周期中植入不同的逻辑

compiler hooks 文档：https://www.webpackjs.com/api/compiler-hooks/

2.3.2 Compilation

compilation 对象代表一次资源的构建，compilation 实例能够访问所有的模块和它们的依赖。

一个 compilation 对象会对构建依赖图中所有模块，进行编译。在编译阶段，模块会被加载(load)、封存(seal)、优化(optimize)、分块(chunk)、哈希(hash)和重新创建(restore)

它有以下主要属性：

compilation.modules ：可以访问所有模块，打包的每一个文件都是一个模块。
compilation.chunks：chunk 即是多个 modules 组成而来的一个代码块。入口文件引入的资源组成一个 chunk，通过代码分割的模块又是另外的 chunk
compilation.assets：可以访问本次打包生成所有文件的结果。
compilation.hooks：可以注册 tapable 的不同种类 Hook，用于在 compilation 编译模块阶段进行逻辑添加以及修改

compilation hooks 文档：https://www.webpackjs.com/api/compilation-hooks/

2.3.4 生命周期简图

在这里插入图片描述

3. 开发插件步骤

先编写一个最简单的插件test-plugin来了解plugin的开发步骤。

plugins/test-plugin.js

/*
  1. webpack加载webpack.config.js中所有配置，此时就会new TestPlugin(), 执行插件的constructor
  2. webpack创建compiler对象
  3. 遍历所有plugins中插件，调用插件的apply方法
  4. 执行剩下编译流程（触发各个hooks事件）
*/
class TestPlugin {
    
    
    
  constructor() {
    
    
    console.log("TestPlugin constructor()");
  }
    
  apply(compiler) {
    
    
    console.log("TestPlugin apply()");
  }
}

module.exports = TestPlugin;

class TestPlugin {
    
    
    
  constructor() {
    
    
    console.log("TestPlugin constructor()");
  }

  apply(compiler) {
    
    
    console.log("TestPlugin apply()");
    // compile hook 是 SyncHook, 也就是同步钩子, 只能用tap注册
    compiler.hooks.compile.tap("TestPlugin", (compilationParams) => {
    
    
      console.log("compiler.compile()");
    });

    // make 是 AsyncParallelHook, 也就是异步并行钩子, 特点就是异步任务同时执行
    // 可以使用 tap、tapAsync、tapPromise 注册
    // 如果使用tap注册的话，进行异步操作是不会等待异步操作执行完成的。
    compiler.hooks.make.tap("TestPlugin", (compilation) => {
    
    
      setTimeout(() => {
    
    
        console.log("compiler.make() 111");
      }, 2000);
    });

    // 使用tapAsync、tapPromise注册，进行异步操作会等异步操作做完再继续往下执行
    compiler.hooks.make.tapAsync("TestPlugin", (compilation, callback) => {
    
    
      setTimeout(() => {
    
    
        console.log("compiler.make() 222");
        // 必须调用
        callback();
      }, 1000);
    });

    compiler.hooks.make.tapPromise("TestPlugin", (compilation) => {
    
    
      console.log("compiler.make() 333");
      // 必须返回promise
      return new Promise((resolve) => {
    
    
        resolve();
      });
    });

    // emit 是异步串行钩子，特点就是异步任务顺序执行
    compiler.hooks.emit.tapAsync("TestPlugin", (compilation, callback) => {
    
    
      setTimeout(() => {
    
    
        console.log("compiler.emit() 111");
        callback();
      }, 3000);
    });

    compiler.hooks.emit.tapAsync("TestPlugin", (compilation, callback) => {
    
    
      setTimeout(() => {
    
    
        console.log("compiler.emit() 222");
        callback();
      }, 2000);
    });

    compiler.hooks.emit.tapAsync("TestPlugin", (compilation, callback) => {
    
    
      setTimeout(() => {
    
    
        console.log("compiler.emit() 333");
        callback();
      }, 1000);
    });
  }
}

module.exports = TestPlugin;

在webpack.config.js配置文件中，引用test-plugin.js

const TestPlugin = require('./plugins/test-plugin')

plugins: [
    new TestPlugin(),
],

编译结果：npx webpack

在这里插入图片描述

启动调试

通过调试查看 compiler 和 compilation 对象数据情况

package.json 配置指令

{
  "name": "webpack_demo",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "debug": "node --inspect-brk ./node_modules/webpack-cli/bin/cli.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0"
  },
  "dependencies": {
    "html-webpack-plugin": "^5.5.0"
  }
}

运行指令

npm run debug

此时控制台输出以下内容：

在这里插入图片描述

打开 Chrome 浏览器，F12 打开浏览器调试控制台，此时控制台会显示一个绿色的图标

在这里插入图片描述

点击绿色的图标进入调试模式。在需要调试代码处用 debugger 打断点，代码就会停止运行，从而调试查看数据情况。

在这里插入图片描述

4. 自定义插件

4.1 BannerWebpackPlugin

需求：给打包输出文件添加注释

需要打包输出前添加注释：需要使用 compiler.hooks.emit 钩子, 它是打包输出前触发
如何获取打包输出的资源？compilation.assets 可以获取所有即将输出的资源文件

class BannerWebpackPlugin {
    
    
  constructor(options = {
     
     }) {
    
    
    this.options = options;
  }

  apply(compiler) {
    
    
    // 在资源输出之前触发
    compiler.hooks.emit.tap("BannerWebpackPlugin", (compilation) => {
    
    
      // debugger;
      const extensions = ["css", "js"];
      // 1. 获取即将输出的资源文件：compilation.assets
      // 2. 过滤只保留js和css资源
      const assets = Object.keys(compilation.assets).filter((assetPath) => {
    
    
        // 将文件名切割 ['xxxx', 'js'] ['xxxx', 'css']
        const splitted = assetPath.split(".");
        // 获取最后一个文件扩展名
        const extension = splitted[splitted.length - 1];
        // 判断是否保护
        return extensions.includes(extension);
      });

      const prefix = `/*
                        * Author: ${
      
      this.options.author}
                        */
                        `;
      // 3. 遍历剩下资源添加上注释
      // console.log(assets);
      assets.forEach((asset) => {
    
    
        // 获取原来内容
        const source = compilation.assets[asset].source();
        // 拼接上注释
        const content = prefix + source;

        // 修改资源
        compilation.assets[asset] = {
    
    
          // 最终资源输出时，调用source方法，source方法的返回值就是资源的具体内容
          source() {
    
    
            return content;
          },
          // 资源大小
          size() {
    
    
            return content.length;
          },
        };
      });
    });
  }
}

module.exports = BannerWebpackPlugin;

4.2 CleanWebpackPlugin

需求：在 webpack 打包输出前将上次打包内容清空

如何在打包输出前执行？需要使用 compiler.hooks.emit 钩子, 它是打包输出前触发
如何清空上次打包内容？
- 获取打包输出目录：通过 compiler 对象
- 通过文件操作清空内容：通过 compiler.outputFileSystem 操作文件

class CleanWebpackPlugin {
    
    
  apply(compiler) {
    
    
    // 获取打包输出的目录
    const outputPath = compiler.options.output.path;
    const fs = compiler.outputFileSystem;
    // 注册钩子：在打包输出之前 emit
    compiler.hooks.emit.tap("CleanWebpackPlugin", (compilation) => {
    
    
      // 通过fs删除打包输出的目录下的所有文件
      this.removeFiles(fs, outputPath);
    });
  }

  removeFiles(fs, filepath) {
    
    
    // 想要删除打包输出目录下所有资源，需要先将目录下的资源删除，才能删除这个目录
    // 1. 读取当前目录下所有资源
    const files = fs.readdirSync(filepath);
    // console.log(files); // [ 'images', 'index.html', 'js' ]
    // 2. 遍历一个个删除
    files.forEach((file) => {
    
    
      // 2.1 遍历所有文件，判断是文件夹还是文件
      const path = `${
      
      filepath}/${
      
      file}`;
      const fileStat = fs.statSync(path);
      // console.log(fileStat);
      if (fileStat.isDirectory()) {
    
    
        // 2.2 是文件夹，就得删除下面所有文件，才能删除文件夹
        this.removeFiles(fs, path);
      } else {
    
    
        // 2.3 是文件，直接删除
        fs.unlinkSync(path);
      }
    });
  }
}

module.exports = CleanWebpackPlugin;

4.3 AnalyzeWebpackPlugin

需求：分析 webpack 打包资源大小，并输出分析文件。

compiler.hooks.emit，它是在打包输出前触发，我们需要分析资源大小同时添加上分析后的 md 文件

// plugins/analyze-webpack-plugin.js
class AnalyzeWebpackPlugin {
    
    
  apply(compiler) {
    
    
    // emit是异步串行钩子
    compiler.hooks.emit.tap("AnalyzeWebpackPlugin", (compilation) => {
    
    
      // Object.entries将对象变成二维数组。二维数组中第一项值是key，第二项值是value
      const assets = Object.entries(compilation.assets);

      let source = "# 分析打包资源大小 \n| 名称 | 大小 |\n| --- | --- |";

      assets.forEach(([filename, file]) => {
    
    
        source += `\n| ${
      
      filename} | ${
      
      file.size()} |`;
      });

      // 添加资源
      compilation.assets["analyze.md"] = {
    
    
        source() {
    
    
          return source;
        },
        size() {
    
    
          return source.length;
        },
      };
    });
  }
}

module.exports = AnalyzeWebpackPlugin;

Webpack之Plugin原理及自定义Plugin

1. Plugin 工作原理

2. Webpack 内部的钩子

2.1 钩子

2.2 Tapable

2.3 Plugin 构建对象

2.3.1 Compiler

2.3.2 Compilation

2.3.4 生命周期简图

3. 开发插件步骤

4. 自定义插件

4.1 BannerWebpackPlugin

4.2 CleanWebpackPlugin

4.3 AnalyzeWebpackPlugin

猜你喜欢