When building projects with Vite, you may encounter situations where you need to prevent certain files from being hashed during the build process. This can be particularly useful when working with assets that need consistent naming, such background.js file while working with Chrome extensions.
To achieve this, you can modify your vite.config.js file to customize the output filenames. Here's a simple approach:
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()], // Optional, depends on library that you use
build: {
rollupOptions: {
input: {
// Define entry points for the build
main: resolve(__dirname, "index.html"),
background: resolve(__dirname, "src/background.ts"),
content: resolve(__dirname, "src/content.ts"),
},
output: {
entryFileNames: (chunkInfo) => {
// Filenames you want to keep unhashed
const noHashFiles = ["background", "content"];
if (noHashFiles.includes(chunkInfo.name)) {
return "[name].js"; // Keep file unhashed
}
return "assets/[name]-[hash].js"; // Hash other entry files
},
// Naming patterns for various output file types
chunkFileNames: "assets/[name]-[hash].js",
assetFileNames: "assets/[name]-[hash].[ext]",
},
},
},
});
In this configuration, we're using the rollupOptions to specify custom output patterns. The entryFileNames function checks for specific file names (in this case, 'background') and returns a non-hashed filename for those. All other files will still use the default hashing pattern.
Hope you find this useful. Thanks for reading! 👋
Top comments (0)