webpack 源码分析(四)——complier模块

webpack 源码分析(四)——complier模块

上一篇我们看到,webpack-cli 通过 yargs 对命令行传入的参数和配置文件里的配置项做了转换包装,然后传递给 webpackcompiler` 模块去编译。

这一篇我们来看看 compiler 做了些什么事。

入口

首先,我们来看看 webpack 是在什么地方引入 Compiler 这个模块的,在 webpack/lib/webpack.js 中我们发现,这个文件第一行就引入了它,并在下面的主要逻辑中使用了它:

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

……

/*
* options:这就是由 webpack-cli 转换包装后的配置项
* callback:第二篇分析时,发现 `webpack-cli` 只是传入了 options对象来获取 `compiler` 对象,并没有传入回调 
*/

const webpack = (options, callback) => {

    // 验证配置项的格式
    // webpackOptionsSchema 是一个json格式的描述文件,它描述了webpack可接受的所有配置项及其格式
    // options 是用户定义的webpack.config.*.js中导出的所有配置项
    // validateSchema 使用 ajv 包,根据 webpackOptionsSchema 中定义的数据类型和描述来校验 options 中的各项配置项,最后返回一个错误对象,其中包含所有错误的配置项及说明
    const webpackOptionsValidationErrors = validateSchema(
        webpackOptionsSchema,
        options
    );
    // 如果存在配置项错误,则抛出所有错误
    if (webpackOptionsValidationErrors.length) {
        throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);
    }
    //判断配置项是否数组,如果是数组则使用MultiCompiler进行编译,否则使用Compiler模块进行编译,一般情况下,我们的 options 都是对象不是数组
    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对象中复制一份到options中
        //  * 如果在config对象中存在并且值为 “call”,则说明它的值是一个方法调用,就直接调用,并将options作为参数传入
        //  * 如果在config对象中存在且值为 “make”,并且在 options中没有,则说明它是一个方法,就直接调用它,并将options作为参数传入,拿到返回值,赋值给options中对应的项
        //  * 如果在config对象中存在切值为 “append”,则取出options中对应的值,如果它不是数组,就把它重置为数组,并且把defaults对象中的值复制到数组中,最后将这个数组作为值赋值给options相应的项
        options = new WebpackOptionsDefaulter().process(options);
        // new 一个compiler实例,参数为当前执行node命令的目录路径
    // Compiler类继承自我们上一篇讲过的Tapable类,在构造函数中,初始化了各种类型的钩子实例
    // compiler 类的内部逻辑,后面详解++++++++++++++++++++++
        compiler = new Compiler(options.context);
    // WebpackOptionsDefaulter类处理后返回的options 复制给 compiler
        compiler.options = options;
    // 使用NodeEnviromentPlugin 类给compiler添加文件输入输出的能力
    // NodeEnviromentPlugin的内部逻辑,后面详解++++++++++++++++++++++++++
        new NodeEnvironmentPlugin().apply(compiler);
    // 如果配置项中有插件配置并且插件配置为数组
    // 遍历插件数组,如果插件是一个函数,则使用complier来调用它,,并且将compier作为参数出入
    // 否则,使用 WebpackPluginInstance 的 apply 方法来返回一个 void 值(相当于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);
                }
            }
        }
    // 触发 environment 同步钩子,这里的 call() 是我们讲过的Tapable钩子事件的触发方法
    // environment 准备好之后,执行插件
        compiler.hooks.environment.call();
    // 触发 afterEnvironment 同步钩子
    // environment 安装完成之后,执行插件
        compiler.hooks.afterEnvironment.call();
    // 使用 WebpackOptionsApply 类处理选项,返回处理过的选项对象
    // WebpackOptionsApply 的处理逻辑,后面详解++++++++++++++
        compiler.options = new WebpackOptionsApply().process(options, compiler);
    } else {
    //如果配置既不是数组类型也不是对象类型,抛出错误
        throw new Error("Invalid argument: options");
    }
  // 如果传入了回到函数
    if (callback) {
    // 如果回调不是函数,抛出参数类型错误
        if (typeof callback !== "function") {
            throw new Error("Invalid argument: callback");
        }
    // 如果是监听模式,或者(配置是数组且数组中的项中有监听选项为true),则初始化监听配置,最后返回compiler实例的监听方法
    // 实例的监听方法会返回一个 Watching类的实例,它本质上是一个观察者
        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方法运行回调
        compiler.run(callback);
    }
  //返回compiler实例
    return compiler;
};

通过以上源码分析,我们得知,在 webpack() 中,实际上总共做了三件事:

  1. 对参数进行校验和规范化处理;
  2. new 一个编译器实例并且初始化各种tapable钩子,并且在环境准备好和安装完成后执行响应的钩子
  3. 初始化监听。

在上面的分析中,我们看到最核心的其实就是compiler实例,接下来我们就看下它的类的内部逻辑。

compiler 分析

主体结构

首先,我们来看主要结构:

/*…… *// 各种引入

// Compiler 类继承自Tapable
class Compiler extends Tapable {
    constructor(context) {……}//构造函数执行各种初始化操作
    watch(watchOptions, handler) {……}//监听初始化
    run(callback) {……}// 运行编译
    runAsChild(callback) {...} // 作为子编译进程运行
    purgeInputFileSystem() {...} // 净化输入
    emitAssets(compilation, callback) {...} // 发布资源
    emitRecords(callback) {...} // 发布记录
    readRecords(callback) {...} // 读取记录
    createChildCompiler(
        compilation,
        compilerName,
        compilerIndex,
        outputOptions,
        plugins
    ) {...} // 创建子编译器
    isChild() {return !!this.parentCompilation;} // 是否子汇编
    createCompilation() {return new Compilation(this);} // 创建汇编实例
    newCompilation(params) {return compilation;} // 根据参数创建新的汇编实例
    createNormalModuleFactory() {return normalModuleFactory;} // 创建普通模块的工厂
    createContextModuleFactory() {return contextModuleFactory;} // 创建上下文模块的工厂
    newCompilationParams() {return params;} // 获取一个新的汇编参数对象
    compile(callback) {} // 编译
}

module.exports = Compiler;

class SizeOnlySource extends Source {} // 定义了一个类,作用是+++++++++++

下一讲,我们将逐个攻破

你可能感兴趣的:(web前端研究)