Constant asset filenames with hashes in manifest file in ViteJS

Question

I need to bundle JS/CSS files with ViteJS. Generated file names must be constant but I need hashes for those files in manifest file.

Sample folder structure:

/public/build/js/app.js
/public/build/css/app.css
/public/build/.vite/manifest.json

manifest.json Content sample:

{
   "/js/app.js": "/js/app.js?id=3a21c6f9face25230336",
   "/css/app.css": "/css/app.css?id=04dde085bbd4f32a4349"
}

How can I configure this in vite.config.js?

I tried :

export default defineConfig({
   build: {
       // generate .vite/manifest.json in outDir
       manifest: true,

       outDir: './../../../public/build',

       rollupOptions: {
          output: {
             entryFileNames: `assets/[name].js`,
             chunkFileNames: `assets/[name].js`,
             assetFileNames: `assets/[name].[ext]`
          },
       },
   }
})

This generates filenames without hash but hashes also missed in manifest file.

Answer 1

So you want hashes for filenames in manifest, but no hashes for actual files? One solution is to generate files with hashes, run a script that iterates over the manifest entries and renames your files, trimming the hash. This can probably be done as a vite plugin.

---

If you want both manifest entries and actual files to have a hash, just add [hash] to these entries in the vite config:

rollupOptions: {
    output: {
        entryFileNames: `assets/[name]-[hash].js`,
        chunkFileNames: `assets/[name]-[hash].js`,
        assetFileNames: `assets/[name]-[hash].[ext]`
    },
},