前言
在前端开发过程中，我们经常需要使用 webpack 来构建项目，而在 webpack 的构建过程中，我们通常需要用到 webpack-manifest-plugin 来生成一个 manifest.json 文件，用于将项目中各个模块的 chunk 名称和对应的文件路径映射起来。但是，在实际项目中，我们可能需要将其他的信息也放到这个 manifest.json 文件中，这时候我们就需要使用 webpack-manifest-extra-plugin。
webpack-manifest-extra-plugin 介绍
webpack-manifest-extra-plugin 是一个用于将额外的信息加入到 webpack-manifest-plugin 生成的 manifest.json 文件中的插件，它可以方便地将任何数据添加到 manifest.json 文件中，扩展了原有的 manifest.json 文件的功能。
安装
要使用 webpack-manifest-extra-plugin，我们首先需要在项目中安装它，可以通过以下命令来进行安装：
npm install webpack-manifest-extra-plugin --save-dev
使用
安装完成后，我们需要在 webpack 配置文件中进行配置。在 plugins 配置项中，加入 webpack-manifest-extra-plugin 的实例即可。举个例子：
-- -------------------- ---- -------
----- ------------------- - -----------------------------------------
-------------- - -
-- ---
-------- -
--- ---------------------
---------------- -----
-------- -
-------- -------
-
--
--
-- ---
--这样配置后，就会在 manifest.json 文件中加入一个名为 version 的字段，并且对应的值为 1.0.0。
plugin 配置项
webpack-manifest-extra-plugin 的配置项如下：
writeToFileEmit：一个布尔值，用于指示是否在 webpack 构建结束时，将 manifest.json 文件写入文件系统。默认为true。filename：一个字符串，用于指定输出的 manifest.json 文件的文件名。默认为'manifest.json'。entries：一个对象，用于指定需要添加到 manifest.json 文件中的额外信息。例如：
{
entries: {
version: '1.0.0',
buildTime: new Date(),
gitHash: child_process.execSync('git rev-parse HEAD').toString().trim()
}
}这样配置后，就会在 manifest.json 文件中分别加入名为 version、buildTime、gitHash 的字段，并且对应的值为 1.0.0、当前构建时间、当前 git commit hash。
简单示例
下面是一个简单的示例，演示如何使用 webpack-manifest-extra-plugin，在 manifest.json 文件中加入一个名为 buildTime 的字段，并且对应的值为当前构建时间：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- -------------- - -----------------------------------
----- ------------------- - -----------------------------------------
-------------- - -
------ -
----- -----------------
------- ----------
--
------- -
--------- --------------------------
----- ----------------------- -------
--
------------- -
------------- -----
------------ -
------- -----
-
--
-------- -
--- -------------------------
--- -----------------
--- ---------------------
---------------- -----
-------- -
---------- --- ------
-
--
-
--这样配置后，我们就可以在构建完成后，在 manifest.json 文件中看到一个名为 buildTime 的字段，并且对应的值为当前构建时间。
结论
在实际项目中，我们经常需要将额外的信息加入到 manifest.json 文件中，以方便我们进行一些定制化的操作。webpack-manifest-extra-plugin 可以帮助我们方便地将任何数据添加到 manifest.json 文件中，扩展了原有的 manifest.json 文件的功能，使用起来非常简单。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671058dd3466f61ffdd78