webpack4循环依赖:UnhandledPromiseRejectionWarning: Error: Cyclic dependency

webpack，循环依赖，就会出现

(node:80067) UnhandledPromiseRejectionWarning: Error: Cyclic dependency

at vist ***** toposort/index.js:35:13)

at Function.toposort [as array]

at Function.toposort [as array] 

at HtmlWebpackPlugin.sortChunks

UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)

(node:80067) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

UnhandledPromiseRejectionWarning: Error: Cyclic dependency

Toposort

是一个DAG排序库，路径依赖算法。官方描述：Sort directed acyclic graphs，

DAG排序算法：http://www.csie.ntnu.edu.tw/~u91029/DirectedAcyclicGraph.html

反正我是搞不懂，就只有从，HtmlWebpackPlugin.sortChunks 解决（当然，排除还是从底下往上看

webpack中学习到的拓扑排序:https://blog.csdn.net/liangklfang/article/details/56681375?locationNum=6&fps=1

HtmlWebpackPlugin

网上已经有解决方案，大体如下

1. 升级HtmlWebpackPlugin,至最新版本

   npm i --save-dev html-webpack-plugin@next
   

   我的从^3.2.0  ----》^4.0.0-beta.11

2. 修改chunksSortMode的属性，我原来chunksSortMode设置的是dependency，作用是按照不同文件的依赖关系来排序。问题就在这里，把它设置为none就行了

   new HtmlWebpackPlugin({chunksSortMode: 'none'})

   但是，chunks决定了记载顺序，如果设置为none页面加载顺序就不能保证了，各种花式出错在所难免。

细说chunksSortMode

这个选项决定了 script 标签的引用顺序。默认有四个选项，'none', 'auto', 'dependency', '{function}'。

• 'dependency'  按照不同文件的依赖关系来排序。

• 'auto' 默认值

• 'none'  

• {function}  不懂

• 'dependency'  按照不同文件的依赖关系来排序  

循环依赖互相引用之殇

webpack的头部启动代码中，通过闭包中的installedModules对象，将模块名或者id作为对象的key来缓存各个模块的export的值，通过判断installedModules上是否缓存了对应模块的key来判断是否已经加载了模块

但存在一个问题：当模块还处于第一次执行中的状态时，如果碰到相互引用的情况的话，webpack可能会认为一个没有完全加载完成的模块已经加载完了

未完待续……

参考资料：

https://blog.csdn.net/alanfancy/article/details/84023940

https://www.jianshu.com/p/db133e1f5a00

https://www.cnblogs.com/thymeleaf/p/10248708.html

转载本站文章《webpack4循环依赖:UnhandledPromiseRejectionWarning: Error: Cyclic dependency》,
请注明出处：https://www.zhoulujun.cn/html/tools/Bundler/webpack/2020_0417_8388.html