跳至主要內容

构建工具-webpack插件开发1-入门

作为当代前端工程师，以webpack为首的构建工具基本都用过。使用时稍复杂点儿的项目都要搭配各式各样的插件来达到目的。比如最常见的html-webpack-plugin生成一个空 HTML 文件。

如果现在的插件不能满足我们的业务需求，就需要自己定制了。

本文旨在通过构建一个极简单的webpack插件，让大家可以快速体验下webpack插件的开发流程、架构模式。

以下是实现一个简单插件：在构建完成后生成一个markdown文件，文件里会记录构建时的日期。

1. 创建插件类

// 业务项目根目录新建文件my-webpack-plugin.js

class MyWebpackPlugin {
  // 构造函数（可选，用于接收配置参数）
  constructor(options = {}) {
    this.options = options;
  }

  // 必须的 apply 方法
  apply(compiler) {
    // 挂载到 Webpack 的钩子
  }
}

2. 选择 Webpack 生命周期钩子

Webpack 提供了上百个钩子，选择适合的时机插入逻辑。

示例：使用 emit 钩子（生成资源到输出目录前触发）

// 在【已经创建】的插件类里添加
apply(compiler) {
  compiler.hooks.emit.tap('MyWebpackPlugin', (compilation) => {
    // 你的逻辑
  });
}

3. 编写插件逻辑

以下示例会在输出目录生成一个 构建日期记录.md 文件：

// 在【已经创建】的插件类里添加
apply(compiler) {
  compiler.hooks.emit.tap('MyWebpackPlugin', (compilation) => {
    // 1. 添加文件内容
    let curDate = new Date();
    const content = this.options.content || `本次构建日期为：${curDate.getFullYear()}-${curDate.getMonth() + 1}-${curDate.getDay()}`;

    // 2. 将内容添加到 Webpack 的输出资源中
    compilation.assets['构建日期记录.md'] = {
      source: () => content, // 文件内容
      size: () => content.length // 文件大小（必需）
    };
  });
}

4. 在 Webpack 配置中使用插件

// webpack.config.js
const MyWebpackPlugin = require('./my-webpack-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    new MyWebpackPlugin({
      content: "测试文本", // 自定义参数
      filename: "自定义文件名.md" // 可扩展支持文件名配置
    })
  ]
};

完整代码示例

// my-webpack-plugin.js
class MyWebpackPlugin {
  constructor(options = {}) {
    this.options = {
      content: "", // 自定义参数
      filename: "" // 可扩展支持文件名配置
      ...options 
    };
  }

  apply(compiler) {
    compiler.hooks.emit.tap('MyWebpackPlugin', (compilation) => {
    // 1. 添加文件内容
    let curDate = new Date();
    const content = this.options.content || `本次构建日期为：${curDate.getFullYear()}-${curDate.getMonth() + 1}-${curDate.getDay()}`;

    // 2. 将内容添加到 Webpack 的输出资源中
    compilation.assets['构建日期记录.md'] = {
      source: () => content, // 文件内容
      size: () => content.length // 文件大小（必需）
    };
    });
  }
}

module.exports = MyWebpackPlugin;

Webpack插件核心机制

  1. ‌Compiler 对象‌：Webpack 的编译器实例，提供全局钩子（如 run, compile, emit, done）。
  2. ‌Compilation 对象‌：单次编译的上下文，包含模块、依赖、资源等信息。
  3. ‌Tapable 钩子系统‌：通过 .tap 注册同步逻辑，.tapAsync 处理异步逻辑。

常用钩子参考

钩子名称触发时机
compile开始编译前
emit生成资源到输出目录前
done编译完成后
afterCompile完成编译和封存后

调试插件

运行构建命令后，检查输出目录是否生成了预期文件：

npx webpack --config webpack.config.js

通过以上步骤，你实现了一个简单但完整的 Webpack 插件。实际开发中，可以根据需求访问更多编译信息（如 compilation.modules 或 compilation.chunks）实现复杂功能。

贡献者: king,guo