捆绑前如何修改需求图(输出优化)

时间:2019-04-10 15:30:37

标签: javascript node.js webpack

由于找不到适合自己需要的配置,因此我正在编写一个自定义Webpack插件,以优化模块/依赖关系在输出文件中的分布。

在Webpack开始捆绑之前,有什么方法可以访问需要图/依赖关系树并对其进行修改吗?

我设法将插件附加到Compiler和Compilation实例中的不同钩子上,但是Webpack文档太糟糕了,并且这个对象很大。

我需要的是避免代码在输出文件中重复出现,不分割它们... (只是聪明地分配块)

例如:

如果我有3个文件: a.js b.js c.js

每个都有自己的静态require语句和各自的依赖关系(此文件之间存在共同的依赖关系)。我需要Webpack依次解析和包含每个模块及其依赖项,而不必重复已插入的模块。

所以 a.js 将包含其自己的模块和依赖项,然后 b.js 忽略已插入的模块和依赖项。等等。

我将不胜感激,因为我整天都在试图自己弄清楚这一点。

1 个答案:

答案 0 :(得分:0)

以防万一有人遇到同样的问题,我设法编写了一个插件(您可以找到HERE)来解决它。

关于访问需求图,并不是那么简单。我必须深入研究Webpack的源代码,以了解如何使用块,模块,资产等。

假设您已经了解Webpack Plugins的基础知识,我建议您探索Webpack's lib中的Chunk.js和Module.js(Compiler.js和Compilation.js稍微复杂一些,但是它们还包含有用的方法)。 (请参阅Webpack HOOKS以了解如何访问编译器,编译,模块和块实例。)