深入webpack4源码（三）—— complier

在继续看上节里react-script里的代码：

const webpack = require('webpack');
function build(previousFileSizes) {
  let compiler = webpack(config);
  return new Promise((resolve, reject) => {
    compiler.run((err, stats) => {
        // ....
    })  
})
}

得到compiler之后，我们就开始正式编译了，这个时候就是调用的compiler.run()。
之前说webpack就是定义了一系列勾子和调用一系列勾子，这里其实就是调用一系列勾子：

this.hooks.beforeRun.callAsync(this, err => {
    if (err) return finalCallback(err);

    this.hooks.run.callAsync(this, err => {
        if (err) return finalCallback(err);

        this.readRecords(err => {
            if (err) return finalCallback(err);

            this.compile(onCompiled);
        });
    });
});

这里先调用了beforeRun勾子然后回调函数中调用run勾子，接着是readRecords勾子，最终才调用了compile方法，并且传入了一个回调函数onCompiled：

const onCompiled = (err, compilation) => {
    if (err) return finalCallback(err);

    if (this.hooks.shouldEmit.call(compilation) === false) {
        const stats = new Stats(compilation);
        stats.startTime = startTime;
        stats.endTime = Date.now();
        this.hooks.done.callAsync(stats, err => {
            if (err) return finalCallback(err);
            return finalCallback(null, stats);
        });
        return;
    }

    this.emitAssets(compilation, err => {
        if (err) return finalCallback(err);

        if (compilation.hooks.needAdditionalPass.call()) {
            compilation.needAdditionalPass = true;

            const stats = new Stats(compilation);
            stats.startTime = startTime;
            stats.endTime = Date.now();
            this.hooks.done.callAsync(stats, err => {
                if (err) return finalCallback(err);

                this.hooks.additionalPass.callAsync(err => {
                    if (err) return finalCallback(err);
                    this.compile(onCompiled);
                });
            });
            return;
        }

        this.emitRecords(err => {
            if (err) return finalCallback(err);

            const stats = new Stats(compilation);
            stats.startTime = startTime;
            stats.endTime = Date.now();
            this.hooks.done.callAsync(stats, err => {
                if (err) return finalCallback(err);
                return finalCallback(null, stats);
            });
        });
    });
};

这里的流程也比较能理解，这里其实就是完成编译之后需要做的事情，一般就是两件事：

• 输出打包后的资源；
• console出打包后的资源信息：大小耗时等；

但是他是先调用了一个勾子shouldEmit，明确的返回了false后就不再输出资源了。不然就是调用this.emitAssets() 输出资源。
然后在emitAssets中的回调里又做了判断，调用了一个勾子needAdditionalPass，如果为true就继续调用additionalPass并且再次编译。否则继续调用this.emitRecords()输出打包记录，再最终的回调里再调用done的勾子，然后再finalCallback，也是我们最开始传入的compiler.run的callback。

这里是把回调讲完了，但其实这是一层一层的调用，先是this.compile() 回调里再 this.emitAssets() 回调里再 this.emitRecords()。我们一个函数一个函数看。

emitRecords

emitRecords(callback) {
    if (!this.recordsOutputPath) return callback();
    const idx1 = this.recordsOutputPath.lastIndexOf("/");
    const idx2 = this.recordsOutputPath.lastIndexOf("\\");
    let recordsOutputPathDirectory = null;
    if (idx1 > idx2) {
        recordsOutputPathDirectory = this.recordsOutputPath.substr(0, idx1);
    } else if (idx1 < idx2) {
        recordsOutputPathDirectory = this.recordsOutputPath.substr(0, idx2);
    }

    const writeFile = () => {
        this.outputFileSystem.writeFile(
            this.recordsOutputPath,
            JSON.stringify(this.records, undefined, 2),
            callback
        );
    };

    if (!recordsOutputPathDirectory) {
        return writeFile();
    }
    this.outputFileSystem.mkdirp(recordsOutputPathDirectory, err => {
        if (err) return callback(err);
        writeFile();
    });
}   

没啥好说的，更具系统拿到recordsOutput的相对路径，然后写入文件。

emitAssets

源码太长了，这里其实拿到了conpiler编辑后得到的compilation，而compilation的assets就代表输出的静态资源对象数组，引用了一个库const asyncLib = require("neo-async");并行输出资源，其中如果配置了output.futureEmitAssets会启用一个新的资源输出逻辑，暂时还不是很明白这里的作用，输出的具体内容是调用了compilation.assets里对象的source方法得到content，然后调用之前讲的webpack的文件输出系统输出。

compile

const params = this.newCompilationParams();
this.hooks.beforeCompile.callAsync(params, err => {
    if (err) return callback(err);

    this.hooks.compile.call(params);

    const compilation = this.newCompilation(params);

    this.hooks.make.callAsync(compilation, err => {
        if (err) return callback(err);

        compilation.finish(err => {
            if (err) return callback(err);

            compilation.seal(err => {
                if (err) return callback(err);

                this.hooks.afterCompile.callAsync(compilation, err => {
                    if (err) return callback(err);

                    return callback(null, compilation);
                });
            });
        });
    });
});

首先调用了this.newCompilationParams这个方法，他的主要作用是创建了两个工厂对象NormalModuleFactory、ContextModuleFactory，然后并且把这俩对象作为参数传入给了this.newCompilation里，然后最好调用了一系列勾子make勾子，这个勾子实际上就是真正编译的开始。

目前就阅读到了这个地方，其实很多细节没有讲到，比如初始化NormalModuleFactory、ContextModuleFactory，还有Stats这个对象是怎么利用compilation生成信息的，其实都需要等看完了compilation是如何生成才能明白。 之前我们说过make是真正编译的开始，其实这个时候就改看哪些地方调用了make这个勾子做了什么操作，然后接下来才能顺理成章。