Webpack学习——Plugin（插件）

仅作为学习记录，通过 apply 方法注册到钩子，在特定节点执行自定义逻辑，干预打包流程

一、原理

所有 Webpack 插件都必须是 一个类，且包含 apply 方法（Webpack 会自动调用这个方法），核心逻辑：

1. 插件被加载时，Webpack 传入 Compiler 实例（全局唯一）；
2. 插件在 apply 方法中，通过 Compiler.hooks.xxx.tap() 注册到指定钩子；
3. 当打包流程走到该钩子时，Webpack 执行插件注册的逻辑。

二、 自定义Plugin

写一个 "打印打包开始和结束" 的插件

1. 创建LogPlugin.js
   

// 插件必须是类，类名建议大写开头
class LogPlugin {
  // Webpack 会自动调用 apply 方法，传入 Compiler 实例
  apply(compiler) {
    // 1. 注册到 "compile" 钩子（开始编译时触发，同步钩子用 tap）
    compiler.hooks.compile.tap("LogPlugin", () => {
      console.log("打包开始啦！");
    });

    // 2. 注册到 "done" 钩子（打包完成时触发，同步钩子用 tap）
    compiler.hooks.done.tap("LogPlugin", (stats) => {
      // stats 是打包统计信息，包含打包耗时、模块数等
      const time = stats.endTime - stats.startTime;
      console.log(`打包完成！总耗时：${time}ms`);
    });
  }
}

// 导出插件，供 Webpack 配置使用
module.exports = LogPlugin;

1. 在 webpack.config.js 中使用插件
   
2. 执行 npm run build命令，就能在终端看到结果