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
