摘要：類定義了方法，用于注冊(cè)插件，將插件及其回調(diào)函數(shù)以的形式保存在內(nèi)部對(duì)象中又定義了，等方法來(lái)觸發(fā)插件的回調(diào)函數(shù)。所以當(dāng)類繼承類后，也同樣具有注冊(cè)插件和觸發(fā)回調(diào)函數(shù)的功能。

說(shuō)起webpack，相信對(duì)于前端工程師們而言早已經(jīng)不是什么新鮮的事物。但是由于webpack有著較為復(fù)雜和靈活的配置項(xiàng)，所以給人的第一感覺(jué)是難以完全掌握。

這次就跟大家分享一下有關(guān)webpack構(gòu)建過(guò)程的相關(guān)知識(shí)，希望對(duì)大家進(jìn)一步理解webpack有所幫助。

本次分析的對(duì)象是webpack(v3.6.0)，這是gayhub地址 摸我

由于webpack的內(nèi)容實(shí)在太多，一下子講太多東西容易懵逼，我們這次就從最最最簡(jiǎn)單的例子開(kāi)始講起。

以下是我寫(xiě)的一個(gè)炒雞簡(jiǎn)單的例子：

// webpack.config.js

var path = require("path");
module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "bundle.js"
  }
}

假設(shè)我們的工作目錄下有一個(gè)這樣的webpack.config.js文件，那么當(dāng)我們執(zhí)行webpack命令的時(shí)候【前提是你已經(jīng)安裝了webpack】，那么首先會(huì)執(zhí)行的是 /bin 目錄下的webpack.js

OK，作為入口文件，我們首先要分析的就是： /bin/webpack.js

這個(gè)文件主要做了以下幾件事：

引入yargs模塊，對(duì)命令行參數(shù)進(jìn)行注釋和重命名等工作

添加處理默認(rèn)參數(shù)(比如當(dāng)我們沒(méi)有指定--config參數(shù)的時(shí)候，默認(rèn)去找當(dāng)前目錄下的 webpack.config.js文件作為配置文件)

處理完參數(shù)相關(guān)的內(nèi)容之后，就引入lib目錄下的webpack.js文件，得到編譯對(duì)象compiler，然后進(jìn)行編譯（compiler.run()）

var webpack = require("../lib/webpack.js");
...
...
try {
    // 這里的options就是轉(zhuǎn)換之后的參數(shù)，convert-argv文件主要負(fù)責(zé)這些工作
    // 得到compiler對(duì)象
    compiler = webpack(options);
}catch(e) {
    ...
    ...
}
...
...
// 執(zhí)行編譯
compiler.run(compilerCallback)

由于這里講的例子比較簡(jiǎn)單，不涉及到其他參數(shù)相關(guān)的內(nèi)容，感興趣的同學(xué)可以進(jìn)一步了解參數(shù)處理的部分，這里就不多做解釋了。重點(diǎn)我們還是看一下這個(gè)編譯的過(guò)程。

作為complier的入口文件，我們接下來(lái)看一下： /lib/webpack.js

這個(gè)文件首先調(diào)用validateSchema方法對(duì)傳入的options進(jìn)行格式校驗(yàn)

然后又調(diào)用了WebpackOptionsDefaulter實(shí)例的process方法對(duì)options進(jìn)一步的處理（保存了兩個(gè)實(shí)例屬性 default={} , config= {},分別往這兩個(gè)對(duì)象上面掛屬性，然后再掛載到options上）

然后實(shí)例化Compiler類，由于這個(gè)類繼承自Tapable類，所以他具有父類上實(shí)現(xiàn)插件的一套機(jī)制（applyPlugin,plugin等方法，后面會(huì)具體分析這兩個(gè)類），得到compiler對(duì)象

然后執(zhí)行NodeEnvironmentPlugin插件，主要是使用enhanced-resolve模塊修飾compiler對(duì)象，注冊(cè)“before-run”回調(diào)方法

然后調(diào)用complier的apply方法，內(nèi)部其實(shí)調(diào)用插件的apply方法，相當(dāng)于注冊(cè)各種插件的回調(diào)方法

觸發(fā)“environment” 和 “after-environment” 回調(diào)方法

實(shí)例化WebpackOptionsApply類，調(diào)用process方法；后面我們會(huì)展開(kāi)分析這個(gè)方法

往webpack這個(gè)方法上掛一下靜態(tài)屬性（各種插件方法）

導(dǎo)出webpack這個(gè)方法

接下來(lái)我們先分析WebpackOptionsApply類：/lib/WebpackOptionsApply.js

從上面看到，在編譯之前，webpack會(huì)先實(shí)例化WebpackOptionsApply類，然后調(diào)用其process方法
我們看到process方法其實(shí)就是注冊(cè)了N多個(gè)插件，然后觸發(fā)了某些插件的回調(diào)函數(shù)

首先判斷options.target，如果值為“web”的話(這種情況是最常見(jiàn)的，其他情況的邏輯也是類似的)，則注冊(cè)插件JsonpTemplatePlugin【注冊(cè)“this-compilation”回調(diào)】，F(xiàn)unctionModulePlugin【注冊(cè)“compilation”回調(diào)】，NodeSourcePlugin【注冊(cè)“compilation” & “after-resolver”回調(diào)】，LoaderTargetPlugin【注冊(cè)“compilation”回調(diào)】。

注冊(cè)插件LibraryTemplatePlugin【注冊(cè)“compilation”回調(diào)】，ExternalsPlugin【注冊(cè)“compile”回調(diào)】

注冊(cè)插件EntryOptionPlugin【注冊(cè)“entry-option”回調(diào)】

觸發(fā)“entry-option”回調(diào)，所以進(jìn)入了EntryOptionPlugin插件的回調(diào)函數(shù)

EntryOptionPlugin類中，通過(guò)itemToPlugin方法判斷單入口還是多入口文件，這里以單入口為例，所以進(jìn)入了SingleEntryPlugin類中，注冊(cè)插件SingleEntryPlugin【“compilation” & “make”回調(diào)】

繼續(xù)回到WebpackOptionsApply的process方法，然后又繼續(xù)通過(guò)compile.apply方法添加插件，插件太多了，不一一列舉，感興趣的可以跟蹤代碼了解詳情

最后觸發(fā)“after-plugins” 和 “after-resolvers” 的回調(diào)函數(shù)

以上就是WebpackOptionsApply實(shí)例調(diào)用process的全過(guò)程

在/bin/webpack中，得到的是/lib/webpack返回的compiler對(duì)象，最后調(diào)用compiler對(duì)象的run方法。

作為編譯過(guò)程的核心類，我們接下來(lái)看看Compiler這個(gè)類：/lib/Compiler.js

我們看到Compiler類繼承自Tapable類 github地址

Tapable類提供了一種調(diào)用插件的方式，webpack全部插件都是基于這種方式來(lái)注冊(cè)和調(diào)用的。

Tapable類定義了plugin方法，用于注冊(cè)插件，將插件及其回調(diào)函數(shù)以key-value的形式保存在內(nèi)部_plugins={}對(duì)象中；
又定義了applyPlugins，applyPluginsWaterfall等方法來(lái)觸發(fā)插件的回調(diào)函數(shù)。其實(shí)就是一個(gè)訂閱-發(fā)布模式的實(shí)現(xiàn)。

所以當(dāng)Compiler類繼承Tapable類后，也同樣具有注冊(cè)插件和觸發(fā)回調(diào)函數(shù)的功能。

接下來(lái)看看Compiler中的run方法

首先觸發(fā)的“before-run”回調(diào)函數(shù)，NodeEnvironmentPlugin插件注冊(cè)了回調(diào)函數(shù)

然后觸發(fā)“run”回調(diào)函數(shù),CachePlugin插件注冊(cè)了回調(diào)函數(shù)

調(diào)用readRecords方法()

調(diào)用compile方法，進(jìn)入compile過(guò)程

觸發(fā)“before-compile”回調(diào)函數(shù)，DllReferencePlugin注冊(cè)了回調(diào)函數(shù)

觸發(fā)“compile”回調(diào)函數(shù),ExternalsPlugin & DllReferencePlugin & DelegatedPlugin注冊(cè)了回調(diào)函數(shù)

調(diào)用newCompilation方法，創(chuàng)建Compilation實(shí)例，這個(gè)實(shí)例包含了編譯過(guò)程的所有屬性和方法

觸發(fā)“this-compilation”回調(diào)函數(shù)

觸發(fā)“compilation”回調(diào)函數(shù)

觸發(fā)“make”回調(diào)函數(shù)

如果是單入口項(xiàng)目，這里就會(huì)觸發(fā)SingleEntryPlugin插件注冊(cè)的“make”回調(diào)，其中調(diào)用了compilation的addEntry方法進(jìn)行模塊構(gòu)建

通過(guò)compilation的processModuleDependencies方法收集模塊的依賴

最后通過(guò)buildModule方法構(gòu)建模塊

調(diào)用compilation.finish()方法

調(diào)用compilation.seal()方法

觸發(fā)“after-compile”回調(diào)函數(shù)

compile方法執(zhí)行完之后，就執(zhí)行onCompiled回調(diào)

觸發(fā)“should-emit”回調(diào)函數(shù)

觸發(fā)“done”回調(diào)函數(shù)

調(diào)用emitAssets方法，觸發(fā)了“emit”回調(diào)函數(shù)

調(diào)用emitFiles方法，觸發(fā)“after-emit”回調(diào)函數(shù)

最后執(zhí)行emitRecords方法

這就是compiler的run方法的主要內(nèi)容分析

以上就是webpack簡(jiǎn)單的構(gòu)建流程的分析。哈哈今天就分享到這里，希望大家喜歡，祝大家周末愉快啊。。。