【webpack核心】- 13、插件plugin - 监听编译中的事件，把功能嵌入到webpack的编译流程中

1、plugin 作用 – (监听编译中的事件，把功能嵌入到webpack的编译流程中)

• 加载器loader 和 插件plugin 都是扩展webpack的功能的
• loader的定位是转换代码，把一种格式的代码 转换成另一种格式的代码，eg: css 或者图片 没办法进行语法树分析，要转换成js代码
• 有一些其他的操作难以使用loader完成，比如如下需要把功能嵌入到webpack的编译流程中，而这种事情的实现是依托于plugin的
• plugin 作用 – 监听编译中的事件，把功能嵌入到webpack的编译流程中

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

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

• 如上简图中：在编译流程中的每一步，都会触发很多事件，这些事件需要有人来处理的，plugin就是来处理这些被触发的事件的；所以plugin 就是来监听事件的；
• 上图中的红点，可以认为是一部分事件的触发点，plugin 会监听这些事件点，当事件触发后，去处理事件；

2、plugin的写法 – plugin 如何监听事件的

plugin的本质是一个带有apply方法的对象，apply方法会在初始化阶段创建好compiler对象后调用/运行，并向方法传入一个compiler对象

在npx webpack 命令运行的时候，apply方法只会运行一次，

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

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

module.exports = class MyPlugin{     //导出一个插件
    apply(compiler){  //compiler是一个对象
		console.log('插件运行了')  //在webpack运行时执行
    }
}

关于compiler

compiler对象是在编译的时候 初始化阶段构建的，整个webpack打包期间只有一个compiler对象，后续完成打包工作的是compiler对象内部创建的compilation(具体的编译过程 和 输出 由compilation完成的)

问题：compiler 和 compilation 的区别？
答：

• compiler是打包初始化阶段产生的，
  compilation 是compiler 内部产生的，具体的编译过程 和 输出 由compilation完成的
• webpack 启动监听，监控文件的变化， 如果文件发生变化，保存后就重新打包，重新打包的时候，不会从初始化开始(因为初始化是分析配置文件，配置文件并没有变化),而是从编译阶段开始，重新创建一个compilation， 所以compilation可能由多个，而compiler 只有一个

module.exports = {
		mode:"development",
		watch:true,   //webpack 启动监听，监控文件的变化
}

关于 apply 方法

module.exports = class MyPlugin{     //导出一个插件
    apply(compiler){  //compiler是一个对象
		console.log('插件运行了')  //在webpack运行时执行
    }
}

• 在npx webpack 命令运行的时候，apply方法只会运行一次

• 所以如上写法：webpack打包的时候，apply方法里的console.log('插件运行了')只会运行打印一次

• apply方法会在初始化阶段创建好compiler对象后调用/运行，并向方法传入一个compiler对象

• 那么问题： 插件plugin 可以监听各种事件，那apply方法只运行一次，是怎么监听的？-- 我们在apply 方法里注册事件，类似window.onload

• compiler对象提供了大量的钩子函数（hooks，可以理解为事件），plugin的开发者可以注册这些钩子函数，参与webpack编译和生成。

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

module.exports = class MyPlugin{     //导出一个插件
    apply(compiler){  //compiler是一个对象,提供了大量的钩子函数
		//在这里注册事件,类似window.onload  $(function(){})
		 compiler.hooks.事件名称.事件类型(name, function(compilation){
            //事件处理函数
        })
    }
}

• 事件名称：
  即编译的过程中要监听的事件名，即钩子名，所有的钩子：具体钩子查看官网
• 事件类型：
  这一部分使用的是 Tapable API，这个小型的库是一个专门用于钩子函数监听的库。

---

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

---

• 处理函数：
  处理函数有一个事件参数compilation

3、plugin的配置

要将插件应用到webpack，需要在webpack.config.js中把插件对象配置到webpack的plugins数组中，如下：

var MyPlugin = require('./plugins/MyPlugin');   //1.引入插件

module.exports = {
    plugins:[
        new MyPlugin()    //2.实例化插件
    ]
}