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

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

這一篇我們來(lái)看看 compiler 做了些什么事。

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

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

……

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

const webpack = (options, callback) => {

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

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

對(duì)參數(shù)進(jìn)行校驗(yàn)和規(guī)范化處理；

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

初始化監(jiān)聽(tīng)。

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

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

/*…… *// 各種引入

// Compiler 類繼承自Tapable
class Compiler extends Tapable {
    constructor(context) {……}//構(gòu)造函數(shù)執(zhí)行各種初始化操作
    watch(watchOptions, handler) {……}//監(jiān)聽(tīng)初始化
    run(callback) {……}// 運(yùn)行編譯
    runAsChild(callback) {...} // 作為子編譯進(jìn)程運(yùn)行
    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)建匯編實(shí)例
    newCompilation(params) {return compilation;} // 根據(jù)參數(shù)創(chuàng)建新的匯編實(shí)例
    createNormalModuleFactory() {return normalModuleFactory;} // 創(chuàng)建普通模塊的工廠
    createContextModuleFactory() {return contextModuleFactory;} // 創(chuàng)建上下文模塊的工廠
    newCompilationParams() {return params;} // 獲取一個(gè)新的匯編參數(shù)對(duì)象
    compile(callback) {} // 編譯
}

module.exports = Compiler;

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

下一講，我們將逐個(gè)攻破