在前端开发中，我们通常需要使用 Webpack 来打包我们的代码，并生成一个清单文件，用于管理入口文件、静态资源等。webpack-manifest-generator 就是一个可以生成清单文件的 npm 包，本文将详细介绍其使用方法。
安装
在使用 webpack-manifest-generator 之前，需要先安装 Node.js 和 NPM。安装完成后，在终端中执行以下命令安装 webpack-manifest-generator：
npm i webpack-manifest-generator --save-dev
配置
在 webpack.config.js 中添加 plugin：
-- -------------------- ---- -------
----- ----------------------- - -------------------------------------
-------------- - -
-- --- ----- --------------
-------- -
-- -------- -------- ----
--- -------------------------
--------- ----------------
--------- ------------------
---
-
-在 plugins 中添加 ManifestGeneratorPlugin，该插件接收两个参数：
fileName: 清单文件名，默认为 manifest.jsonbasePath: 静态文件路径基础目录，默认为 '/'
示例代码
下面是一个简单的示例代码，用于演示 webpack-manifest-generator 的使用方法。
-- -------------------- ---- -------
----- ---- - ---------------
----- ----------------------- - -------------------------------------
-------------- - -
------ -
---- --------------------
------- --------------------
--
------- -
--------- -----------------------------
----- ----------------------- --------
----------- -----------------
--
-------- -
--- -------------------------
--------- ----------------
--------- ------------------
---
-
-在以上配置中，我们为入口文件添加了两个文件：'./src/js/index.js' 和 './src/js/vendor.js'，并为输出的 js 文件名添加了哈希值，以保证其唯一性。ManifestGeneratorPlugin 生成的 manifest.json 文件将在输出文件的 publicPath 路径下，即 '/public/assets/'。
结语
webpack-manifest-generator 是一个非常有用的 npm 包，可以帮助我们简化 Webpack 打包工作。通过本文的介绍，您已经了解了 webpack-manifest-generator 的使用方法，希望本文能够对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671058dd3466f61ffdd79