plugin 概念

plugin相比于loader，loader用于转换某种类型的模块，而plugin则是可以执行更加广泛的任务，拥有更强的构建能力，包括：打包优化，资源管理，注入环境变量等。
webpack在生命周期运行时，plugin可以监听其广播出来的时间，并通过webpack提供的API执行任务，改变扩展输出结果

plugin 构成

• 插件本身的构造函数
• 其原型上定义apply方法
• 一个webpack本身的事件钩子
• 操作webpack内部实例特定数据
• 实现功能后调用webpack提供的回调函数

下面是插件的大致结构

class myPlugin{
   
  // 获取用户实例化过程中传入的参数
  constructor(options){
   
  }
  
  // Webpack 会调用myPlugin 实例的 apply 方法给插件实例传入 compiler 对象
  apply(compiler) {
   
    // 在emit阶段插入钩子函数，用于特定时机处理额外的逻辑；
    compiler.hooks.emit.tap('myPlugin', (compilation) => {
   
      // 在功能流程完成后可以调用 webpack 提供的回调函数；
    });
    // 如果事件是异步的，会带两个参数，第二个参数为回调函数，在插件处理完任务时需要调用回调函数通知webpack，才会进入下一个处理流程。
    compiler.plugin('emit',function(compilation, callback) {
   
      // 支持处理逻辑
      // 处理完毕后执行 callback 以通知 Webpack 
      // 如果不执行 callback，运行流程将会一直卡在这不往下执行 
      callback();
    });
  }
}