12｜拓扑排序：Webpack是如何确定构建顺序的？
黄清昊
该思维导图由 AI 生成，仅供参考
你好，我是微扰君。
Webpack 是现在最流行的前端构建工具，见证了前端工程化在过去十年里的繁荣发展。如果你是前端工程师，相信你在日常工作中应该会经常使用到。
Webpack 让我们可以模块化地进行现代 Web 应用的前端开发，并基于我们的简单配置，从入口开始，递归地自动构建出复杂的依赖关系图，最终把所有的模块打包成若干个浏览器可理解的 bundle。
整个过程比较复杂，但是其中显然会有一个构建顺序的问题需要处理。以 html-webpack-plugin v3.2.0 为例，我们用 Webpack 打包 HTML 文件的时候，文件之间会有一定的引用依赖关系，因而所构建的 chunk 之间也会有相应的依赖关系。
那问题就来了，打包的时候，按照什么样的顺序去打包才更合理呢？这就是拓扑排序需要解决。
我的第一份工作就是前端工程师，对前端开发感情挺深，也一直觉得其实前端里用到算法的地方绝对不在少数。所以今天我们就以 Webpack 为例，一起来学习拓扑排序在实战中所发挥的威力。
当然，如果你对 Webpack 了解不多，也不用担心，完全可以把这个问题看成如何在一堆有依赖关系的源文件中找到合适的加载或者编译的顺序，和你常用的 maven、makefile 这类编译和依赖管理工具，去编译项目的原理并无二致。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文深入介绍了基于DFS的拓扑排序算法在Webpack中的应用。首先解释了拓扑排序的重要性和Khan算法在任务排序中的作用。随后通过详细的代码解析，阐述了基于DFS的拓扑排序算法的实现过程。文章还对拓扑排序算法的关键变量进行了解释，并讨论了如何判断有向图中的环路。通过对实际代码的解读，读者能够深入理解DFS算法在拓扑排序中的应用。此外，文章还对两种算法的时间复杂度和空间复杂度进行了比较，并提出了课后作业，引发读者思考。总的来说，本文逻辑清晰，代码分析详细，帮助读者快速了解基于DFS的拓扑排序算法的实现原理及其在Webpack中的具体应用。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《业务开发算法 50 讲》，新⼈⾸单¥59
《业务开发算法 50 讲》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(3)
- 最新
- 精选
- Paul Shan深度优先遍历可以引入颜色的概念，也就是一开始的颜色为白色，遍历的时候颜色为灰色，遍历完成的颜色为黑色。如果遍历过程中发现一个新节点的颜色为灰色，即可判断有环。
作者回复: 是的；其实就是标记出这一轮搜索中的节点，已经搜索过的节点，和还没有搜索的节点。
2022-01-0623 
Amber可不可以提供完整的能运行的例子呢，文章提供的都是片段作者回复: Amber 你好；khan算法的代码可以直接提交到 leetcode 210。 Webpack的代码可以直接参考 npm包的源码 https://www.npmjs.com/package/toposort
2022-01-12
Jump感觉dfs把topsort函数贴出来就可以了2022-04-031
收起评论
