webpack-manifest-plugin 是一个 Webpack 插件，用于生成一个 "manifest" 文件，该文件包含了打包后的文件名与文件路径的映射关系。这个插件对于前端项目的构建非常有用，特别是在需要动态加载 JS/CSS 资源时。
安装
使用 npm 进行安装：
npm install --save-dev webpack-manifest-plugin
配置
在 Webpack 的配置文件中引入该插件，并将其实例化：
const ManifestPlugin = require('webpack-manifest-plugin'); module.exports = { // ... plugins: [ new ManifestPlugin() ] };
在默认情况下，该插件会生成一个 manifest.json 文件，并存储在 Webpack 输出目录下。如果需要指定输出文件名和路径，可以在插件参数中进行配置：
new ManifestPlugin({ fileName: 'my-manifest.json', basePath: '/app/' })
选项
webpack-manifest-plugin 提供了一些选项来控制生成的 manifest 文件的内容和格式。
filter
通过给定的函数过滤出需要包含在 manifest 文件中的资源。该函数接受一个资源的绝对路径作为参数，返回一个布尔值，表示该资源是否需要被包含。
例如，以下配置将只包含以 /assets/ 目录开头的资源：
new ManifestPlugin({ filter: (file) => file.startsWith('/assets/') })
map
对于每个资源，该插件默认会生成一个名为 "name" 的属性和一个名为 "path" 的属性。其中，"name" 表示资源的文件名（不包含路径），"path" 表示资源在 Webpack 输出目录下的相对路径。
如果需要自定义这些属性名，可以通过 "map" 选项进行配置。例如：
new ManifestPlugin({ map: (file) => { return { name: file.name, myPath: '/static/' + file.path }; } })
serialize
指定如何将 manifest 对象序列化为字符串。该函数接受一个对象作为参数，返回一个字符串表示该对象。
以下是一个使用 JSON 格式的示例：
new ManifestPlugin({ serialize: (manifest) => JSON.stringify(manifest, null, 2) })
generate
指定如何生成 manifest 文件的内容。该函数接受一个对象作为参数，该对象包含了所有需要包含在 manifest 中的资源信息，返回一个表示 manifest 内容的对象。
以下是一个示例，该示例将所有资源的名称转换为大写，并添加一个名为 "size" 的属性，表示每个资源的大小：
-- -------------------- ---- ------- --- ---------------- --------- ------ ------ -- - ----- -------- - --- ------------------ -- - --------------------------------- - - ----- ---------- ----- --------- -- --- ------ --------- - --展开代码
示例代码
以下是一个使用 webpack-manifest-plugin 的简单示例。
webpack.config.js:
-- -------------------- ---- ------- ----- -------------- - ----------------------------------- -------------- - - ------ ----------------- ------- - --------- -------------------------- ----- --------- - ------- -- -------- - --- ---------------- - --展开代码
index.js:
import { getUserName } from './api'; const user = getUserName(); console.log(`Hello, ${user}!`);
api.js:
export function getUserName() { return 'world'; }
运行 webpack 命令后，将生成一个名为 "manifest.json" 的文件：
{ "index.js": "index.77a46d8d5837d4ef97b1.js", "mainfest.json": "manifest.b0e1923a9c9afc14f5cd.json", "api.js": "api.2f6a65bf443267e3695e.js" }
在浏览器中打开 index.html 文件后，可以看到以下输出：
``
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/47459
