plugin

webpack plugin

1、plugin

webpack通过各种plugin实现各种功能，webpack结合tapable事件流实现了一些事件，plugin来new这些事件，然后把逻辑加入到webpack构建流程中。

插件没有像loader那样的独立运行的环境，但是可以伴随webpack的初始化到资源的输出的流程中都可以参与，它是更加强大的。

2、插件的基本结构

插件源码的基本结构代码如下

class MyPlugin{  // 插件的名称
/*
插件上的apply方法，
在调用插件的时候 new MyPlugin(), webpack是new了一下然后调用插件的apply方法,然后把compiler传给它，apply是必须要有的方法
*/ 
  apply(compiler){ 
    // 插件的hooks，webpack通过tapable实现的事件钩子
    compiler.hooks.done.tap('MyPlugin',(stats)=>{ 
      console.log('处理各种逻辑')
    })
  }
}
module.exports = MyPlugin;

插件的使用：

module.exports = {
  plugins: [new MyPlugin()]
}

3、plugin demo

创建’/plugins/my-plugin.js’

module.exports = class MyPlugin{
  constructor(options){
    this.options = options;
  }
  apply(compiler){
    console.log("插件执行成功");
  }
}

webpack.config.js引用

const MyPlugin = require('./plugins/my-plugin');

module.exports = {
  plugins: [
    new MyPlugin()
  ],
}

然后执行npx webpack，看控制台输出。

4、插件传参

我们可以通过new MyPlugin({a: 1),在这里传参，在构造函数里面接受。

5、插件的错误处理

参数校验阶段可以通过throw方式抛出。

throw new Error("Error Message")

处理中可以通过compilation对象的warnings / errors对象来接受

compilation.warnings.push('warning');

compilation.errors.push('error');

猫说