Options for assets building without adding hash

[FateRiddle]

All referenced assets, including those using absolute paths, will be copied to the dist folder with a hashed file name in the production build.

I'm trying to make a library builder out of create-vite-app, and it is close to useable with one last step, here's the prod.config.js file :

const config = {
  rollupInputOptions: {
    input: { index: 'src/App.jsx' },
  },
  assetsDir: '',
  emitIndex: false,
  jsx: 'react',
  plugins: [reactPlugin],
};

The build result will be in dist and look like this:

dist
├── index.8d84e296.js
├── style.05c2d980.css

So I want src/App.jsx to be built into index.js rather than index.8d84e296.js.
Can this be supported?

[m4rvr]

@FateRiddle Same as #329 but it's tracked with the library configuration preset here #330.

[Frulko]

After some search inside the codebase, I've found the line where the all the magic happen for the CSS (line 174) :

vite/src/node/build/buildPluginCss.ts

Lines 168 to 185 in 1e375a4

	async generateBundle(_options, bundle) {
	// minify css
	if (minify) {
	staticCss = minifyCSS(staticCss)
	}
	const cssFileName = `style.${hash_sum(staticCss)}.css`
	bundle[cssFileName] = {
	name: cssFileName,
	isAsset: true,
	type: 'asset',
	fileName: cssFileName,
	source: staticCss
	}
	registerAssets(assets, bundle)
	}

Currently, as we can see, it's hardcoded and we can hope for an option in the futur. For now there is no workaround w/ Vite but you could choose to build your app with rollup directy without vite.

For the JS you could add a configuration option :

module.exports = {
  ... // other configs options
  rollupOutputOptions: {
    entryFileNames: '[name].js',
  }
}

[Frulko]

@underfin following the Contributing Guide, I could make a small workaround in a PR by extending cssModuleOptions and add a cssFileName override option can take a string or a function for replace or customize the css output file.

[Frulko]

After some investigations cssModulesOptions is imported from @vue/compiler-sfc

https://github.com/vuejs/vue-next/blob/4951d4352605eb9f4bcbea40ecc68fc6cbc3dce2/packages/compiler-sfc/src/compileStyle.ts#L34-L50

Maybe it could be interesting to make a cssModulesOptions derivated from @vue/compiler-sfc but overridable to add some extra options for the futur. I understand the purpose of that I'm interested by your return.

@underfin have you an opinion on that point ?

[VishnuPrabhuT]

I'm in urgent need for this to be resolved. I could help or submit a PR if no one else is already working on this.

[Frulko]

I made the change locally I could submit a PR (ETA tomorrow)

[Frulko]

My PR is on the way :) wait and see !

[VishnuPrabhuT]

` vite/src/node/build/buildPluginCss.ts

      // const cssFileName = `style.${hash_sum(staticCss)}.css`

      // bundle[cssFileName] = {
      //   name: cssFileName,
      //   isAsset: true,
      //   type: 'asset',
      //   fileName: cssFileName,
      //   source: staticCss
      // }


      Object.keys(bundle).forEach((b) => {
        if (!b.includes("runtime-dom.esm-bundler")) {
          const t = b.split("/")[1].replace(".js", "");
          if (t && !t.includes("runtime-dom.esm-bundler")) {
            const t = b.split("/")[1].replace(".js", "");
            const cssFileName = `${t}/${t}.css`;
            bundle[cssFileName] = {
              name: cssFileName,
              isAsset: true,
              type: "asset",
              fileName: cssFileName,
              source: staticCss,
            };
          }
        }
      });

`

Add these lines to generate the shared css file at every bundle path defined without hash and the bundle name. Hope it helps someone.

[yyx990803]

With #957 merged you can customize it via assetFileNames now:

rollupOutputOptions: {
    entryFileNames: `[name].js`,
    chunkFileNames: `[name].js`,
    assetFileNames: `[name].[ext]`
}

[rosdi]

For Vite 2 and newbies out there... this setting now looks like this:

vite.config.ts

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      output: {
        entryFileNames: `assets/[name].js`,
        chunkFileNames: `assets/[name].js`,
        assetFileNames: `assets/[name].[ext]`
      }
    }
  }
})

[BrianHung]

For Vite 2 and newbies out there... this setting now looks like this:

vite.config.ts

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      output: {
        entryFileNames: `assets/[name].js`,
        chunkFileNames: `assets/[name].js`,
        assetFileNames: `assets/[name].[ext]`
      }
    }
  }
})

This seems to work for entryFileNames and chunkFileNames, but not for assetFileNames: in my case an svg, the hash is still getting appended when it's written to dist/assets/[name].[hash].[ext], even with the assets/[name].[ext] set in vite config.

[AlttiRi]

Yeah, even for the start project I still get dist/assets/logo.03d6d6da.png instead of dist/logo.png with these options:

entryFileNames: `[name].js`,
chunkFileNames: `[name].js`,
assetFileNames: `[name].[ext]`

[patak-dev]

@AlttiRi would you create a new issue with a small reproduction so this can be properly tracked?

[milahu]

the hash is still getting appended

also for legacy js files, generated by @vitejs/plugin-legacy

build/assets/main-legacy.8aa272b1.js
build/assets/main-legacy.8aa272b1.js.map
build/assets/polyfills-legacy.222ae1a7.js

build/assets/main.js
build/assets/main.js.map

[sudomaxime]

@vitejs/plugin-legacy

I'm having the same problem right now, it doesn't seem like there's a solution for the legacy js files.

My use case is that I want to build my assets with vite and then serve them over a CDN, so i cannot have changing file names over versions.

[sudomaxime]

If you are looking for a temporary solution if using docker or something different for your builds, you can simply run this small bash script to rename the file after build.

find ./dist/assets -name 'polyfills-legacy.*.js' -execdir mv {} polyfills-legacy.js \;

[ivanjeremic]

@vitejs/plugin-legacy

I'm having the same problem right now, it doesn't seem like there's a solution for the legacy js files.

My use case is that I want to build my assets with vite and then serve them over a CDN, so i cannot have changing file names over versions.

Can I ask what exactly is meant by "Legacy JS Files"?

[milahu]

Can I ask what exactly is meant by "Legacy JS Files"?

scroll 4 posts up

[github-actions]

This issue has been locked since it has been closed for more than 14 days.

If you have found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest Vite version. If you have any other comments you should join the chat at Vite Land or create a new discussion.