摘要：源碼分析四模塊上一篇我們看到，通過對命令行傳入的參數(shù)和配置文件里的配置項做了轉(zhuǎn)換包裝，然后傳遞給的模塊去編譯。這一篇我們來看看做了些什么事。在上面的分析中，我們看到最核心的其實就是實例，接下來我們就看下它的類的內(nèi)部邏輯。

上一篇我們看到，webpack-cli 通過 `yargs 對命令行傳入的參數(shù)和配置文件里的配置項做了轉(zhuǎn)換包裝，然后傳遞給 webpack 的 compiler 模塊去編譯。

這一篇我們來看看 compiler 做了些什么事。

首先，我們來看看 webpack 是在什么地方引入 Compiler 這個模塊的，在 webpack/lib/webpack.js 中我們發(fā)現(xiàn)，這個文件第一行就引入了它，并在下面的主要邏輯中使用了它：

const Compiler = require("./Compiler");

……

/*
* options：這就是由 webpack-cli 轉(zhuǎn)換包裝后的配置項
* callback：第二篇分析時，發(fā)現(xiàn) `webpack-cli` 只是傳入了 options對象來獲取 `compiler` 對象，并沒有傳入回調(diào) 
*/

const webpack = (options, callback) => {

    // 驗證配置項的格式
    // webpackOptionsSchema 是一個json格式的描述文件，它描述了webpack可接受的所有配置項及其格式
    // options 是用戶定義的webpack.config.*.js中導(dǎo)出的所有配置項
    // validateSchema 使用 ajv 包，根據(jù) webpackOptionsSchema 中定義的數(shù)據(jù)類型和描述來校驗 options 中的各項配置項，最后返回一個錯誤對象，其中包含所有錯誤的配置項及說明
    const webpackOptionsValidationErrors = validateSchema(
        webpackOptionsSchema,
        options
    );
    // 如果存在配置項錯誤，則拋出所有錯誤
    if (webpackOptionsValidationErrors.length) {
        throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);
    }
    //判斷配置項是否數(shù)組，如果是數(shù)組則使用MultiCompiler進行編譯，否則使用Compiler模塊進行編譯，一般情況下，我們的 options 都是對象不是數(shù)組
    let compiler;
    if (Array.isArray(options)) {
        compiler = new MultiCompiler(options.map(options => webpack(options)));
    } else if (typeof options === "object") {
        //使用默認配置項處理輸入配置項
        // WebpackOptionsDefaulter 繼承自 OptionsDefaulter 類
        // 在這個類里有兩個對象：
        //    * this.defaults : 用來存放配置項的值
        //  * this.config : 用來存放配置項的值的類型
        // process 方法的處理邏輯：
        //     * 如果defaults對象中存在，但在config對象中不存在，并且在options中也不存在，就從 defaults對象中復(fù)制一份到options中
        //  * 如果在config對象中存在并且值為 “call”，則說明它的值是一個方法調(diào)用，就直接調(diào)用，并將options作為參數(shù)傳入
        //  * 如果在config對象中存在且值為 “make”,并且在 options中沒有，則說明它是一個方法，就直接調(diào)用它，并將options作為參數(shù)傳入，拿到返回值，賦值給options中對應(yīng)的項
        //  * 如果在config對象中存在切值為 “append”,則取出options中對應(yīng)的值，如果它不是數(shù)組，就把它重置為數(shù)組，并且把defaults對象中的值復(fù)制到數(shù)組中，最后將這個數(shù)組作為值賦值給options相應(yīng)的項
        options = new WebpackOptionsDefaulter().process(options);
        // new 一個compiler實例，參數(shù)為當(dāng)前執(zhí)行node命令的目錄路徑
    // Compiler類繼承自我們上一篇講過的Tapable類，在構(gòu)造函數(shù)中，初始化了各種類型的鉤子實例
    // compiler 類的內(nèi)部邏輯，后面詳解++++++++++++++++++++++
        compiler = new Compiler(options.context);
    // WebpackOptionsDefaulter類處理后返回的options 復(fù)制給 compiler
        compiler.options = options;
    // 使用NodeEnviromentPlugin 類給compiler添加文件輸入輸出的能力
    // NodeEnviromentPlugin的內(nèi)部邏輯，后面詳解++++++++++++++++++++++++++
        new NodeEnvironmentPlugin().apply(compiler);
    // 如果配置項中有插件配置并且插件配置為數(shù)組
    // 遍歷插件數(shù)組，如果插件是一個函數(shù)，則使用complier來調(diào)用它，，并且將compier作為參數(shù)出入
    // 否則，使用 WebpackPluginInstance 的 apply 方法來返回一個 void 值（相當(dāng)于undefined）
        if (options.plugins && Array.isArray(options.plugins)) {
            for (const plugin of options.plugins) {
                if (typeof plugin === "function") {
                    plugin.call(compiler, compiler);
                } else {
                    plugin.apply(compiler);
                }
            }
        }
    // 觸發(fā) environment 同步鉤子，這里的 call() 是我們講過的Tapable鉤子事件的觸發(fā)方法
    // environment 準(zhǔn)備好之后，執(zhí)行插件
        compiler.hooks.environment.call();
    // 觸發(fā) afterEnvironment 同步鉤子
    // environment 安裝完成之后，執(zhí)行插件
        compiler.hooks.afterEnvironment.call();
    // 使用 WebpackOptionsApply 類處理選項，返回處理過的選項對象
    // WebpackOptionsApply 的處理邏輯，后面詳解++++++++++++++
        compiler.options = new WebpackOptionsApply().process(options, compiler);
    } else {
    //如果配置既不是數(shù)組類型也不是對象類型，拋出錯誤
        throw new Error("Invalid argument: options");
    }
  // 如果傳入了回到函數(shù)
    if (callback) {
    // 如果回調(diào)不是函數(shù)，拋出參數(shù)類型錯誤
        if (typeof callback !== "function") {
            throw new Error("Invalid argument: callback");
        }
    // 如果是監(jiān)聽模式，或者（配置是數(shù)組且數(shù)組中的項中有監(jiān)聽選項為true）,則初始化監(jiān)聽配置，最后返回compiler實例的監(jiān)聽方法
    // 實例的監(jiān)聽方法會返回一個 Watching類的實例，它本質(zhì)上是一個觀察者
        if (
            options.watch === true ||
            (Array.isArray(options) && options.some(o => o.watch))
        ) {
            const watchOptions = Array.isArray(options)
                ? options.map(o => o.watchOptions || {})
                : options.watchOptions || {};
            return compiler.watch(watchOptions, callback);
        }
    // 使用compiler的run方法運行回調(diào)
        compiler.run(callback);
    }
  //返回compiler實例
    return compiler;
};

通過以上源碼分析，我們得知，在 webpack() 中，實際上總共做了三件事：

對參數(shù)進行校驗和規(guī)范化處理；

new 一個編譯器實例并且初始化各種tapable鉤子，并且在環(huán)境準(zhǔn)備好和安裝完成后執(zhí)行響應(yīng)的鉤子

初始化監(jiān)聽。

在上面的分析中，我們看到最核心的其實就是compiler實例，接下來我們就看下它的類的內(nèi)部邏輯。

首先，我們來看主要結(jié)構(gòu)：

/*…… *// 各種引入

// Compiler 類繼承自Tapable
class Compiler extends Tapable {
    constructor(context) {……}//構(gòu)造函數(shù)執(zhí)行各種初始化操作
    watch(watchOptions, handler) {……}//監(jiān)聽初始化
    run(callback) {……}// 運行編譯
    runAsChild(callback) {...} // 作為子編譯進程運行
    purgeInputFileSystem() {...} // 凈化輸入
    emitAssets(compilation, callback) {...} // 發(fā)布資源
    emitRecords(callback) {...} // 發(fā)布記錄
    readRecords(callback) {...} // 讀取記錄
    createChildCompiler(
        compilation,
        compilerName,
        compilerIndex,
        outputOptions,
        plugins
    ) {...} // 創(chuàng)建子編譯器
    isChild() {return !!this.parentCompilation;} // 是否子匯編
    createCompilation() {return new Compilation(this);} // 創(chuàng)建匯編實例
    newCompilation(params) {return compilation;} // 根據(jù)參數(shù)創(chuàng)建新的匯編實例
    createNormalModuleFactory() {return normalModuleFactory;} // 創(chuàng)建普通模塊的工廠
    createContextModuleFactory() {return contextModuleFactory;} // 創(chuàng)建上下文模塊的工廠
    newCompilationParams() {return params;} // 獲取一個新的匯編參數(shù)對象
    compile(callback) {} // 編譯
}

module.exports = Compiler;

class SizeOnlySource extends Source {} // 定義了一個類，作用是+++++++++++

下一講，我們將逐個攻破