# 實現Plugin * 創建：webpack在其內部組件創建大量鉤子 * 注冊；插件將自己的方法注冊到對應的鉤子，交給wbepack * 調用：webpack編譯過程，適時地觸發相應的鉤子 ## 流程 * 初始：啟動創建 讀取與合并參數，加載plugin，實例化compiler * 編譯：從entry出發，針對每一個module調用loader 翻譯文件內容并找到module依賴 進行編譯處理 * 輸出：將編譯后的module組合成chunk 將chunk轉化為文件 輸出到文件系統 ~~~ // @file: plugins/myplugin.js const pluginName = 'MyPlugin' // tapable是webpack自帶的package，是webpack的核心實現 // 不需要單獨install，可以在安裝過webpack的項目里直接require // 拿到一個同步hook類 const { SyncHook } = require("tapable"); class MyPlugin { // 傳入webpack config中的plugin配置參數 constructor(options) { // { test: 1 } console.log('@plugin constructor', options); } apply(compiler) { console.log('@plugin apply'); // 實例化自定義事件 compiler.hooks.myPlugin = new SyncHook(['data']) compiler.hooks.environment.tap(pluginName, () => { //廣播自定義事件 compiler.hooks.myPlugin.call("It's my plugin.") console.log('@environment'); }); // compiler.hooks.compilation.tap(pluginName, (compilation) => { // 你也可以在compilation上掛載hook // compilation.hooks.myPlugin = new SyncHook(['data']) // compilation.hooks.myPlugin.call("It's my plugin.") // }); } } module.exports = MyPlugin ~~~