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

songze 發布于2019-08-23 16:31 / 1848人閱讀

摘要：期有哪些常見的他們是解決什么問題的定義音譯過來就是插件在中插件目的在于解決無法實現的其他事插件是一個具有屬性的對象。

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點推送當天的參考答案

注絕不僅限于完成當天任務，更多是查漏補缺，學習群內其它同學優秀的答題思路

點擊加入答題

GPU云服務器云服務器 ecs常見的問題都有哪些常見的域名有哪些 rds常見問題有哪些云主機常見問題有哪些

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103120.html

JS每日一題：Webpack有哪些常見的Loader？他們是解決什么問題的？

摘要：期有哪些常見的他們是解決什么問題的在回答之前我們先來了解一下我們在上一節講過，是屬于模塊化方案，他能讓任意類型的文件都能運行在瀏覽器中，怎么做到呢這時就有了定義用于對模塊的源代碼進行轉換。 20190326期 Webpack有哪些常見的Loader？他們是解決什么問題的？在回答之前我們先來了解一下Loader 我們在上一節講過，webpack是屬于模塊化方案，他能讓任意類型的文件都能...

Hanks10100 2019-08-23 16:28 評論0 收藏0
JS每日一題：Vue-router有哪些鉤子？使用場景？

摘要：問有哪些鉤子使用場景的實現可以點這里前面我們用大白話講過什么是鉤子，這里在重復一下，就是在什么什么之前什么什么之后英文叫專業點叫生命周期，裝逼點可以叫守衛中也存在鉤子的概念分為三步記憶全局守衛路由獨享守衛組件獨享守衛全局守衛很好理解，全 20190218問 Vue-router有哪些鉤子？使用場景？ router的實現可以點這里前面我們用大白話講過什么是鉤子，這里在重復一下，就是在...

張金寶 2019-08-23 15:18 評論0 收藏0
我的前端面試

摘要：前言這次找工作也面了好幾家公司，也通過了好幾家公司的面試，畢竟之前也準備了一段時間，所以面試的時候心里也不是很虛。的代碼分割怎么實現的說說剛才提到的和的區別前端緩存怎么實現扯扯強緩存和協商緩存，重點問了如何實現緩存二面就聊了項目。。。前言這次找工作也面了好幾家公司，也通過了好幾家公司的面試，畢竟之前也準備了一段時間，所以面試的時候心里也不是很虛。這里記錄一下面試過程中被問到的問題...

meteor199 2019-08-26 13:29 評論0 收藏0
JS每日一題:Webpack如何實現一個Loader？

摘要：期如何實現一個我們在上幾節有講過今天我們來深入了解它們最暴力的方式莫過于動手實現它們好了，回到正題先來回顧一下定義用于對模塊的源代碼進行轉換。可以使你在或加載模塊時預處理文件簡單使用是導出為一個函數的模塊。 20190329期如何實現一個Loader？我們在上幾節有講過loader,今天我們來深入了解它們,最暴力的方式莫過于動手實現它們好了，回到正題, 先來回顧一下loader ...

HollisChuang 2019-08-26 13:42 評論0 收藏0
JS每日一題: 前端的緩存有哪些？都適用什么場景？區別是什么？

摘要：問前端的緩存有哪些都適用什么場景區別是什么參考回答前端緩存分為兩部分緩存瀏覽器緩存緩存強緩存強緩存主要是采用響應頭中的和兩個字段進行控制的值理解指定設置緩存最大的有效時間單位為指定響應會被緩存，并且在多用戶間共享響應只作為私有的緩存， 20190116問: 前端的緩存有哪些？都適用什么場景？區別是什么？參考回答前端緩存分為兩部分: http 緩存瀏覽器緩存 http 緩存強...

MockingBird 2019-08-30 15:55 評論0 收藏0