webpack（1） - 基本架构

webpack 的核心功能，是抽离成很多个内部插件来实现的。

1、 webpack 配置文件处理

2、文件位置解析

webpack 需要从入口文件开始，顺藤摸瓜找到所有的文件

3、加载文件

4、文件解析,从解析结果中找到文件引入的其他文件,文件位置解析

5、找到所有对应的 loader，然后逐个执行

处理完整入口文件之后，得到依赖的其他文件，递归进行处理。最后得到了所有文件的 module 。最终输出的是打包完成的 bundle 文件。所以会有

6、module 合并成 chunk 中 输出最终文件

image.png

内部插件是如何对 webpack 产生作用的呢?

• 先创建一个 Compiler 实例，然后调用 WebpackOptionsApply
• 这个模块给 Compiler 实例添加内部插件：

// https://github.com/webpack/webpack/blob/master/lib/webpack.js#L37

compiler = new Compiler();
// 其他代码..
compiler.options = new WebpackOptionsApply().process(options, compiler);

• 在 WebpackOptionsApply 这个插件内部会根据我们传入的 webpack 配置来初始化需要的内部插件:

JsonpTemplatePlugin = require("./JsonpTemplatePlugin");
NodeSourcePlugin = require("./node/NodeSourcePlugin");
compiler.apply(
    new JsonpTemplatePlugin(options.output),
    new FunctionModulePlugin(options.output),
    new NodeSourcePlugin(options.node),
    new LoaderTargetPlugin(options.target)
);

// 其他代码..

compiler.apply(new EntryOptionPlugin());
compiler.applyPluginsBailResult("entry-option", options.context, options.entry);

compiler.apply(
    new CompatibilityPlugin(),
    new HarmonyModulesPlugin(options.module),
    new AMDPlugin(options.module, options.amd || {}),
    new CommonJsPlugin(options.module),
    new LoaderPlugin(),
    new NodeStuffPlugin(options.node),
    new RequireJsStuffPlugin(),
    new APIPlugin(),
    new ConstPlugin(),
    new UseStrictPlugin(),
    new RequireIncludePlugin(),
    new RequireEnsurePlugin(),
    new RequireContextPlugin(options.resolve.modules, options.resolve.extensions, options.resolve.mainFiles),
    new ImportPlugin(options.module),
    new SystemPlugin(options.module)
);

• 每一个内部插件，都是通过监听任务点的方式，来实现自定义的逻辑

参考文章：
https://juejin.cn/post/6844903726981840904
https://cloud.tencent.com/developer/article/1006353