- Forums
- react
- React With Vite Build Get Or Set JS And CSS Files Hash JavaScript/style Names
use this options in vite configs to change the name of the javascript files and the css files to a custom name [5318], Last Updated: Mon Jun 24, 2024
edw
Sat Jun 01, 2024
0 Comments
102 Visits
Today I learned that you can make the build javascript and css files into a custom name. To do this follow these steps:
- Open vite.configs.js
- add the following property to defineConfig
build: {
rollupOptions: {
output: {
entryFileNames: `assets/[name].js`,
chunkFileNames: `assets/[name].js`,
assetFileNames: `assets/[name].[ext]`
}
}
}
- run command:
$ npm run build
- Look inside the dist/ folder you will find two files
- index.js
- index.css
My example:
Source: /f/laragon/www/forums-react/frontEnd
// https://stackoverflow.com/a/71618444
// https://vitejs.dev/config/
export default defineConfig({
//server: { https: true,host: true },
plugins: [
react()
// ,basicSsl()
],
base: '/',
build: {
rollupOptions: {
output: {
entryFileNames: `assets/[name].js`,
chunkFileNames: `assets/[name].js`,
assetFileNames: `assets/[name].[ext]`
}
}
}
})
Done, I hope this works for you
Resources:
- https://stackoverflow.com/questions/74760141/how-to-set-the-names-of-vite-build-js-and-css-bundle-names-in-vue
- https://github.com/vitejs/vite/issues/378
- https://vitejs.dev/guide/static-deploy.html