如何通过Vite生成含自定义内容及哈希资源路径的manifest.json？

可以通过Vite的原生构建钩子实现，无需依赖第三方插件，以下是具体方案：

方法：利用writeBundle钩子自定义生成JSON #

Vite的writeBundle钩子会在构建完成、所有文件写入输出目录后触发，此时能准确获取带哈希的JS/CSS文件路径，再生成包含自定义字段的JSON文件。

示例配置（vite.config.js） #

import { defineConfig } from 'vite';
import fs from 'fs';
import path from 'path';

export default defineConfig({
  build: {
    outDir: 'dist',
    rollupOptions: {
      input: {
        main: './src/main.js', // 替换为你的项目入口文件路径
      },
    },
  },
  plugins: [
    {
      name: 'custom-manifest-generator',
      writeBundle(outputOpts, bundle) {
        // 初始化路径变量
        let jsScript = '';
        let cssScript = '';

        // 遍历构建产物，匹配入口的JS和CSS文件
        Object.entries(bundle).forEach(([fileName, chunkInfo]) => {
          // 匹配入口JS（可根据项目入口名调整判断逻辑）
          if (chunkInfo.isEntry && fileName.endsWith('.js')) {
            jsScript = fileName;
          }
          // 匹配对应CSS文件（Vite会为入口生成关联的CSS chunk）
          if (chunkInfo.type === 'asset' && fileName.endsWith('.css') && chunkInfo.name?.includes('main')) {
            cssScript = fileName;
          }
        });

        // 构建自定义JSON内容
        const customManifest = {
          jsScript,
          cssScript,
          anotherKey: 'myOwnValue'
        };

        // 写入到输出目录
        fs.writeFileSync(
          path.resolve(outputOpts.dir, 'custom-manifest.json'),
          JSON.stringify(customManifest, null, 2)
        );
      },
    },
  ],
});

关键说明 #

1. writeBundle钩子：直接对接Vite构建流程，在所有文件生成完成后触发，能确保拿到的哈希路径完全准确。
2. 文件匹配逻辑：可根据项目结构调整判断条件（比如入口文件名、文件类型），保证获取到正确的目标文件路径。
3. 自定义字段扩展：可自由向customManifest对象添加任意自定义键值对，满足个性化需求。

如果需要保留Vite默认生成的manifest.json（包含所有文件的映射关系），可以开启build.manifest: true，直接从默认manifest中读取路径，实现更简洁：

writeBundle(outputOpts) {
  const defaultManifest = JSON.parse(fs.readFileSync(path.resolve(outputOpts.dir, 'manifest.json'), 'utf-8'));
  const mainEntry = defaultManifest['main'];
  
  const customManifest = {
    jsScript: mainEntry.file,
    cssScript: mainEntry.css?.[0] || '',
    anotherKey: 'myOwnValue'
  };

  fs.writeFileSync(
    path.resolve(outputOpts.dir, 'custom-manifest.json'),
    JSON.stringify(customManifest, null, 2)
  );
}

内容的提问来源于stack exchange，提问作者cyber_fear