前言
在前端开发中，使用 webpack 是非常常见的。而在使用 webpack 进行打包时，我们经常需要得到一个文件清单，以便于我们在部署时使用。如何生成这样的文件清单呢？在这篇文章中，我们将会介绍一个非常好用的 npm 包，它就是 webpack-manifest-resource-plugin。
webpack-manifest-resource-plugin 简介
webpack-manifest-resource-plugin 是一个 webpack 插件，它可以在打包时生成一个 JSON 文件，其中包含所有打包生成的文件的信息。包括文件名、文件路径、文件大小、文件 hash 等等信息。这个 JSON 文件非常有用，因为它可以帮助我们在部署时非常方便地管理我们的静态资源。
安装
我们可以通过 npm 安装 webpack-manifest-resource-plugin：
npm install webpack-manifest-resource-plugin --save-dev
配置
下面是 webpack.config.js 中使用 webpack-manifest-resource-plugin 的配置：
-- -------------------- ---- -------
----- ----------------------------- - --------------------------------------------
-------------- - -
-- ---
-------- -
--- -------------------------------
------- ----------------
------- -------------- -
------ -------------------------- -- ------ ---- --
--
---- -------------- -
--------- - ------------------------------------------ -- ------ --- --------
------ -----
-
--
-
-- ---
-其中，我们可以使用以下的选项：
output（必填）: 指定清单文件的输出位置。filter（可选）: 一个函数，可以过滤出需要在清单中添加的文件。map（可选）: 一个函数，可以用来转换每个文件的信息在清单中的格式。
以上的选项都非常常用，尤其是 map 参数，它可以帮助我们在部署时非常方便地使用 CDN。
示例代码
-- -------------------- ---- -------
----- ------- - -------------------
----- ----------------------------- - --------------------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
-------- -
--- -------------------------------
------- ----------------
------- -------------- -
------ --------------------------
--
---- -------------- -
--------- - ------------------------------------------
------ -----
-
--
-
--总结
在本文中，我们介绍了一个非常实用的 webpack 插件 webpack-manifest-resource-plugin。它可以帮助我们在打包时生成一个文件清单，方便我们在部署时管理我们的静态资源。这个插件十分容易使用，也非常常用。如果你正在使用 webpack 进行打包，那么我们强烈推荐你使用这个插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/79968