业务项目中使用自定义Webpack 插件

在前端项目中通过 require 方式直接使用自定义的 Webpack 插件非常常见，尤其是在开发阶段或者插件尚未发布到 npm 仓库时。

Webpack 插件本质上是 JavaScript 模块，通常导出一个类（class），这个类中包含一个 apply 方法。apply 方法会在 Webpack 编译器初始化时被调用，并接收 compiler 对象作为参数，通过 compiler 对象的 hooks 来注册事件，从而在 Webpack 构建生命周期的不同阶段执行自定义逻辑。

以下是具体步骤：

1. 编写你的自定义 Webpack 插件

首先，确保你的自定义 Webpack 插件文件结构正确。一个简单的插件通常是这样的：

my-webpack-plugin.js (或者你喜欢的任何文件名)

// my-webpack-plugin.js
class MyWebpackPlugin {
  constructor(options) {
    this.options = options || {};
    console.log('MyWebpackPlugin initialized with options:', this.options);
  }

  apply(compiler) {
    // Webpack 编译过程中的一个 hook
    // 'emit' hook 在生成资源并输出到 output 目录之前执行
    compiler.hooks.emit.tapAsync(
      'MyWebpackPlugin', // 插件名称，用于调试和错误报告
      (compilation, callback) => {
        console.log('This is an example plugin!');
        console.log('Here is the compilation object:', compilation.assets);

        // 遍历所有生成的资源
        for (const assetName in compilation.assets) {
          if (compilation.assets.hasOwnProperty(assetName)) {
            console.log(`Asset: ${assetName}`);
          }
        }

        // 可以在这里修改或添加资源
        // 例如，添加一个新文件
        const content = 'Hello from MyWebpackPlugin!';
        compilation.assets['my-custom-file.txt'] = {
          source: () => content,
          size: () => content.length,
        };

        callback(); // 必须调用 callback，表示异步操作完成
      }
    );

    // 另一个例子：在编译完成时执行
    compiler.hooks.done.tap('MyWebpackPlugin', (stats) => {
      console.log('Compilation is done!');
      // 可以访问 stats 对象获取编译结果的详细信息
    });
  }
}

module.exports = MyWebpackPlugin; // 导出这个类

2. 在业务项目的 webpack.config.js 中引入并使用

假设你的 my-webpack-plugin.js 文件放在业务项目的根目录或者一个你可以通过相对路径访问到的地方（例如 plugins/my-webpack-plugin.js）。

webpack.config.js

const path = require('path');
// 引入你的自定义插件
// 如果插件文件在项目根目录，可以直接这样引入
const MyWebpackPlugin = require('./my-webpack-plugin');
// 如果在子目录，例如 'plugins' 文件夹下
// const MyWebpackPlugin = require('./plugins/my-webpack-plugin');

module.exports = {
  mode: 'development', // 或者 'production'
  entry: './src/index.js', // 你的入口文件
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    // 实例化你的自定义插件，并传入配置选项（如果需要）
    new MyWebpackPlugin({
      customOption: 'Hello from config!',
    }),
    // 其他 Webpack 内置或第三方插件
    // new HtmlWebpackPlugin({ template: './src/index.html' }),
  ],
};

3. 运行 Webpack

保存文件后，像往常一样运行 Webpack 构建命令：

npx webpack
# 或者如果你在 package.json 中配置了脚本
# npm run build

当 Webpack 运行时，你会在控制台看到 MyWebpackPlugin 的输出，这表明你的自定义插件已经被成功加载和执行了。

关键点总结：

1. 插件导出 : 你的插件文件必须导出一个类（class），这个类包含 apply 方法。module.exports = MyWebpackPlugin; 12
2. apply 方法 : 这是 Webpack 插件的核心。它在 Webpack 编译器启动时被调用，并接收 compiler 对象作为参数。你可以通过 compiler.hooks 访问 Webpack 生命周期中的各种事件钩子。
3. require 路径 : 确保 webpack.config.js 中 require 你的插件文件的路径是正确的。可以是相对路径，也可以是绝对路径。
4. 实例化 : 在 webpack.config.js 的 plugins 数组中，你需要使用 new 关键字来实例化你的插件类，就像使用其他 Webpack 插件一样。你可以向构造函数传递配置选项。
5. 异步操作 : 如果你的插件在 apply 方法中执行异步操作（例如文件读写），你需要使用 tapAsync 或 tapPromise 钩子，并在异步操作完成后调用 callback() 或返回 Promise，以确保 Webpack 知道该操作已完成。

通过这种方式，你可以在不发布到 npm 的情况下，方便地在本地业务项目中使用和测试你的自定义 Webpack 插件。

---