webpack之旅: 深入理解Plugin
class CopyrightWebpackPlugin {
constructor(options){
this.name = options.name || ""
}
}
**注： 我们这里定义了一个CopyrightWebpackPlugin的类，在类的构造函数中可以接受到一个options参数，这个参数就是在使用这个插件是传递进来的配置参数项， 我们拟传递一个name值用于加到文件的末位
3. 现在Plugin的关键来了： 我们说可以将plugin理解为webpack打包的一些生命周期，那么它是如何在webpack打包的某一个时刻去进行运行的呢？现在我就来揭晓这个答案：在plugin插件类中需要去执行一个apply函数，该函数可以接受到一个compiler参数，该参数表示的是一个webpack打包编译过程中的编译对象，当我们需要在webpack打包的某一个时刻去运行这个plugin时我们就可以使用这个编译对象上的compiler.hooks，它表示的是webpack执行中的一些钩子，里面就包含了webpack执行打包的某些时刻。此时我们就可以在这些时刻去对webpack的打包做一些事情。
class CopyrightWebpackPlugin {
constructor(options){
this.name = options.name || ""
}
apply(compiler){
compiler.hooks.compile.tap("CopyrightWebpackPlugin", (compiler) => {
console.log("compile")
})
}
}
**注： 这里我们使用了一个tap()方法，他表示的是使用的是同步执行的钩子，而我们需要在plugin中执行异步的操作时，可以使用的就是tapAsync()方法。tap()方法的参数compilation表示的是此次打包的对象。
4. plugin中执行异步的操作：我们上面说到的comilation参数是为webpack打包的一个对象，此次打包的一些内容我们可以在compilation.assets中获取到，当然我们需要往打包的文件中加入一些内容我们也可以直接往compilation.assets中去加入内容即可, 当我们使用tapAsync()这个异步的钩子执行异步操作时，tapAsync()比tap()函数多一个callback参数，该参数是一个函数，并且我们需要在异步的操作执行结束后手动的调用一下这个函数，它用于告知webpack异步的操做什么时候执行结束。
class CopyrightWebpackPlugin {
constructor(options){
this.name = options.name || ""
}
apply(compiler){
compiler.hooks.compile.tap("CopyrightWebpackPlugin", (compiler) => {
console.log("compile")
})
}
const self = this
compiler.hooks.emit.tapAsync("CopyrightWebpackPlugin", (compilation) => {
compilation.assets["bundle.js"] = {
source: function(){
return `copyright by ${self.name}`,
size: function(){
return 50
}
}
}
})
}
**注：我们在这里使用compilation.assets对bundle.js文间进行处理，此时我们它赋值了一个对象，source参数表示我们将要写入到文件中的内容，size属性表示的是写入文件的大小
好了，到这里我们基本的关于plugin的底层的大致东西就给大家说了一个大概，当然plugin的实现还有很多的内容，像compiler参数，compilation参数上也还有很多的属性方法，这些就需要大家去官方文档上看看了，但是它具体是怎么处理webpack打包文件的我想流程大家应该还是有个概念了吧。最后这里我还是为大家附上一个官网关于plugin Api的地址，大家可以去产看哦~~~~
Plugin API官网地址
作者：一树梨花
