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

資訊專欄INFORMATION COLUMN

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

william / 3957人閱讀

摘要：注冊方法之后，當執(zhí)行了當前的，那么掛載正在當前上的方法就會被執(zhí)行。比如在開始編譯之前，就能觸發(fā)鉤子，就用到了當前的。上面都是前置知識，下面通過解讀一個源碼來鞏固下。先看一段簡單的源碼。，是眾多的的一個，官網(wǎng)的解釋是編譯創(chuàng)建之后，執(zhí)行插件。

通過解讀webpack-manifest-plugin，了解下plugin機制

先簡單說一下這個插件的功能，生成一份資源清單的json文件，如下


如果是服務(wù)器端構(gòu)造的html，就可以根據(jù)當前的manifest，引入css和js文件，而且這個文件是必須的，否則服務(wù)器端壓根不知道hash之后的JS文件名字和CSS名字。

簡單說下webpack執(zhí)行，取得webpack.config.js的配置和默認配置合并,然后執(zhí)行plugin，這里的執(zhí)行其實只是簡單的綁定hooks，并非執(zhí)行里面的邏輯，先看下源代碼，再給大家擼一擼這里面的細節(jié)。

compiler實例會作為參數(shù)傳遞，可以看到new 之后，他就立刻去遍歷的plugin，然后plugin.apply(compiler)去執(zhí)行了當前的plugin。難道說
plugin在這里就執(zhí)行了？說對也不對，看一段最簡單的plugin的demo

 apply(compiler) {
    compiler.hooks.compilation.tap("xxx", (compilation) => {
     do something
    });
  }

官網(wǎng)的demo，用的compiler.plugin,但這個方法已經(jīng)不推薦使用了，用hooks代替，更語義化一點。
看上面的代碼，apply執(zhí)行后，其實只是在對應(yīng)的hooks上注冊了一個方法而已，xxx可以理解為一個plugin的標識。注冊方法之后，當webpack執(zhí)行了當前的hooks，那么掛載正在當前hooks上的方法就會被執(zhí)行。
這個有點類似于發(fā)布訂閱模式了。
綜上所述，webpack在 compiler被創(chuàng)建的之后，立刻就去遍歷了plugin，就是想要盡早的注冊方法，否則掛載在一些hooks上的方法就沒辦法被正確觸發(fā)。比如

在webpack開始編譯之前，就能觸發(fā)beforeRun鉤子，webpack-manifest-plugin就用到了當前的hook。因此雖然plugin注冊的早，但真正的執(zhí)行順序在于它綁定的到底是什么樣的鉤子。無關(guān)于它在webpack配置中plugin里面的順序。

上面都是前置知識，下面通過解讀一個plugin源碼來鞏固下。

先看一段簡單的源碼。
這里他注冊了好幾個鉤子，我們一個一個來說。
compiler.hooks.webpackManifestPluginAfterEmit = new SyncWaterfallHook(["manifest"]); 這里是自定義一個hooks,webpack允許自定義hooks，這個hooks是干嘛的，這是給其他組件用的，意思就是，我注冊了一個這樣的hooks，其他組件就能通過tap綁定對應(yīng)的方法，僅此而已。

 compiler.hooks.compilation.tap(pluginOptions, function (compilation) {
      compilation.hooks.moduleAsset.tap(pluginOptions, moduleAsset);
    });

hooks.compilation，compilations是compiler眾多的hooks的一個，官網(wǎng)的解釋是：編譯(compilation)創(chuàng)建之后，執(zhí)行插件。簡單的可以理解為某段編譯過程(一個文件或者一個chunk)，一次webpack，會觸發(fā)多次的compilation, 而compilation下面又有N多的hooks，具體有哪些可以看官網(wǎng)，這里的moduleAsset,官網(wǎng)的解釋是：一個模塊中的一個資源被添加到編譯中。比如圖片資源。
moduleAsset回調(diào)函數(shù)接收到了兩個參數(shù)，一個是filename,就是hash后的圖片名字，將filename,保存到一個全局對象中。但這里的資源并不包括JS,CSS，需要在其他的hooks中處理。

compiler.hooks.emit.tap(pluginOptions, emit);

emit的鉤子官網(wǎng)解釋是：生成資源到 output 目錄之前。 說白了就是把構(gòu)建好的JS和CSS文件寫入到dist目錄之前觸發(fā)的hooks。
同樣的emit函數(shù)里面能夠拿到 compilation。 compilation.chunks是一個數(shù)組，代表著每一個chunk,通常是entry里面定義的文件，以及通過splitChunks，拆開的chunk。chunk里面能拿到一個files字段，里面存到就是生成的css和js名字。

compiler.hooks.emit.tap("xxx", (compilation) => {
      compilation.chunks.forEach((chunk) => {
        console.log(chunk.files);
      });
    });

到這里webpack-manifest-plugin的主功能就差不多了，將上面得到的各種hash后的name保存到對象里面，key就是chunk名（不一定準），但key具體是什么不重要，到時候服務(wù)器端遍歷json的時候，判斷value的后綴即可，到底是js，css或者其他什么的一目了然。
webpack-manifest-plugin還有一些細節(jié)處理，比如取到了publicPath，結(jié)合拿到的fileName，組成了文件的真正地址。

plugin其實還可以展開很多內(nèi)容講，但官網(wǎng)都有，很多時候也不用我們?nèi)憄lugin,網(wǎng)上大把，我們只需要知道，他的基本原理即可。
hooks，訂閱發(fā)布等。

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

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

相關(guān)文章

  • 傻傻分不清的Manifest

    摘要：的英文含義是名單種技術(shù)的確都是把當做清單使用緩存清單清單打包資源路徑清單打包清單只不過是在不同的場景中使用特定的清單來完成某些功能所以，學(xué)好英文是多么重要，這樣才不會傻傻分不清到底是干啥的 在前端，說到manifest，其實是有歧義的，就我了解的情況來說，manifest可以指代下列含義： html標簽的manifest屬性: 離線緩存（目前已被廢棄） PWA: 將Web應(yīng)用程序...

    printempw 評論0 收藏0

  • webpack4詳細教程，從無到有搭建react腳手架（四）

    摘要：相關(guān)鏈接詳細教程，從無到有搭建腳手架一詳細教程，從無到有搭建腳手架二詳細教程，從無到有搭建腳手架三管理打包后目錄結(jié)構(gòu)打包結(jié)構(gòu)如下修改配置通過相對目錄對資源命名前加上目錄名，效果后面的步驟在這里需要安裝一個大型的包，以為例安裝為第三 相關(guān)鏈接 webpack4詳細教程，從無到有搭建react腳手架（一） webpack4詳細教程，從無到有搭建react腳手架（二） webpack4詳細...

    chnmagnus 評論0 收藏0

  • Webpack中hash的用法

    摘要：在的配置項中，可能會見到這樣的字符。的情況的可以指定。值是特定于整個構(gòu)建過程的。。因此，以上兩個值中更推薦的是。中的則和前面的一樣，指定了結(jié)果的截取長度。的情況被引用的通過來得到帶的文件。所以，這可能并不是我們想要的。 在webpack的配置項中，可能會見到hash這樣的字符。 當存在hash配置的時候，webpack的輸出將可以得到形如這樣的文件： page1_bundle_54e8...

    蘇丹 評論0 收藏0

  • 基于webpack構(gòu)建的angular 1.x 工程（一）webpack篇

    摘要：基于構(gòu)建的工程一篇現(xiàn)在都已經(jīng)出到的版本了，可我對它的認識還是停留在的版本。然后是寫啟動的命令行，也就是上面的這樣寫的意思是，當你輸入你的命令名字就會讓執(zhí)行你對應(yīng)命令的語句。我們首先把基本的配置引進來。 基于webpack構(gòu)建的angular 1.x 工程（一）webpack篇 ??現(xiàn)在AngularJS都已經(jīng)出到4.x的版本了，可我對它的認識還是停留在1.x的版本。 ??之前用它是為...

    Anleb 評論0 收藏0

  • 淺談webpack4.0 性能優(yōu)化

    摘要：中在性能優(yōu)化所做的努力，也大抵圍繞著這兩個大方向展開。因此，將依賴模塊從業(yè)務(wù)代碼中分離是性能優(yōu)化重要的一環(huán)。大型庫是否可以通過定制功能的方式減少體積。這又違背了性能優(yōu)化的基礎(chǔ)。接下來可以抓住一些細節(jié)做更細的優(yōu)化。中，為默認啟動這一優(yōu)化。 前言：在現(xiàn)實項目中，我們可能很少需要從頭開始去配置一個webpack 項目，特別是webpack4.0發(fā)布以后，零配置啟動一個項目成為一種標配。正因為...

    leanxi 評論0 收藏0

發(fā)表評論

0條評論

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