webpack解析初探

最近花了一点时间探究webpack5的源码，通过网上的一些文章的辅助去更好的理解这个项目。接下来分析一个常规的解析过程。

首先是是使用vscode的Node调试，通过vscode的run and debug添加调试配置，默认生成的launch.json文件如下{

    "version": "0.2.0",

    "configurations": [

        {

            "type": "pwa-node",

            "request": "launch",

            "name": "Launch Program",

            "skipFiles": [

                "<node_internals>/**"

            ],

            "program": "${workspaceFolder}\\mytest\\index.js"

        }

    ]

}

配置program调试入口，然后点击三角形按钮就可以调试代码。

 

 

如图在新建了一个mytest的文件夹下创建一个index.js作为调试的入口，掉用lib/index.js。引入webpack在lib/webpack.js中导出函数，调用这个函数一步步往下执行。

在开始之前我们先来了解一下Hooks类使用的是tapable, 它包含几个方法SyncHook,

    SyncBailHook, 

    AsyncParallelHook,

    AsyncSeriesHook

通过tap注册事件和回调，并通过call，callAsync，promise.then来触发。当然还可以注册拦截器来监听hook执行的各个阶段。

Tapable是webpack的精髓，通过hook注册和触发事件，贯穿整个构件解析的生命周期，后面的解析我们会讲到，compiler以及compiler.compilation都注册了很多操作的Hooks.

接下来我们正是进入源码，lib/webpack.js中导出的函数，主要是create函数创建并返回compiler实例和watch标记以及watchOptions配置。

当我们的调用的函数存在回调是会判断是否是watch，是的话执行compiler.watch，否则执行compiler.run。

const { compiler, watch, watchOptions } = create();

                if (watch) {

                    compiler.watch(watchOptions, callback);

                } else {

                    compiler.run((err, stats) => {

                        compiler.close(err2 => {

                            callback(err || err2, stats);

                        });

                    });

                }

                return compiler;

可以构件单个compiler调用的是createCompiler，后者多个createMultiCompiler，下面我们一单个为例

const createCompiler = rawOptions => {

    const options = getNormalizedWebpackOptions(rawOptions);

    applyWebpackOptionsBaseDefaults(options);

    const compiler = new Compiler(options.context, options);

    new NodeEnvironmentPlugin({

        infrastructureLogging: options.infrastructureLogging

    }).apply(compiler);

    if (Array.isArray(options.plugins)) {

        for (const plugin of options.plugins) {

            if (typeof plugin === "function") {

                plugin.call(compiler, compiler);

            } else {

                plugin.apply(compiler);

            }

        }

    }

    applyWebpackOptionsDefaults(options);

    compiler.hooks.environment.call();

    compiler.hooks.afterEnvironment.call();

    new WebpackOptionsApply().process(options, compiler);

    compiler.hooks.initialize.call();

    return compiler;

};

首先是获取用户的配置加上默认的配置，生成最新的配置。然后创建compiler实例，

NodeEnvironmentPlugin插件是用来扩展node,加文件缓存、文件读取和写入、文件监听。这里文件监听使用的是Watchpack库。

执行用户配置的插件，在添加webpac默认配置。

接下来所有重要的逻辑都是在WebpackOptionsApply这里面处理的，通过配置去执行对应的插件。

compiler.hooks.make.tapAsync("EntryPlugin", (compilation, callback) => {

            compilation.addEntry(context, dep, options, err => {

                callback(err);

            });

        });

主要来看入口文件的处理， EntryOptionPlugin插件中EntryPlugin通过调用compilation.addEntry从入口文件开始处理。

此外如果入口是一个函数，则调用DynamicEntryPlugin也会添加入口文件。

在网上看到别人分析的源码，我觉得这张图结构很清晰，可以说明的生命周期的各个阶段所做的事：

 

addEntry方法中调用addModuleTree去处理相关的模块依赖，调用dependencyFactories

处理模块的依赖dependency.constructor。然后handleModuleCreation内部处理，最后调用factorizeModule解析模块。用factorizeQueue将模块解析压入模块解析队列中执行。

首先调用工程的factory.create函数，调用的是compilation.dependencyFactories.set(

                    EntryDependency,

                    normalModuleFactory

                );

放入的normalModuleFactory。

大致步骤addModule添加模块，然后_handleModuleBuildAndDependencies构建模块buildModule和处理模块依赖processModuleDependencies。通过_processModuleDependencies方法中handleModuleCreation循环构建。

在构建过程中需要处理一些loader，在NormalModule中调用_doBuild中的runLoaders去处理，最终返回资源和webpackAST信息。

最后调用compilation.seal将模块转换成chunk代码块，最后通过emitAssets输出合并后的代码块输出文件。