我可以在webpack开始构建之前获取依赖树吗？

Question

webpack在构建密封之前是否公开了依赖关系树？我已经搜索了整个编译器实例，但没有找到任何关于依赖树的信息。似乎应该有一个隐藏在该对象的某个地方，因为webpack必须知道这棵树是什么，以便稍后输出stats.json。

我已尝试使用dependency-tree npm包，但它不支持我在webpack配置中的一些内容，因此树不完整。

Answer 1

TL; DR：是的，您可以在密封之前访问依赖关系树。

为此，请将以下代码添加到webpack.config.js：

class AccessDependenciesPlugin {
  apply (compiler) {
    compiler.hooks.compilation.tap('AccessDependenciesPlugin', compilation => {
      compilation.hooks.finishModules.tap('AccessDependenciesPlugin', modules => {
        /*
        |---------------------------------------------------
        | Here we go, `modules` is what we're looking for!
        |---------------------------------------------------
        */
      })
    })
  }
}


module.exports = {
  // ...
  plugins: [
    new AccessDependenciesPlugin()
  ]
}

有关详细信息，请参阅以下说明。

我们正在寻找的钩子

我们可以使用finishModules编译钩子访问预先密封的依赖树。

我们怎么知道？

由于webpack hook文档非常简单（至少可以说），我们必须阅读webpack源代码以确保它是我们正在寻找的：

编译器在密封依赖关系树之前做的最后一件事是“完成”它。

• 这发生在Compiler.js, line 492
中

完成依赖树提供了编译的钩子。

• finishModules hook in the webpack docs
• 正在Compilation.js, line 828
中调用该挂钩

代码示例

我们创建了一个名为AccessDependenciesPlugin的插件：

// Basic webpack plugin structure
class AccessDependenciesPlugin {
  apply (compiler) {

  }
}

要使用编译钩子，我们需要首先访问compilation对象。我们使用compilation hook：

来做到这一点

class AccessDependenciesPlugin {
  apply (compiler) {
    compiler.hooks.compilation.tap('AccessDependenciesPlugin', compilation => {
      // We have access to the compilation now!
    })
  }
}

现在，我们点按finishModules的{​​{1}}挂钩：

compilation

该挂钩的class AccessDependenciesPlugin { apply (compiler) { compiler.hooks.compilation.tap('AccessDependenciesPlugin', compilation => { compilation.hooks.finishModules.tap('AccessDependenciesPlugin', modules => { // Here we go, `modules` is what we're looking for! }) }) } } 参数是一个webpack模块数组，包含它们的依赖关系以及基本上所有其他可用数据。

最后但并非最不重要的是，我们需要将插件添加到我们的webpack配置中：

modules

我们已经完成了。

希望这有帮助。

奖金内容：webpack 3

评论中的每个请求：这是webpack 3的旧版插件系统的module.exports = { plugins: [ new AccessDependenciesPlugin() ] } 版本。

AccessDependenciesPlugin

Answer 2

也许来自this GitHub thread的代码行可以帮助你：

“使用webpack --profile --json > stats.json

进行编译

（node.js API：{ profile: true }和stats.toJson()）

转到http://webpack.github.io/analyse/#modules

加载您的统计信息文件（未上传，分析工具是仅限客户端的工具）。

等一下，直到图表稳定下来。“

如果这不是你所需要的，那么我会研究@Loilo的答案 - 更复杂，但可能更多你需要的。