Webpack的plugin

HuangBingQuan發表於2024-06-03
WebPlugin

plugin

loader的功能定位是轉換程式碼，而一些其他的操作難以使用loader完成，比如：

  • 當webpack生成檔案時，順便多生成一個說明描述檔案
  • 當webpack編譯啟動時，控制檯輸出一句話表示webpack啟動了
  • 當xxxx時，xxxx

這種類似的功能需要把功能嵌入到webpack的編譯流程中，而這種事情的實現是依託於plugin的

plugin的本質是一個帶有apply方法的物件**

var plugin = {
    apply: function(compiler){
        
    }
}

通常，習慣上，我們會將該物件寫成建構函式的模式

class MyPlugin{
    apply(compiler){

    }
}

var plugin = new MyPlugin();

要將外掛應用到webpack，需要把外掛物件配置到webpack的plugins陣列中，如下：

module.exports = {
    plugins:[
        new MyPlugin()
    ]
}

apply函式會在初始化階段，建立好Compiler物件後執行。

compiler物件是在初始化階段構建的，整個webpack打包期間只有一個compiler物件，後續完成打包工作的是compiler物件內部建立的compilation

apply方法會在建立好compiler物件後呼叫，並向方法傳入一個compiler物件

compiler物件提供了大量的鉤子函式（hooks，可以理解為事件），plugin的開發者可以註冊這些鉤子函式，參與webpack編譯和生成。

你可以在apply方法中使用下面的程式碼註冊鉤子函式:

class MyPlugin{
    apply(compiler){
        compiler.hooks.事件名稱.事件型別(name, function(compilation){
            //事件處理函式
        })
    }
}

事件名稱

即要監聽的事件名，即鉤子名，所有的鉤子：https://www.webpackjs.com/api/compiler-hooks

事件型別

這一部分使用的是 Tapable API，這個小型的庫是一個專門用於鉤子函式監聽的庫。

它提供了一些事件型別：

  • tap：註冊一個同步的鉤子函式，函式執行完畢則表示事件處理結束
  • tapAsync：註冊一個基於回撥的非同步的鉤子函式，函式透過呼叫一個回撥錶示事件處理結束
  • tapPromise：註冊一個基於Promise的非同步的鉤子函式，函式透過返回的Promise進入已決狀態表示事件處理結束

處理函式

處理函式有一個事件引數compilation

相關文章