The most down-to-earth Webpack source code analysis (two)

Compiler. Run () in webpack-cli/bin/cli.js file. If you haven’t seen the previous article, it is recommended to go back to a simple look at the source code of the most earth webpack (a).

Webpack execution entry, preparation stage before construction, compilation and construction stage, optimization stage after construction and file output stage will be explained according to the main line. This article mainly explains the preparation stage before construction. Because webpack is introduced and instantiated in webpack-cli/bin/cli.js, const webpack = require(“webpack”); , indicating that the pre-build phase is mainly in the WebPack folder.

Json file: “main”: “lib/webpack.js” : “lib/webpack.js”

webpack/lib/webpack.js

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

const webpack = (options, callback) => {
    options = new WebpackOptionsDefaulter().process(options);

    compiler = new Compiler(options.context);
    compiler.options = options;
    new NodeEnvironmentPlugin({
        infrastructureLogging: options.infrastructureLogging
    }).apply(compiler);
    
    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);
            }
	}
    }
    compiler.hooks.environment.call();
    compiler.hooks.afterEnvironment.call();
    compiler.options = new WebpackOptionsApply().process(options, compiler);
    
    return compiler;
}
exports = module.exports = webpack;
Copy the code

First initialize the default configuration of WebPack, WebpackOptionsDefaulter(), then use options to instantiate Complier to get the parser object, and then initialize the Node environment NodeEnvironmentPlugin for the build process. Register each user – defined plug-in, then register each built-in plug-in WebpackOptionsApply(), and finally return compiler.

WebpackOptionsApply() is a function that does a lot of registration work for built-in plug-ins

// webpack/lib/WebpackOptionsApply.js

class WebpackOptionsApply extends OptionsApply {
    new EntryOptionPlugin().apply(compiler);
    compiler.hooks.entryOption.call(options.context, options.entry);

    compiler.hooks.afterResolvers.call(compiler);
}
module.exports = WebpackOptionsApply;
Copy the code

This section highlights two hooks,entryOption and afterResolvers, which represent entry configuration and path resolution, respectively. Once these two parts are processed, the all-important build phase can begin.

Key node hooks in the WebPack build process

The following is the dry part of this sharing theme, focus on here! Focus here! Focus here!

To reveal the plot in advance, the content to be shared in the following chapters is modified by the author based on the online course. Each key node in the flow chart is the hook in the construction process. The next section will cover the process from run->make->buildModule->normal-module-loader->program, the most important part of this share, the core webpack building process.