29-尚硅谷-webpack从入门到精通-自定义webpack：生成依赖关系图

上节呢，我们已经给大家啊捋清楚了所的依赖啊，找到所有的依赖了，把你的这个models，那么这个this models的这个依赖呢，它现在呢，并不能够很好的为我们接下来的一个东西去服务，接下来我们去展示，去服务，所以接下来我们要对这个依赖的再进行处理，把它变成一个更好的一个依赖关系表啊，OK，所以呢，接下来我们要讲下去，讲起讲依赖。整理成好更好的一个依赖于关系表。好，那么怎样是更好的呢？所以我们来给大家举个例子。我们把它希望整合成哪一个对象，它是之前的时个数组嘛，对吧，我希望整合成对象，对象里面的那K呢，作为我们的这个稳件路径呢，作为这个key值呢，有它的代码啊，Code code的就是文件的具体代码了，然后呢，还有dependences啊，文件的一些依赖啊，是个对象对象里面的，比方说如果是一代J呢，就用l.JS作为作为它的一赖倍，对吧。

然后呢，它值的是它的一个绝路径，绝路径啊等等，那么后面的可能还有其他文件，比如说edit这个文件，那么它呢，它的code的对吧，是是叉叉，然后呢，它的一代，当然呢，我们现在显示没有一代，所它一代呢是空对项，我希望它整合成这样的对象的方式。那么是数组，我希望变成个对象，这个时候呢，就可以用上我们数组的一个方法叫reduce，我们通过reduce去整理它。哎，This mo.reduce方法我们去处理reduce呢，接受两个参数，第一个是个函数，第二个是初始化值，因为我们要返回是空对象，所以初始化空对象啊，因为我们返回对象，所以初始化空对象，那么编定的第一项值呢，是S值的返回值，那么我们叫graph。嗯，OK，那么第二个呢是边且边界值我们叫模好，我们希望返回值呢，他们每次要累加对吧，我们呢，就要把之前的值呢给展开，在这在这基础上呢，再添加新的值，新的值呢K呢是module five pass值的话呢，有扣的，扣的就是module点扣的啊。

那么还有一个叫做dependcies啊，就是Mo dependcs。对吧，因为模上面呢，就是这三东西，Pass code和depends，这三个东西呢，就是我们之前上一步这个BUILD3个的返回值，所以呢，我把它重新整理了一下，那么我们取个变量再去保存它，那么就叫做graph。嗯。那么叫depend啊，Dependency pro吧，叫做依赖图表啊，OK，好，我们呢，打印看一下，看一下它到底可不靠谱。好了，我们来打开，我们来运行看效果。

好，往上走啊，那们看到呢，你看看呢，它打印出来一个对象，对象里面的code有我们的depends OK，再往上走，它呢，又打印了一个A，对吧，再往上走，我们能看到它呢，上面是1S，所以三个文件呢，我最终都整合成了一种对象的方式，那么后续呢，我就能通过这个对象来去更好的输出我们的生产资源。