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

william 發布于2019-08-23 16:18 / 3941人閱讀

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

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

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

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

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

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

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

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

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

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

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

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

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

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

emit的鉤子官網解釋是：生成資源到 output 目錄之前。說白了就是把構建好的JS和CSS文件寫入到dist目錄之前觸發的hooks。
同樣的emit函數里面能夠拿到 compilation。 compilation.chunks是一個數組，代表著每一個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具體是什么不重要，到時候服務器端遍歷json的時候，判斷value的后綴即可，到底是js，css或者其他什么的一目了然。
webpack-manifest-plugin還有一些細節處理，比如取到了publicPath，結合拿到的fileName，組成了文件的真正地址。

plugin其實還可以展開很多內容講，但官網都有，很多時候也不用我們去寫plugin,網上大把，我們只需要知道，他的基本原理即可。
hooks，訂閱發布等。

云服務器 GPU云服務器源碼解讀 webrtc源碼解讀 webrtc fec源碼解讀 js v8源碼解讀

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

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

傻傻分不清的Manifest

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

printempw 2019-08-23 17:58 評論0 收藏0
webpack4詳細教程，從無到有搭建react腳手架（四）

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

chnmagnus 2019-08-23 18:35 評論0 收藏0
Webpack中hash的用法

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

蘇丹 2019-08-20 18:09 評論0 收藏0
基于webpack構建的angular 1.x 工程（一）webpack篇

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

Anleb 2019-08-21 17:23 評論0 收藏0
淺談webpack4.0 性能優化

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

leanxi 2019-08-26 13:25 評論0 收藏0