webpack-plugin 开发起步

1. Plugin的基本结构

class MyPlugin {
  // 构造函数，接收配置参数
  constructor(options = {}) {
    this.options = options;
  }

  // 必须的apply方法，webpack会调用这个方法
  apply(compiler) {
    // 在这里注册hooks
  }
}

module.exports = MyPlugin;

2. 最简单的Plugin示例

class SimplePlugin {
  apply(compiler) {
    // 在webpack编译完成后执行
    compiler.hooks.done.tap('SimplePlugin', (stats) => {
      console.log('编译完成！');
    });
  }
}

3. 常用的Plugin开发模式

class MyPlugin {
  constructor(options = {}) {
    // 1. 接收配置
    this.options = options;
  }

  apply(compiler) {
    // 2. 注册hooks
    compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
      // 3. 处理资源
      compilation.hooks.optimizeChunkAssets.tap('MyPlugin', (chunks) => {
        // 4. 实现具体功能
      });
    });
  }
}

4. 实际开发步骤

// 1. 创建plugin文件
// my-plugin.js
class MyPlugin {
  constructor(options = {}) {
    this.options = options;
  }

  apply(compiler) {
    // 2. 选择hook
    compiler.hooks.emit.tapAsync('MyPlugin', (compilation, callback) => {
      // 3. 获取资源
      const assets = compilation.assets;
      
      // 4. 处理资源
      for (const filename in assets) {
        if (filename.endsWith('.js')) {
          // 5. 修改资源
          const source = assets[filename].source();
          const newSource = `// 添加注释\n${source}`;
          
          // 6. 更新资源
          assets[filename] = {
            source: () => newSource,
            size: () => newSource.length
          };
        }
      }
      
      // 7. 完成处理
      callback();
    });
  }
}

module.exports = MyPlugin;

5. 在webpack配置中使用

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

module.exports = {
  // ...其他配置
  plugins: [
    new MyPlugin({
      // 配置选项
    })
  ]
};

6. 常用的开发场景

// 1. 生成新文件
class GenerateFilePlugin {
  apply(compiler) {
    compiler.hooks.emit.tapAsync('GenerateFilePlugin', (compilation, callback) => {
      // 生成新文件
      compilation.assets['new-file.js'] = {
        source: () => 'console.log("新文件")',
        size: () => 25
      };
      callback();
    });
  }
}

// 2. 修改现有文件
class ModifyFilePlugin {
  apply(compiler) {
    compiler.hooks.emit.tapAsync('ModifyFilePlugin', (compilation, callback) => {
      // 修改文件
      const source = compilation.assets['main.js'].source();
      compilation.assets['main.js'] = {
        source: () => `// 修改后的内容\n${source}`,
        size: () => source.length + 20
      };
      callback();
    });
  }
}

// 3. 添加自定义功能
class CustomFeaturePlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap('CustomFeaturePlugin', (compilation) => {
      // 添加自定义功能
      compilation.hooks.optimizeChunkAssets.tap('CustomFeaturePlugin', (chunks) => {
        // 实现功能
      });
    });
  }
}

7. 开发建议

• 选择合适的hook时机
• 注意异步操作的处理
• 做好错误处理
• 保持代码简洁
• 添加适当的注释
• 考虑性能影响

8. 调试技巧

class DebugPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap('DebugPlugin', (compilation) => {
      // 添加调试信息
      console.log('编译开始');
      
      // 监听错误
      compilation.hooks.failedModule.tap('DebugPlugin', (module, error) => {
        console.error('模块编译失败:', module.resource);
        console.error(error);
      });
    });
  }
}

9. 最佳实践

• 使用TypeScript增加类型安全
• 添加单元测试
• 提供详细的文档
• 考虑兼容性
• 遵循webpack插件规范

10. 发布插件

• 创建package.json
• 添加必要的依赖
• 配置入口文件
• 添加README文档
• 发布到npm

总结

好的plugin应该是：

1. 功能单一
2. 配置灵活
3. 性能良好
4. 易于使用
5. 文档完善