JS每日一題:Webpack有哪些常見的Plugin？他們是解決什麼問題的

20190327期

Webpack有哪些常見的Plugin？他們是解決什麼問題的

定義: 音譯過來就是插件, 在webpack中, 插件目的在於解決 loader 沒法實現的其餘事

webpack 插件是一個具備 apply 屬性的 JavaScript 對象。apply 屬性會被 webpack compiler 調用，而且 compiler 對象可在整個編譯生命週期訪問

代碼理解:

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

class ConsoleLogOnBuildWebpackPlugin {
    // compiler 對象是 webpack 的編譯器對象
    apply(compiler) {
        // hook中的tap函數的第一個參數即是插件的名稱
        compiler.hooks.run.tap(pluginName, compilation => {
            // 咱們的webpack配置應用了插件後便會執行該函數體
            console.log("webpack 構建過程開始！");
        });
    }
}

用法:

const webpack = require('webpack');
// 上方定義的插件
const ConsoleLogOnBuildWebpackPlugin = require('ConsoleLogOnBuildWebpackPlugin');
webpack({
    // ...
    plugins: [
        new ConsoleLogOnBuildWebpackPlugin({/* some plugin options */})
    ]
    // ...
});

上面示例中有提到hooks，在plugin有哪些hooks呢？咱們也簡單列舉一下

• entry-option 初始化 option
• run
• compile 真正開始的編譯，在建立 compilation 對象以前
• compilation 生成好了 compilation 對象
• make 從 entry 開始遞歸分析依賴，準備對每一個模塊進行 build
• after-compile 編譯 build 過程結束
• emit 在將內存中 assets 內容寫到磁盤文件夾以前
• after-emit 在將內存中 assets 內容寫到磁盤文件夾以後
• done 完成全部的編譯過程
• failed 編譯失敗的時候

Webpack有哪些常見的Plugin

如上篇loader所講，這裏沒有任何意義，只是想讓大家加深下感受，瞭解下本身項目中到底用到了哪些plugin, 下面放一張來自官網的圖

Plugin的特性

• 是一個獨立的模塊
• 模塊對外暴露一個 js 函數
• 函數的原型 (prototype) 上定義了一個注入 compiler 對象的 apply 方法
• apply 函數中須要有經過 compiler 對象掛載的 webpack 事件鉤子，鉤子的回調中能拿到當前編譯的 compilation 對象，若是是異步編譯插件的話能夠拿到回調 callback
• 完成自定義子編譯流程並處理 complition 對象的內部數據
• 若是異步編譯插件的話，數據處理完成後執行 callback 回調

簡單理了一下plugin的特性再回過頭去看一看示例，應該就會更清淅了

總結

• plugin是用來拓展webpack功能的
• plugin是一個具備 apply 屬性的 JavaScript 對象
• apply 屬性會被 webpack compiler 調用
• compiler 對象是 webpack 的編譯器對象
• 編譯器對象會有一系列hooks
• 利用hooks在不一樣階段完成對被編譯者的處理

關於JS每日一題

JS每日一題能夠當作是一個語音答題社區
天天利用碎片時間採用60秒內的語音形式來完成當天的考題
羣主在第二天0點推送當天的參考答案

• 注 毫不僅限於完成當天任務，更可能是查漏補缺，學習羣內其它同窗優秀的答題思路

點擊加入答題