Webpack process analysis (4): start building

Preface

The preparation work has been done three times. Now, immediately, immediately, we enter the analysis of the construction process!

Build entry

This process is still in the compiler.compiler function,

    // 在这之前new了一个 compilation 对象
    this.hooks.make.callAsync(compilation, err => {
            logger.timeEnd("make hook");
            if (err) return callback(err);
            logger.time("finish make hook");
            this.hooks.finishMake.callAsync(compilation, err => {
                logger.timeEnd("finish make hook");
                if (err) return callback(err);
                process.nextTick(() => {
                    logger.time("finish compilation");
                    compilation.finish(err => {
                        logger.timeEnd("finish compilation");                                  if (err) return callback(err);
                        logger.time("seal compilation");
                        compilation.seal(err => {
                            //dosomething
                        });
                    });
                });
            });
    });

Here triggered make callback hook registered, remember me in initialization mentioned in section EntryPlugin it? A hook callback is registered here, which triggers compilation.addEntry

compilation.addEntry(context, dependency, name, callback); //其中 dependency 为 EntryDependency 实例。

addEntry

addEntry does several things:

• Generate EntryData
• Call compilation hook addEntry
• Execute compilation.addModule

addModule

addModule gets the corresponding moduleFactory according to dep, and then executes handleModuleCreation , and dependency data such as moduleFactory factorizeQueue

Get moduleFactory

const Dep = /** @type {DepConstructor} */ (dependency.constructor);
const moduleFactory = this.dependencyFactories.get(Dep);

this.dependencyFactories is a Map, so when was it set? The answer is in initialization mentioned in section EntryPlugin in.

** Stuffed into the queue

After obtaining the compilation method of the dependencies and modules, factorizeQueue into the 0616d0668b55e8 queue

this.factorizeModule({
    currentProfile,
    factory,
    dependencies,
    factoryResult: true,
    originModule,
    contextInfo,
    context
},
() => { // dosomethine})

// Workaround for typescript as it doesn't support function overloading in jsdoc within a class
Compilation.prototype.factorizeModule = 
/** @type {{
    (options: FactorizeModuleOptions & { factoryResult?: false }, callback: ModuleCallback): void;
    (options: FactorizeModuleOptions & { factoryResult: true }, callback: ModuleFactoryResultCallback): void;
}} */ 
(
    function (options, callback) {
        this.factorizeQueue.add(options, callback);
    }
);

Seeing this, I have no clue. After compilation , I did not find similar to 1616d0668b564a factorizeQueue.start and factorizeQueue.run in the entire 0616d0668b5644. factorizeQueue see what's done inside 0616d0668b5646

factorizeQueue

this.factorizeQueue = new AsyncQueue({
    name: "factorize",
    parent: this.addModuleQueue,
    processor: this._factorizeModule.bind(this)
});

factorizeQueue is an example AsyncQueue AsyncQueue mainly to do a queue control. The queue length is controlled parallelism passed in from the outside factorizeQueue not transmitted, and the default is 1 here.

If the condition is ok, AsyncQueue will be called _processor

this._processor(entry.item, (e, r) => {
    inCallback = true;
    this._handleResult(entry, e, r);
});

Call _factorizeModule here, then execute factory.create , start reslove!

Concluding remarks

So far we have learned webpack entry attribute in the configuration to obtain the modulefactory. The next article will introduce the reslove process.