javascript - 我可以在 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()
  ]
}

更多详情，请参阅下面的说明。

---

我们正在寻找的钩子(Hook)

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

---

我们怎么知道？

由于 webpack 钩子(Hook)文档非常少(至少可以这么说)，我们必须阅读 webpack 源代码以确保它是我们正在寻找的:

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

• 这发生在 Compiler.js, line 492

完成依赖树为编译提供了一个钩子(Hook)。

• finishModules hook in the webpack docs
• 钩子(Hook)在 Compilation.js, line 828 中被调用

---

代码示例

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

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

  }
}

要使用编译钩子(Hook)，我们需要首先访问 compilation 对象。我们使用 compilation 钩子(Hook)来做到这一点:

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

现在我们点击compilation的finishModules钩子(Hook):

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

该钩子(Hook)的 modules 参数是一个 webpack 模块的数组，其中包含它们的依赖关系以及关于它们的所有其他可用数据。

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

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

我们完成了。 🎉

---

希望这会有所帮助。

---

奖励内容:webpack 3

根据评论中的要求:这是 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!
        |---------------------------------------------------
        */
      })
    })
  }
}