Search

Disabling Vite File Hashes

November 27, 2023 —John Koster

Recently I've been working on a rather large rebuild to my personal, Statamic-powered blog. As part of that rebuild I migrated my build processes to Vite, but ran into an issue where I needed the filenames for my CSS, JavaScript, and assets to remain consistent for compatibility reasons with an existing cache system.

I thought this might be one of those "seems simple but eats eight hours of my day" things, but turns out it was actually incredibly simple. My new vite.config.js file now looks like this:

1import { defineConfig } from 'vite';
2import laravel from 'laravel-vite-plugin';
3 
4export default defineConfig({
5 plugins: [
6 laravel({
7 input: [
8 'resources/css/stillat.css',
9 'resources/js/site.js',
10 ],
11 refresh: true,
12 }),
13 ],
14 build: {
15 rollupOptions: {
16 output: {
17 entryFileNames: `assets/[name].js`,
18 chunkFileNames: `assets/[name].js`,
19 assetFileNames: `assets/[name].[ext]`
20 }
21 }
22 }
23});

Rebuilding my project now produces the file names I wanted 🥳. It turns out Vite uses Rollup to manage this, and it has a wide variety of options for configuring the output:

https://rollupjs.org/configuration-options/

Some absolutely amazing
people

The following amazing people help support this site and my open source projects ♥️
If you're interesting in supporting my work and want to show up on this list, check out my GitHub Sponsors Profile.