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

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

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

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

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

以下是我寫的一個炒雞簡單的例子：

// webpack.config.js

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

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

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

這個文件主要做了以下幾件事：

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

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

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

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

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

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

這個文件首先調(diào)用validateSchema方法對傳入的options進行格式校驗

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

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

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

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

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

實例化WebpackOptionsApply類，調(diào)用process方法；后面我們會展開分析這個方法

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

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

接下來我們先分析WebpackOptionsApply類：/lib/WebpackOptionsApply.js

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

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

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

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

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

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

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

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

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

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

作為編譯過程的核心類，我們接下來看看Compiler這個類：/lib/Compiler.js

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

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

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

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

接下來看看Compiler中的run方法

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

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

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

調(diào)用compile方法，進入compile過程

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

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

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

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

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

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

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

通過compilation的processModuleDependencies方法收集模塊的依賴

最后通過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簡單的構(gòu)建流程的分析。哈哈今天就分享到這里，希望大家喜歡，祝大家周末愉快啊。。。