对于前端开发者来说，webpack是不可替代的打包工具。随着项目的逐渐复杂，我们需要更好的方式来理解 webpack 打包生成的资源之间的依赖关系，以便于调试、优化和分析。
这时候，npm包 webpack-assets-info-plugin 就可以派上用场了。本文将介绍该插件的使用方法，帮助大家更好地理解Webpack打包生成的资源依赖。
webpack-assets-info-plugin简介
webpack-assets-info-plugin 是一个Webpack插件，它可以在Webpack打包结束后，将资源的打包信息输出到一个 .json 或 .js 文件中。打包信息包括：每个资源的名称、路径、哈希值、完整URL等等。
安装方式：
npm i webpack-assets-info-plugin -D
webpack-assets-info-plugin使用方法
在 webpack.config.js 的 plugins 数组中添加一条配置：
-- -------------------- ---- -------
----- ----------------------- - --------------------------------------
-------------- - -
-- --- ----
-------- -
--- -------------------------
--------- -------------------------- -- ------
------- ------ -- --------------------------
---
--
--webpack-assets-info-plugin输出格式
webpack-assets-info-plugin 支持两种输出格式：JSON和JS。
在 webpack.config.js 中配置 WebpackAssetsInfoPlugin 的 format 参数可以指定输出格式：
JSON
若输出格式为 JSON，在 webpack-assets-info.json 中会有类似下面的输出：
-- -------------------- ---- -------
-
---------- -
------- --------
-------- -----------
------ -----------------------------------
--------- -------------------------------------------------------------------
----------- -------------------
------ --------------------------------------
--
------------------ -
------- --------
-------- -----------
------ -----------------------------------
--------- -------------------------------------------------------------------
----------- ---------------------------
------ ----------------------------------------------
-
-JS
如果输出格式为 JS，输出内容将生成一个名为 webpack-assets-info.js 的文件，并默认导出一个 JavaScript 对象，其包含与上文中 JSON 相似的内容，如下：
module.exports = {
"main.js": {
// ...
},
"vendors~main.js": {
// ...
}
}可在应用程序内通过 import 或 require 引入该文件，如下：
import assetsInfo from './webpack-assets-info';
示例代码
以下是一个简单的示例，展示如何使用webpack-assets-info-plugin：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------------- - --------------------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- --------------------------
--
-------- -
--- -------------------------
--------- ---------------------------
------- -------
---
--
--总结
webpack-assets-info-plugin 插件能够非常方便地输出Webpack打包后的资源依赖关系，并且支持JSON和JS两种格式。在开发和调试过程中，这对开发者来说是一个非常大的帮助，可以帮助我们更快速地找到一些问题，并优化应用程序的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600563ea81e8991b448e13b4