webpack-manifest-plugin 是一个 Webpack 插件，用于生成一个 "manifest" 文件，该文件包含了打包后的文件名与文件路径的映射关系。这个插件对于前端项目的构建非常有用，特别是在需要动态加载 JS/CSS 资源时。
安装
使用 npm 进行安装：
--- ------- ---------- -----------------------
配置
在 Webpack 的配置文件中引入该插件，并将其实例化：
----- -------------- - -----------------------------------
-------------- - -
-- ---
-------- -
--- ----------------
-
--在默认情况下，该插件会生成一个 manifest.json 文件，并存储在 Webpack 输出目录下。如果需要指定输出文件名和路径，可以在插件参数中进行配置：
--- ---------------- --------- ------------------- --------- ------- --
选项
webpack-manifest-plugin 提供了一些选项来控制生成的 manifest 文件的内容和格式。
filter
通过给定的函数过滤出需要包含在 manifest 文件中的资源。该函数接受一个资源的绝对路径作为参数，返回一个布尔值，表示该资源是否需要被包含。
例如，以下配置将只包含以 /assets/ 目录开头的资源：
--- ---------------- ------- ------ -- --------------------------- --
map
对于每个资源，该插件默认会生成一个名为 "name" 的属性和一个名为 "path" 的属性。其中，"name" 表示资源的文件名（不包含路径），"path" 表示资源在 Webpack 输出目录下的相对路径。
如果需要自定义这些属性名，可以通过 "map" 选项进行配置。例如：
--- ----------------
---- ------ -- -
------ -
----- ----------
------- ---------- - ---------
--
-
--serialize
指定如何将 manifest 对象序列化为字符串。该函数接受一个对象作为参数，返回一个字符串表示该对象。
以下是一个使用 JSON 格式的示例：
--- ---------------- ---------- ---------- -- ------------------------ ----- -- --
generate
指定如何生成 manifest 文件的内容。该函数接受一个对象作为参数，该对象包含了所有需要包含在 manifest 中的资源信息，返回一个表示 manifest 内容的对象。
以下是一个示例，该示例将所有资源的名称转换为大写，并添加一个名为 "size" 的属性，表示每个资源的大小：
--- ----------------
--------- ------ ------ -- -
----- -------- - ---
------------------ -- -
--------------------------------- - -
----- ----------
----- ---------
--
---
------ ---------
-
--示例代码
以下是一个使用 webpack-manifest-plugin 的简单示例。
webpack.config.js:
----- -------------- - -----------------------------------
-------------- - -
------ -----------------
------- -
--------- --------------------------
----- --------- - -------
--
-------- -
--- ----------------
-
--index.js:
------ - ----------- - ---- -------- ----- ---- - -------------- ------------------- -----------
api.js:
------ -------- ------------- - ------ -------- -
运行 webpack 命令后，将生成一个名为 "manifest.json" 的文件：
- ----------- -------------------------------- ---------------- ------------------------------------- --------- ----------------------------- -
在浏览器中打开 index.html 文件后，可以看到以下输出：
``
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/47459