一、plugin的作用

Webpack中的插件是用來擴展Webpack功能的函數，加入自定義的構建行為，使 webpack 可以執行更廣泛的任務，擁有更強的構建能力，它們在Webpack構建過程中被執行。Webpack所有的插件都需要在webpack.config.js的plugins節點中配置。

插件的作用很多，以下是插件常見的幾種作用：

1. 優化打包結果：例如壓縮代碼、去除無用代碼等，提高輸出文件的性能和效率。

2. 注入環境變量：通過插件可以在代碼中注入環境變量，例如環境配置、接口地址等。

3. 自動生成頁面：例如自動將HTML、CSS等文件轉換為JavaScript模塊，并且插入前端代碼中。

4. 生成版本號：例如將代碼文件生成唯一的版本號或哈希值，用于靜態資源版本控制。

5. 引入第三方庫：例如將jQuery等第三方庫通過插件自動引入到項目中。

6. 拆分代碼：將公共模塊提取出來打包成單獨的文件，避免重復打包。

7. 多頁應用打包：通過插件可以實現多個HTML和JavaScript文件打包成多頁應用。

總的來說，插件可以為Webpack提供更多的功能，實現更多的需求。

二、plugin的工作原理

1. 每個Plugin都是一個JavaScript類，其中必須提供一個apply()方法，以向Webpack編譯器注冊自己。

2. 在Webpack編譯過程中，每個Plugin都會被調用，并且能夠監聽到相應的事件。例如，在編譯過程中，Webpack會產生一系列的事件，如compile、emit、done等，而多數的Plugin都會在這些事件被觸發時執行相應的處理。

3. 每個Plugin都可以通過Webpack提供的API，來操控和修改Webpack構建流程中的各種原材料，例如輸入的文件、輸出的代碼和其他資源等。

通常，一個Webpack Plugin的工作包括以下幾個步驟：

1. 獲取Webpack編譯器中的數據。

2. 在合適的時機，監聽Webpack的事件，如compile、emit、done等。

3. 在響應Webpack事件時，對編譯期間的資源進行處理，例如對JavaScript、CSS等進行壓縮、合并、優化等。

4. 在處理過程結束后，向Webpack編譯器返回相應的處理結果，以便Webpack最終生成相應的文件。

三、Plugin 構建對象Compiler和Compilation

在webpack中，plugin是一種用于自定義構建過程的工具，可以通過給定的鉤子函數來實現自定義的構建。plugin構建對象是plugin實現的主要方式，它包含兩個重要的對象：Compiler和Compilation。

1. Compiler：Compiler是webpack的核心對象，負責將整個應用程序編譯成一個靜態資源，Compiler在Webpack初始化時被創建，它包含了Webpack環境的配置參數、option參數、Webpack既有的鉤子函數和一些其它方法，同時在Webpack啟動時實例化，貫穿了整個Webpack打包的生命周期。Compiler主要負責處理文件的監聽、編譯、打包等任務。

舉例說明：

• webpack-dev-server插件使用了內置的Compiler對象，它可以在內存中啟動一個HTTP服務器，并且自動監聽文件變化并重新編譯，方便開發者進行開發和調試。
• clean-webpack-plugin插件在編譯之前清除目標目錄中的文件，就是通過在Compiler對象中監聽webpack工作流程的鉤子函數來實現的。

2. Compilation：Compilation是Compiler的一個屬性，其中包含了當前的模塊資源、編譯生成的資源、變化的文件等。當Webpack以開發模式(webpack --watch or webpack-dev-server)運行時，每當檢測到一個文件發生了改變，重新打包時，就會生成一個新的Compilation對象，Compilation對象代表的是一次新的編譯過程，它可以理解為是“循環體”中的一個“循環次數”，每次循環中處理的內容都是在這個對象中進行的。

舉例說明：

• html-webpack-plugin插件通過在Compilation對象中的html-webpack-plugin-before-html-processing鉤子函數中添加生成的html文件內容來實現自動輸出html文件。
• uglify-webpack-plugin插件在Webpack打包時，通過在Compilation對象中的optimize-chunk-assets鉤子函數中來進行JS代碼的壓縮和混淆處理。

四、自定義一個plugin

1. 創建一個新的JavaScript文件，起名為CustomPlugin.js，例如：

// CustomPlugin.js
class CustomPlugin {
    apply(compiler) {
        compiler.hooks.done.tap('CustomPlugin', () => {
            console.log('CustomPlugin executed!');
        });
    }
}

module.exports = CustomPlugin;

以上代碼創建了一個名為CustomPlugin的類，它的apply方法接收compiler對象參數，該方法通過compiler對象注冊了一個done鉤子，當編譯完成時該鉤子會觸發。

2. 在webpack配置文件中引入自定義的plugin，例如：

// webpack.config.js
const CustomPlugin = require('./CustomPlugin');

module.exports = {
    // ...
    plugins: [
        new CustomPlugin()
    ]
};

以上代碼在plugins數組中實例化了CustomPlugin類，并傳遞給該類的實例作為參數。

3. 運行webpack，CustomPlugin將會被調用，例如：

$ webpack
Hash: 1a0d8a10f39a2c8e1fae
Version: webpack 4.43.0
Time: 205ms
Built at: 06/10/2023 9:13:42 PM
     Asset       Size  Chunks             Chunk Names
index.html  347 bytes          [emitted]
   main.js   4.8 KiB    main  [emitted]  main
Entrypoint main = main.js
CustomPlugin executed!
[./src/index.js] 47 bytes {main} [built]
[./src/styles.css] 1.64 KiB {main} [built]
    + 1 hidden module