@(webpack)
6-3如何編寫一個Plugin
一嫉入、回顧Loader和Plugin
1允乐、Loader锣披、Plugin的區(qū)別
Loader：當我們在源代碼里引入其他格式的文件，幫助我們處理模塊茉帅；loader是函數(shù)
plugin：打包的時候糙申，在打包的某一時刻做處理肝劲；plugin是類
2、編寫一個簡單的Plugin
（稍微有些復雜郭宝，但是有必要學習，webpack源代碼有80%基于plugin編寫掷漱；plugin是webpack的靈魂粘室。）
Plugin核心機制：事件驅動、發(fā)布訂閱的設計模式卜范。代碼執(zhí)行是通過事件驅動的
初始化環(huán)境步驟：
（1）建一個文件夾衔统，npm init
（2）創(chuàng)建一個'src/index‘文件夾
（3）安裝webpack、webpack.cli海雪。編寫webpack.config.js 配置
目標： 當整個打包結束后锦爵，生成一個版權文件的插件
（4）創(chuàng)建一個plugins文件夾 copyright-webpack-plugin.js
// 基本寫法
class CopyRightWebpackPlugin {
constructor(){
console.log("我成功運行了")
}
apply(complier){}
}
module.exports = CopyRightWebpackPlugin;
（5）引入插件
（6）使用，實例化插件奥裸，（終于知道為什么plugin中總是要new了）
const path = require('path')
const CopyRightWebpackPlugin = require('./plugins/copyright-webpack-plugin')
module.exports={
mode:'development',
entry:{main:'./src/index.js'},
output:{
path:path.resolve(__dirname,'dist'),
filename:'[name].js'
},
plugins:[
// 終于知道為什么plugin中總是要`new`了,plugin是類险掀，需要實例化；可是為什么會想用類湾宙？
new CopyRightWebpackPlugin()
]
}
（7）引入成功運行結果
（8）在使用插件時可以傳入?yún)?shù)樟氢，傳給了constructor 的options
（9）.在結束時使永applyhooks 實現(xiàn)添加版權
明確概念理解：
hooks鉤子函數(shù)冈绊，作用類似react、vue 的生命周期函數(shù)埠啃，都是用來在某一時間做某些操作的函數(shù)
可以去查看官網(wǎng)死宣，有hooks的概念地址
apply 中接受了一個參數(shù)，compiler參數(shù)是webpack的實例碴开。這里存儲了打包配置和實例
compiler.hooks.emit.tapAsync('插件的名稱',(compilation,cb)=>{
cb（）
})
complation存放 跟這次打包相關的內容
class CopyRightWebpackPlugin {
constructor(ops){
console.log("我成功運行了",ops)
}
apply(complier){
// 同步
complier.hooks.compile.tap('CopyRightWebpackPlugin',
console.log('同步鉤子調用')
)
//異步
complier.hooks.emit.tapAsync('CopyRightWebpackPlugin',((compilation,cb)=>{
compilation.assets['copyright.txt']={
source:function(){
return 'copy by mtg'
},
size:function(){
return 11
}
}
cb(); //一定要回調毅该，這是一個異步函數(shù)，親測必須回調潦牛，估計是告訴他已經(jīng)完成眶掌，然后進入下一個步驟
}))
}
}
module.exports = CopyRightWebpackPlugin;
小tips
問：你是怎么知道complition中有assets的
答：寫插件的時候可以使用node
顯示使用，可以傳遞參數(shù)進入 如 inspect --inspect-brk 開啟調試工具罢绽，在第一行多個斷電
開啟node 后畏线，有個node圖片，點擊后就可以看到打包流程執(zhí)行過程
調試方法：
