一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第24天，点击查看活动详情。
前面我们说到了一些loader以及入口等，这一章我们将一起来看下plugins
简介
前面loader我们已经说到了在某种程度上plugins是一种更强大的loader。我们都知道loader是用来转换文件格式的。转换成webpack能识别的文件。但是plugins在转换的基础上会有一些更加强大的功能。例如：
- 生成文件的时候需要生成额外的描述文件。
- webpack编译过程动态输出所需要的信息
因此我们可以看出，其实
plugins是一个自定义webpack构建过程的配置。这这个配置中，我们可以借助webpack提供的各种钩子，来在构建过程中处理我们想要处理的东西。这一点是loader所不具备的。
本质
plugins本质是一个具有apply属性的js对象。其被webpack的compiler调用。我们可以在整个编译过程中获取compiler对象。其本质为：
const myPlugin = {
apply:function(compiler) {
}
}
或者
class MyPlugin {
apply(compiler){
}
}
let myPlugin = new MyPlugin();
webpack构建开始的时候，会先创建compiler对象。此对象是在初始化的时候创建的。整个webpack的构建生命周期只有一个compiler对象。然后通过apply函数调用此对象
compiler
在初始化的时候创建，会创建一个compilation实例。其作用是以便注册和调用插件。其本质是监听文件系统。在文件修改，或者编译的时候。会自动触发其内部封装的监听方法。然后我们可以通过其提供的钩子来获取编译过程。外部需要获取钩子的时候可以通过以下方式来获取：
compiler.hooks.事件名称.事件类型(plugin名称,compilation=>{
})
其中事件类型有3种，分别是：
- tap: 注册一个同步的钩子函数，函数运行完毕则表示事件处理结束
- tapAsync: 注册一个基于回调的异步钩子函数。当调用回调的时候则表示事件处理结束
- tapPromise: 注册一个基于Promise的异步钩子，当进入Promise则表示事件处理结束 例如
class MyPlugin {
construct(name){
this.name = name;
}
apply(compiler) {
compiler.hooks.run.tap(this.name,compilation =>{
console.log('构建开始')
})
}
}
compiler具有哪些事件，详见compiler 钩子.这里就不一一列举了。后期会有一篇自定义plugins,在里面会一一举例。
用法
通过上面我们可以看出，其实插件就是一个实例，一个对象的实例，同时此实例支持传入一些参数，因此我们需要通过new来实例化一个实例。因此常用方法为：
module.exports = {
plugins:[
new MyPlugin(参数)
]
}
至此我们关于plugins介绍结束，后面我们将看看如何自定义一个plugins,敬请期待。
