Webpack 插件开发

Webpack 插件开发是前端工程化中非常关键的能力，以下是系统化的知识总结，帮助我们全面掌握这一技术：

一、Webpack 插件基础概念

1. 插件 VS Loader

   • Loader：处理单个文件（转换、编译）
   • 插件：介入打包全流程（资源处理、优化、环境注入等）

2. 核心机制

   • Tapable：Webpack 的发布订阅系统
   • Compiler：全局编译器实例（整个构建生命周期）
   • Compilation：单次编译过程对象（模块依赖图、资源生成）

二、插件开发核心流程

1. 基本结构

class MyPlugin {apply(compiler) {compiler.hooks.特定钩子.tap('PluginName', (params) => {// 插件逻辑});}
}

2. 生命周期钩子（关键示例）

   • environment：环境准备阶段
   • compile：编译开始
   • emit：生成资源前最后修改机会
   • afterEmit：资源已写入磁盘
   • done：构建完成

3. 参数传递

new MyPlugin({ options: true })
// 插件内通过 this.options 访问

三、高级插件开发技巧