最常用、最稳定的方式是使用 webpack-manifest-plugin 插件生成 manifest.json。它输出纯前端可读的资产映射表，支持自定义 generate 钩子、CDN 集成及元信息注入，与 Webpack 运行时 manifest.bundle.js 职责分离。
Webpack 在生产打包时自动生成资源清单（manifest.json）文件，最常用、最稳定的方式是使用 webpack-manifest-plugin 插件。它专为生成映射源文件名与构建后带哈希文件名的 JSON 清单而设计，不依赖 Webpack 内部 manifest bundle（即 webpackBootstrap），而是输出一个纯前端可读、部署友好的 asset 映射表。
安装与基础配置
在项目中安装插件：
npm install --save-dev webpack-manifest-plugin
在 webpack.config.js 的生产环境配置中加入插件（注意：仅在 mode: 'production' 时启用）：
立即学习“Java免费学习笔记（深入）”；
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
module.exports = {
mode: 'production',
plugins: [
new WebpackManifestPlugin({
fileName: 'manifest.json', // 输出路径默认在 output.path 下
publicPath: '', // 可选，用于添加前缀如 '/static/'
})
]
};
控制清单内容格式
通过 generate 钩子函数，可以完全自定义输出结构。例如只保留哈希文件名映射，去掉路径前缀：
- 读取原始文件列表（
files），每个元素含name（输入名）、path（输出路径）、isInitial等属性 - 返回 plain object，键为源文件逻辑名（如
'main.js'），值为最终输出路径（如'main.abc123.js'） - 常见精简写法：
new WebpackManifestPlugin({
generate: (seed, files) => {
return files.reduce((manifest, file) => {
manifest[file.name] = file.path;
return manifest;
}, {});
}
})
配合 CDN 或静态服务使用
生成的 manifest.json 可直接被后端或部署脚本消费，例如：
- Node 脚本读取该文件，批量上传对应资源到 OSS / S3
- Nginx/Apache 根据清单重写请求，实现「无版本号 URL → 带哈希真实文件」的透明映射
- 前端运行时动态加载资源（如微前端场景中按需拉取子应用 entry）
- 构建后校验完整性，比对 source 和 dist 文件数量/名称一致性
注意事项
避免和 Webpack 自身的 manifest bundle 混淆：Webpack 运行时的 manifest.bundle.js（含 modules/installedChunks）是执行用的引导代码，不是供部署使用的资源清单。本方案生成的是独立的、人类可读的 JSON 文件，两者职责不同，可共存。
若需注入版本号、Git commit、构建时间等元信息，可在 generate 函数中手动追加字段，例如 manifest.buildTime = new Date().toISOString()。
