编译过程中，webpack生成的静态资源都需要被浏览器加载，而加载这些文件的方式就是通过资源地址。为了正确地处理这些资源地址，我们需要生成一个清单(manifest)文件。清单文件包含了webpack编译后生成的每个资源的完整的文件路径。在这个过程中，toxic-webpack-manifest-plugin是个不错的选择。
toxic-webpack-manifest-plugin是一个webpack插件，它可以帮助我们生成manifest文件。在本文中，我们将会详细的介绍如何使用这个插件。
安装
首先，我们需要安装toxic-webpack-manifest-plugin。使用npm：
--- ------- ---------- -----------------------------
使用
在webpack配置文件中添加如下内容：
----- - ------------------- - - ----------------------------------------
-------------- - -
-- ---
-------- -
--- ---------------------
--------- ----------------
--------- ----
----------- ---------
-- ---------
---------- -----
--------- -----
------- ---- -- -----------------
---- ---- -- -
--------- - -------------- - ---------
------------ - -----------------------
------ ----
-
--
-
-- ---
-插件的配置项有：
fileName：manifest文件的名称，默认为manifest.json。basePath：存放manifest文件的目录。如果在webpack配置中使用了output.path选项，则可以使用路径相对于该目录的路径。默认值是/。publicPath：资源文件的公开路径。例如，如果资源被部署在服务器上的/build目录下，这里设置为build/。isChunked：是否将chunk信息放入manifest文件中。默认为true。isPretty：是否以美观的形式格式化manifest文件的JSON内容。默认为false。filter：用于过滤需要被添加到manifest的文件。默认值为file => file.isInitial()，只包含初始资源。可以修改file => true，包含所有文件。map：用于修改每个文件对象的保留到manifest的字段。
示例代码
下面是一个完整的示例代码，可以帮助你更好地理解如何使用toxic-webpack-manifest-plugin：
----- ---- - ---------------
----- - ------------------- - - ----------------------------------------
-------------- - -
----- --------------
------ -
----------------------- ---------------
--
------- -
----- ----------------------- --------
--------- --------------------------
----------- -----
--
-------- -
--- ---------------------
--------- ----------------
--------- ----
----------- --------
---------- -----
--------- -----
------- ---- -- -----
---- ---- -- -
--------- - -------------- - ---------
------ ----
-
---
-
-结论
如你所见，使用toxic-webpack-manifest-plugin是非常简单的。它可以在webpack的编译过程中生成清单文件，使得浏览器能够正确地加载静态资源。而在这个过程中，toxic-webpack-manifest-plugin为我们提供了很多的可配置项，使得我们可以自定义清单文件的生成。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005668681e8991b448e2b3e