plugins

plugin 可以看作是对 webpack 功能的一个扩展

比如：当 webpack 生成文件时，顺便多生成一个说明描述文件
再比如：当 webpack 编译启动时，控制台输出一句话 表示 webpack 启动了

就是，当 xxx 的时候，我们要做 xxx 事情的时候，就需要 plugin

如图：

红点可以看作是一个个事件触发点， 这些事件可以对 plugin 进行监听

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

var plugin = {
    apply: function(compiler) {
        // 在这里注册事件，类似于 window.onload
    }
}

通常，我们将该对象写成构造函数的模式

class MyPlugin {
    apply(compiler) {
        // 在这里注册事件，类似于 window.onload
    }
}
var plugin = new MyPlugin();

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

var MyPlugin = require("./plugins/MyPlugin");

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

介绍下 plugin 的 apply 方法的 compiler 参数：

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

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

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

注意：在整个构建过程中 compiler 对象只会创建一次，所以 plugin 的 apply 方法也只会被调用一次

compiler 对象提供了大量的钩子函数（hooks，可以理解为事件），plugin 的开发者可以注册这些钩子函数

class MyPlugin{
    apply(compiler){
        compiler.hooks.事件名称.事件类型(name, function(compilation){
            //事件处理函数
        })
    }
}

• 事件名称：即要监听的事件名，即钩子名，所有的钩子：https://www.webpackjs.com/api/compiler-hooks
• 事件类型：这一部分使用的是 Tapable API，这个小型的库是一个专门用于钩子函数监听的库
  • tap：注册一个同步的钩子函数，函数运行完毕则表示事件处理结束
  • tapAsync：注册一个基于回调的异步的钩子函数，函数通过调用一个回调表示事件处理结束
  • tapPromise：注册一个基于 Promise 的异步的钩子函数，函数通过返回的 Promise 进入已决状态表示事件处理结束
• 处理函数：处理函数有一个事件参数 compilation

module.exports = class MyPlugin {
    apply(compiler) {
        // 注册事件
        compiler.hooks.done.tap("MyPlugin-done", function(compilation) {
            // 事件处理函数
            console.log("编译完成");
        })
    }
}