成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

songze / 1888人閱讀

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

20190327期

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

定義: 音譯過來就是插件, 在webpack中, 插件目的在于解決 loader 無法實現(xiàn)的其他事

webpack 插件是一個具有 apply 屬性的 JavaScript 對象。apply 屬性會被 webpack compiler 調(diào)用，并且 compiler 對象可在整個編譯生命周期訪問

代碼理解:

const pluginName = "ConsoleLogOnBuildWebpackPlugin";

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

用法:

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

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

entry-option 初始化 option

run

compile 真正開始的編譯，在創(chuàng)建 compilation 對象之前

compilation 生成好了 compilation 對象

make 從 entry 開始遞歸分析依賴，準備對每個模塊進行 build

after-compile 編譯 build 過程結(jié)束

emit 在將內(nèi)存中 assets 內(nèi)容寫到磁盤文件夾之前

after-emit 在將內(nèi)存中 assets 內(nèi)容寫到磁盤文件夾之后

done 完成所有的編譯過程

failed 編譯失敗的時候

Webpack有哪些常見的Plugin

如上篇loader所講，這里沒有任何意義，只是想讓你們加深下感覺，了解下自己項目中到底用到了哪些plugin, 下面放一張來自官網(wǎng)的圖

Plugin的特性

是一個獨立的模塊

模塊對外暴露一個 js 函數(shù)

函數(shù)的原型 (prototype) 上定義了一個注入 compiler 對象的 apply 方法

apply 函數(shù)中需要有通過 compiler 對象掛載的 webpack 事件鉤子，鉤子的回調(diào)中能拿到當(dāng)前編譯的 compilation 對象，如果是異步編譯插件的話可以拿到回調(diào) callback

完成自定義子編譯流程并處理 complition 對象的內(nèi)部數(shù)據(jù)

如果異步編譯插件的話，數(shù)據(jù)處理完成后執(zhí)行 callback 回調(diào)

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

總結(jié)

plugin是用來拓展webpack功能的

plugin是一個具有 apply 屬性的 JavaScript 對象

apply 屬性會被 webpack compiler 調(diào)用

compiler 對象是 webpack 的編譯器對象

編譯器對象會有一系列hooks

利用hooks在不同階段完成對被編譯者的處理

關(guān)于JS每日一題

JS每日一題可以看成是一個語音答題社區(qū)
每天利用碎片時間采用60秒內(nèi)的語音形式來完成當(dāng)天的考題
群主在次日0點推送當(dāng)天的參考答案

注 絕不僅限于完成當(dāng)天任務(wù)，更多是查漏補缺，學(xué)習(xí)群內(nèi)其它同學(xué)優(yōu)秀的答題思路

點擊加入答題

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103120.html

相關(guān)文章

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

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

    Hanks10100 評論0 收藏0

  • JS每日一題：Vue-router有哪些鉤子？使用場景？

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

    張金寶 評論0 收藏0

  • 我的前端面試

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

    meteor199 評論0 收藏0

  • JS每日一題:Webpack如何實現(xiàn)一個Loader？

    摘要：期如何實現(xiàn)一個我們在上幾節(jié)有講過今天我們來深入了解它們最暴力的方式莫過于動手實現(xiàn)它們好了，回到正題先來回顧一下定義用于對模塊的源代碼進行轉(zhuǎn)換?？梢允鼓阍诨蚣虞d模塊時預(yù)處理文件簡單使用是導(dǎo)出為一個函數(shù)的模塊。 20190329期 如何實現(xiàn)一個Loader？ 我們在上幾節(jié)有講過loader,今天我們來深入了解它們,最暴力的方式莫過于動手實現(xiàn)它們 好了，回到正題, 先來回顧一下loader ...

    HollisChuang 評論0 收藏0

  • JS每日一題: 前端的緩存有哪些？都適用什么場景？區(qū)別是什么？

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

    MockingBird 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<