plugin 可以看作是對(duì) webpack 功能的一個(gè)擴(kuò)展
比如：當(dāng) webpack 生成文件時(shí)，順便多生成一個(gè)說明描述文件
再比如：當(dāng) webpack 編譯啟動(dòng)時(shí)鞍陨，控制臺(tái)輸出一句話 表示 webpack 啟動(dòng)了
就是，當(dāng) xxx 的時(shí)候厌处，我們要做 xxx 事情的時(shí)候弛秋，就需要 plugin
如圖：
紅點(diǎn)可以看作是一個(gè)個(gè)事件觸發(fā)點(diǎn)驱入， 這些事件可以對(duì) plugin 進(jìn)行監(jiān)聽
plugin 本質(zhì)是一個(gè)帶有 apply 方法的對(duì)象
var plugin = {
apply: function(compiler) {
// 在這里注冊(cè)事件，類似于 window.onload
}
}
通常吊骤，我們將該對(duì)象寫成構(gòu)造函數(shù)的模式
class MyPlugin {
apply(compiler) {
// 在這里注冊(cè)事件缎岗，類似于 window.onload
}
}
var plugin = new MyPlugin();
要將插件應(yīng)用到 webpack，需要把插件對(duì)象配置到 webpack 的 plugins 數(shù)組中
var MyPlugin = require("./plugins/MyPlugin");
module.exports = {
plugins: [
new MyPlugin();
]
}
介紹下 plugin 的 apply 方法的 compiler 參數(shù)：
compiler 是一個(gè)對(duì)象白粉，是在初始化階段構(gòu)建的传泊，整個(gè) webpack 打包期間只有一個(gè) compiler 對(duì)象
后續(xù)完成打包工作的事 compiler 對(duì)象內(nèi)部創(chuàng)建的 compilation
apply 方法會(huì)在創(chuàng)建好 compiler 對(duì)象后調(diào)用鼠渺，并向方法傳入一個(gè) compiler 對(duì)象
注意：在整個(gè)構(gòu)建過程中 compiler 對(duì)象只會(huì)創(chuàng)建一次，所以 plugin 的 apply 方法也只會(huì)被調(diào)用一次
compiler 對(duì)象提供了大量的鉤子函數(shù)（hooks眷细，可以理解為事件）拦盹，plugin 的開發(fā)者可以注冊(cè)這些鉤子函數(shù)
class MyPlugin{
apply(compiler){
compiler.hooks.事件名稱.事件類型(name, function(compilation){
//事件處理函數(shù)
})
}
}
- 事件名稱：即要監(jiān)聽的事件名，即鉤子名溪椎，所有的鉤子：https://www.webpackjs.com/api/compiler-hooks
-
事件類型：這一部分使用的是 Tapable API普舆，這個(gè)小型的庫是一個(gè)專門用于鉤子函數(shù)監(jiān)聽的庫
-
tap：注冊(cè)一個(gè)同步的鉤子函數(shù)，函數(shù)運(yùn)行完畢則表示事件處理結(jié)束 -
tapAsync：注冊(cè)一個(gè)基于回調(diào)的異步的鉤子函數(shù)校读，函數(shù)通過調(diào)用一個(gè)回調(diào)表示事件處理結(jié)束 -
tapPromise：注冊(cè)一個(gè)基于 Promise 的異步的鉤子函數(shù)沼侣，函數(shù)通過返回的 Promise 進(jìn)入已決狀態(tài)表示事件處理結(jié)束
-
- 處理函數(shù)：處理函數(shù)有一個(gè)事件參數(shù) compilation
module.exports = class MyPlugin {
apply(compiler) {
// 注冊(cè)事件
compiler.hooks.done.tap("MyPlugin-done", function(compilation) {
// 事件處理函數(shù)
console.log("編譯完成");
})
}
}
