Skip to main content

Plugin

Tapable​

增强版的发布订阅模式

plugin​

在 Webpack 构建过程中会触发部分钩子函数，并传入上下文参数（例如 compilation），插件可以通过调用上下文接口、修改上下文状态等方式篡改构建逻辑

函数签名：

class MyPlugin {
  apply(compiler) {
    compiler.hooks.thisCompilation.tap("MyPlugin", (compilation) => {
      compilation.addModule(/* ... */);
    });
  }
}

部分 Hook

  • compiler.hooks.compilation。Webpack 刚启动完，创建出 compilation 对象后触发；参数是当前编译的 compilation 对象
  • compiler.hooks.make。正式开始构建时触发；参数是当前编译的 compilation 对象
  • compilation.hooks.optimizeChunks。 seal 函数中，chunk 集合构建完毕后触发；参数是 chunks 与 chunkGroups
  • compiler.hooks.done。编译完成后触发；参数是 stats 对象，包含编译过程中的各类统计信息

常见 plugins

  • HotModuleReplacementPlugin。注入 HMR runtime
  • imagemin-webpack-plugin。图片压缩
  • eslint-webpack-plugin
    • 使用多个 Hook，在不同时间点执行 Lint 检查
    • 复用 Webpack 内置的 error/warn 方法提交代码风格问题
  • DefinePlugin

自定义 plugin【WIP】​

插件架构​

  • 接口：需要提供一套逻辑接入方法，让开发者能够将代码插入特定环节，变更原始逻辑
  • 输入：如何将上下文信息高效传导给插件
  • 输出：插件内部通过何种方式影响整套运行体系