通过一个demo带你深入进入webpack@4.46.0源码的世界，分析构建原理，专栏地址，共有十篇。
- 1. 从构建前后产物对比分析webpack做了些什么?
- 2. webpack构建的基石: tapable@1.1.3源码分析
- 3. webpack构建整体流程的组织：webpack -> Compiler -> Compilation
- 4. 创建模块实例，为模块解析准备
- 5. 路径解析：enhanced-resolve@4.5.0源码分析
- 6. 模块构建之loader执行：loader-runner@2.4.0源码分析
- 7. 模块构建之解析_source获取dependencies
- 8. 从dependency graph 到 chunk graph
- 9. 从chunk到最终的文件内容到最后的文件输出？
- 10. webpack中涉及了哪些设计模式呢？
factory.create -> module.build -> runLoaders -> this.parser.parse 完成了单个模块的构建并收集了该模块的依赖存储在module.dependencies中，在Compilation.js中通过afterBuild接着构架依赖的模块。 就这样从entry开始通过dependencies的配合完成了整条依赖链上所有资源的构建，构建出的模块存储在compilation.modules属性上。
由于这个时候每个module都完成了构建并且经过loaders处理得到了_source，如果此时将文件输出，会有很多文件，显然对于web场景下不是最优的，因此webpack提供了一些方式可以进行模块的聚合（按照一定规则将模块进行组合，最终输出的文件是基于该组合后的内容，组合的内容在内部是通过Chunk这个类来承载，表示若干个模块组成了一个块）。 这个聚合的过程在compilation.seal中
聚合的过程可以分为两类：
- seal中通过buildChunkGraph中根据内置原则进行初步的优化得到
初始chunks - 提供一个钩子 hooks.optimizeChunksBasic ，可以通过订阅这个钩子在初始chunks基础上进一步优化，典型的是webpack内置的SplitChunksPlugin可以根据多种配置来
优化chunks（当然这个过程不是必备的）
compilation.seal除了包含聚合的逻辑，还有生成最终内容（构建产物的内容）的逻辑。
compilation.seal方法中的包含大量的钩子，可以参考compilation.seal 中涉及的钩子和函数调用 ，捋完之后实际内置有订阅的插件并不多，遇事不要慌慢慢捋，
