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

資訊專(zhuān)欄INFORMATION COLUMN

webpack源碼之plugin機(jī)制

glumes / 3002人閱讀

摘要：調(diào)用的目的是為了注冊(cè)你的邏輯指定一個(gè)綁定到自身的事件鉤子。這個(gè)對(duì)象在啟動(dòng)時(shí)被一次性建立，并配置好所有可操作的設(shè)置，包括，和。對(duì)象代表了一次資源版本構(gòu)建。一個(gè)對(duì)象表現(xiàn)了當(dāng)前的模塊資源編譯生成資源變化的文件以及被跟蹤依賴的狀態(tài)信息。

引言 
在上一篇文章Tapable中介紹了其概念和一些原理用法,和這次討論分析webpack plugin的關(guān)聯(lián)很大。下面從實(shí)現(xiàn)一個(gè)插件入手。
demo插件 
function FileListPlugin(options) {}

FileListPlugin.prototype.apply = function(compiler) {
  compiler.plugin("emit", function(compilation, callback) {
    var filelist = "In this build:

";
    for (var filename in compilation.assets) {
      filelist += ("- "+ filename +"
");
    }
    compilation.assets["filelist.md"] = {
      source: function() {
        return filelist;
      },
      size: function() {
        return filelist.length;
      }
    };

    callback();
  });
};

module.exports = FileListPlugin;

說(shuō)明 demo例子參考了webpack的官方文檔,使用這個(gè)簡(jiǎn)短的demo作為我們分析的入口,一步一步來(lái)分析。
首先我們寫(xiě)插件都是這種結(jié)構(gòu)形式,只有這樣webpack才能解析。而上面這個(gè)簡(jiǎn)短的插件的作用是將build后asset目錄下的所有的文件遍歷后取出文件名,然后生成一個(gè)filelist.md文件。
原型上為什么要有apply方法呢?因?yàn)樵诎惭b插件時(shí)，apply方法會(huì)被 webpack compiler 調(diào)用一次。調(diào)用的目的是為了注冊(cè)你的邏輯,指定一個(gè)綁定到 webpack 自身的事件鉤子。

webpack的事件鉤子有很多如下所示,列舉幾個(gè)比較重要常用的的,加深下印象

compile 編譯器開(kāi)始編譯


compilation 編譯器開(kāi)始一個(gè)新的編譯過(guò)程


emit  在生成資源并輸出到目錄之前


done  完成編譯

查看更多事件鉤子
在上一篇文章中分析談到過(guò)compiler是繼承自tapable,正是因?yàn)樗黰ix了Tapable 類(lèi)，才具備注冊(cè)和調(diào)用插件功能,而執(zhí)行plugin方法其實(shí)就相當(dāng)hook.tap(tapOpt, options.fn)進(jìn)行存儲(chǔ), 然后webpack在啟動(dòng)運(yùn)行期間,到達(dá)某個(gè)階段,就會(huì)觸發(fā)調(diào)用相應(yīng)的事件。額外傳入一個(gè) callback 回調(diào)函數(shù),只有在插件中操作是異步的時(shí)候才需要,同步操作不需要傳入和執(zhí)行這個(gè)callback。
還有一點(diǎn)需要注意的是compiler和compilation區(qū)別?

compiler 對(duì)象代表了完整的 webpack 環(huán)境配置。這個(gè)對(duì)象在啟動(dòng) webpack 時(shí)被一次性建立，并配置好所有可操作的設(shè)置，包括 options，loader 和 plugin。當(dāng)在 webpack 環(huán)境中應(yīng)用一個(gè)插件時(shí)，插件將收到此 compiler 對(duì)象的引用。可以使用它來(lái)訪問(wèn) webpack 的主環(huán)境。
compilation 對(duì)象代表了一次資源版本構(gòu)建。當(dāng)運(yùn)行 webpack 開(kāi)發(fā)環(huán)境中間件時(shí)，每當(dāng)檢測(cè)到一個(gè)文件變化，就會(huì)創(chuàng)建一個(gè)新的 compilation，從而生成一組新的編譯資源。一個(gè) compilation 對(duì)象表現(xiàn)了當(dāng)前的模塊資源、編譯生成資源、變化的文件、以及被跟蹤依賴的狀態(tài)信息。compilation 對(duì)象也提供了很多關(guān)鍵時(shí)機(jī)的回調(diào)，以供插件做自定義處理時(shí)選擇使用。
安裝使用 
const FileListPlugin = require("fileList");
module.exports = {
    entry: "./src/main.js",
    output:{
        path: path.join(__dirname,"dist"), 
        filename: "[name].js"
    },
    plugins: [
        new FileListPlugin({options: true})
    ]
}

輸出結(jié)果

demo完整鏈接

參考鏈接

https://doc.webpack-china.org...
https://doc.webpack-china.org...
https://webpack.js.org/contri...

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

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

相關(guān)文章

  • webpack源碼之loader機(jī)制

    摘要：用于對(duì)模塊的源代碼進(jìn)行轉(zhuǎn)換。甚至允許你直接在模塊中文件和區(qū)別之前一篇文章中介紹了機(jī)制和今天研究的對(duì)象他們兩者在一起極大的拓展了的功能。原理說(shuō)明上面是源碼中執(zhí)行關(guān)鍵步驟遞歸的方式執(zhí)行執(zhí)行機(jī)流程似于中間件機(jī)制參考源碼參考文檔 loader概念 loader是用來(lái)加載處理各種形式的資源,本質(zhì)上是一個(gè)函數(shù), 接受文件作為參數(shù),返回轉(zhuǎn)化后的結(jié)構(gòu)。 loader 用于對(duì)模塊的源代碼進(jìn)行轉(zhuǎn)換。loa...

    dmlllll 評(píng)論0 收藏0

  • 淺談webpack之plugin，webpack-manifest-plugin源碼解讀

    摘要：注冊(cè)方法之后，當(dāng)執(zhí)行了當(dāng)前的，那么掛載正在當(dāng)前上的方法就會(huì)被執(zhí)行。比如在開(kāi)始編譯之前，就能觸發(fā)鉤子，就用到了當(dāng)前的。上面都是前置知識(shí)，下面通過(guò)解讀一個(gè)源碼來(lái)鞏固下。先看一段簡(jiǎn)單的源碼。，是眾多的的一個(gè)，官網(wǎng)的解釋是編譯創(chuàng)建之后，執(zhí)行插件。 通過(guò)解讀webpack-manifest-plugin，了解下plugin機(jī)制 先簡(jiǎn)單說(shuō)一下這個(gè)插件的功能，生成一份資源清單的json文件，如下 s...

    william 評(píng)論0 收藏0

  • webpack源碼之運(yùn)行流程

    摘要：引言通過(guò)前面幾張的鋪墊下面開(kāi)始分析源碼核心流程大體上可以分為初始化編譯輸出三個(gè)階段下面開(kāi)始分析初始化這個(gè)階段整體流程做了什么啟動(dòng)構(gòu)建，讀取與合并配置參數(shù)，加載，實(shí)例化。推薦源碼之源碼之機(jī)制源碼之簡(jiǎn)介源碼之機(jī)制參考源碼 引言 通過(guò)前面幾張的鋪墊,下面開(kāi)始分析webpack源碼核心流程,大體上可以分為初始化,編譯,輸出三個(gè)階段,下面開(kāi)始分析 初始化 這個(gè)階段整體流程做了什么? 啟動(dòng)構(gòu)建，讀...

    kviccn 評(píng)論0 收藏0

  • webpack源碼之tapable

    摘要：它的行為和的方法相似，用來(lái)注冊(cè)一個(gè)處理函數(shù)監(jiān)聽(tīng)器，來(lái)在信號(hào)事件發(fā)生時(shí)做一些事情他最終還是調(diào)用進(jìn)行存儲(chǔ)。而就全部取出來(lái)執(zhí)行?？偨Y(jié)上面這些知識(shí)是理解插件和運(yùn)行原理的前置條件更多內(nèi)容待下次分解參考源碼版本說(shuō)明參考鏈接 引言 去年3月的時(shí)候當(dāng)時(shí)寫(xiě)了一篇webpack2-update之路,到今天webpack已經(jīng)到了4.2,更新挺快的,功能也在不斷的完善,webpack4特性之一就是零配置, w...

    Keagan 評(píng)論0 收藏0

  • webpack源碼分析之四：plugin

    摘要：流程劃分縱觀整個(gè)打包過(guò)程，可以流程劃分為四塊。核心類(lèi)關(guān)系圖功能實(shí)現(xiàn)模塊通過(guò)將源碼解析為樹(shù)并拆分，以及直至基礎(chǔ)模塊。通過(guò)的依賴和切割文件構(gòu)建出含有和包含關(guān)系的對(duì)象。通過(guò)模版完成主入口文件的寫(xiě)入，模版完成切割文件的寫(xiě)入。 前言 插件plugin,webpack重要的組成部分。它以事件流的方式讓用戶可以直接接觸到webpack的整個(gè)編譯過(guò)程。plugin在編譯的關(guān)鍵地方觸發(fā)對(duì)應(yīng)的事件，極大的...

    yhaolpz 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<