在构建完成前,webpack是否会公开依赖树?我已经在编译器实例中搜索了很久,但没有找到关于依赖树的任何信息。看起来应该有一个隐藏在该对象中的依赖树,因为webpack必须知道这个树才能后期输出stats.json。
我尝试使用dependency-tree
npm包,但它不支持我的webpack配置中的某些东西,因此该树是不完整的。
在构建完成前,webpack是否会公开依赖树?我已经在编译器实例中搜索了很久,但没有找到关于依赖树的任何信息。看起来应该有一个隐藏在该对象中的依赖树,因为webpack必须知道这个树才能后期输出stats.json。
我尝试使用dependency-tree
npm包,但它不支持我的webpack配置中的某些东西,因此该树是不完整的。
简短概述: 是的,你可以在依赖树被封闭之前访问它。
要做到这一点,请将以下代码添加到您的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 源代码来确定它是否是我们要寻找的内容:
在封装依赖树之前,编译器执行的最后一件事是"完成"它。
完成依赖树为编译提供了一个钩子。
我们创建了一个名为 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 的旧插件系统的 AccessDependenciesPlugin
版本。
class AccessDependenciesPlugin {
apply (compiler) {
compiler.plugin('compilation', compilation => {
compilation.plugin('finish-modules', modules => {
/*
|---------------------------------------------------
| Here we go, `modules` is what we're looking for!
|---------------------------------------------------
*/
})
})
}
}
也许 这个GitHub线程 中的代码行能帮助你:
"使用 webpack --profile --json > stats.json
进行编译
( node.js API: { profile: true }
和 stats.toJson()
)
前往 http://webpack.github.io/analyse/#modules
加载你的状态文件(它没有上传,分析工具只是一个客户端工具)。
稍等片刻,直到图表稳定下来。"
如果这不是你需要的,那么我建议你看看 @Loilo 的回答 - 更复杂,但可能更符合你的需求。