之前做了一个webpack依赖收集插件,依靠dependent递归去查找,但是总是有情况被漏过,分析一下官方的插件,看他怎么生成依赖树。
插件生成的最终效果图如下:
对于插件的开发,webpack提供了“详细”的开发文档,此处不再记录。
这个插件做的工作本质就是分析在compiler.plugin('done', function(stats));
时传入的参数。Stats
是webpack的一个统计类。传入的实例如下图。
对Stats实例调用toJson()
方法,获取格式化信息。toJson方法支持的参数参考源码
使用默认参数,即可获取到的统计json如下图:
这个插件就是从stats.json中获取chunks
然后最终使用Canvas画图。具体代码位于analyzer.js
中的getViewerData
方法。