使用
事件名称
事件类型

loader的功能定位是转换代码，而一些其他的操作难以使用loader完成，比如

当webpack生成文件时，顺便多生成一个说明描述文件
当weboack编译启动时，控制台输出一句话
…..

这种类似的功能需要嵌入到webpack的编译流程中，而这种事情的实现时依托plugin的

plugin的本质就是一个带有apply方法的对象

var plugin = {
    apply: function (compiler) {}
}

通常，习惯上，我们会将对象写成构造函数

class Plugin {
    apply (compiler) {}
}

var plugin = new Plugin();

使用

要将插件应用到webpack，需要把插件对象配置到webpack的plugins数组中：

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

apply函数的参数这里给个名字叫做compiler

compiler对象是在初始化阶段构建的，整个webpack打包期间只有一个

compiler对象，后续完成打包工作的是compiler对象内部创建的compilation

apply方法会在创建好compiler对象后调用，并向方法传入一个compiler对象

当使用watch检测文件变化的时候，当文件变化compiler不会重新运行，而是里面的compilation重新运行

compiler对象提供了大量的钩子函数，plugin的开发者可以注册这些钩子函数，参数webpack的编译和生成

你可以在apply函数中使用下面的代码注册钩子函数

class plugin{
    apply(compiler){
        compiler.hooks.事件名称.事件类型(name, function(compilation){
          // name主要用于调试，随便填
            // 事件处理函数
    })  
  }
}

事件名称

就是要监听的事件名，即钩子名，所有的钩子下面的文档链接
https://www.webpackjs.com/api/compiler-hooks/

事件类型

这部分使用的是Tapable API，这个小型的库是一个专门用于钩子函数监听的库
他提供一些事件类型：

tap: 注册一个同步的钩子函数，函数运行完毕则表示事件处理结束
tapAsync：注册一个基于回调的异步钩子函数，函数通过调用一个回调表示事件处理结束
tapPromise: 注册一个基于Promise的异步的钩子函数，函数通过返回的Promise进入已决状态表示事件处理结束

【webpack】plugin

使用

事件名称

事件类型