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

william 發(fā)布于2019-08-23 16:18 / 3956人閱讀

摘要：注冊(cè)方法之后，當(dāng)執(zhí)行了當(dāng)前的，那么掛載正在當(dāng)前上的方法就會(huì)被執(zhí)行。比如在開始編譯之前，就能觸發(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文件，如下

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

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

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

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

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

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

上面都是前置知識(shí)，下面通過(guò)解讀一個(gè)plugin源碼來(lái)鞏固下。

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

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

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

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

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

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

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

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