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

【问题标题】：Can I get the dependency tree before webpack starts to build?我可以在 webpack 开始构建之前获取依赖树吗？
【发布时间】：2018-05-12 10:24:12
【问题描述】：

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

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

【问题讨论】：

这个问题，按照目前的表述，不太可能得到好的答案。它看起来像一个 XY 问题，但问题并没有说明获取依赖树应该解决什么问题。我在使用 webpack 时遇到过很多情况，在这些情况下，获取树可能对解决问题很有用，但结果证明没有必要。所以有一整套问题的答案是“你不需要树，这就是你如何在没有它的情况下做 Y”。还有一个很大的可能性是，答案是不可能得到一棵树为了做Y。
@PetrAveryanov 你在那里看到的不满足获得“依赖关系树在 webpack 开始构建之前”，如这里提出的问题的标题中所指定，或者“公开依赖关系树在构建被密封之前”，如问题正文中所指定。该问题中显示的是如何在 webpack 完全构建完成后获取依赖树。

标签： javascript node.js webpack tree

【解决方案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 钩子文档非常少（至少可以这么说），我们必须阅读 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 钩子来做到这一点：

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

现在我们点击compilation的finishModules钩子：

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!
      })
    })
  }
}

该钩子的modules 参数是一组 webpack 模块及其依赖项以及基本上所有其他可用数据。

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

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

我们完成了。 ?

希望这会有所帮助。

奖励内容：webpack 3

根据 cmets 中的请求：这是 webpack 3 遗留插件系统的 AccessDependenciesPlugin 版本。

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

【讨论】：

有没有办法对 webpack 3 做同样的事情？我看到这个钩子仅适用于 webpack 4。
据我所知，该钩子已经存在于 webpack 3 中（虽然在 kebab-case 中，当时钩子的访问方式与上述不同）：github.com/webpack/webpack/blob/webpack-3/lib/…
@SubhenduKundu 我已经在我的原始答案中添加了一个与 webpack 3 兼容的插件版本。

【解决方案2】：

也许this GitHub thread 的那行代码会帮助你：

"用webpack --profile --json > stats.json编译

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

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

加载您的统计文件（它没有上传，分析工具是一个客户端专用工具）。

稍等片刻，直到图表稳定下来。”

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

【讨论】：