feat(recipe): add customization of build file names recipe #11678
Conversation
✅ Deploy Preview for astro-docs-2 ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
Lunaria Status Overview🌕 This pull request will trigger status changes. Learn moreBy default, every PR changing files present in the Lunaria configuration's You can change this by adding one of the keywords present in the Tracked Files
Warnings reference
|
| :::tip[Advanced Asset Naming] | ||
| The `assetFileNames` option can also accept a function if you need more granular control, for example, to place different asset types into different subdirectories within `static/`: | ||
|
|
||
| ```javascript title="astro.config.mjs" ins={11-29} | ||
| // ... | ||
| vite: { | ||
| build: { | ||
| rollupOptions: { | ||
| output: { | ||
| // For JavaScript entry files - This was likely fine | ||
| entryFileNames: "js/[name]-[hash].js", | ||
| // For JavaScript code-split chunks - This was likely fine | ||
| chunkFileNames: "js/chunks/[name]-[hash].js", | ||
| // For other assets like CSS, images, fonts | ||
| assetFileNames: (assetInfo) => { | ||
| const sourceFileName = | ||
| assetInfo.originalFileNames?.[0] || assetInfo.names?.[0]; | ||
| if (sourceFileName) { | ||
| const lowerSourceFileName = sourceFileName.toLowerCase(); | ||
| // Check for common image types | ||
| if ( | ||
| /\.(png|jpe?g|gif|svg|webp|avif|ico)$/.test(lowerSourceFileName) | ||
| ) { | ||
| return `img/[name]-[hash][extname]`; | ||
| } | ||
| // Check for font files | ||
| if (/\.(woff2?|eot|ttf|otf)$/.test(lowerSourceFileName)) { | ||
| return `fonts/[name]-[hash][extname]`; | ||
| } | ||
| } | ||
| // Fallback for any other asset types, or if sourceFileName couldn't be determined | ||
| return `static_assets/[name]-[hash][extname]`; | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| // ... | ||
| ``` | ||
| This example configuration will output images to `img/`, fonts to `fonts/` and any other assets to `static_assets/`. | ||
| ::: |
There was a problem hiding this comment.
Discussed this great new recipe (thanks for the contribution 🙌) today during Talking and Doc'ing, and wanted to share one small point:
I personally feel like we are already in an advanced use-case recipe and the aside covers an even more advanced use-case. I think the link just above this aside should cover us for now when it comes to the advanced use-cases:
For a full list of available placeholders and advanced pattern options, refer to
I think ending this step with that link could be sufficient for now and people can explore the Rollup documentation if they have a need for it.
Does anybody have any thoughts on this?
Description (required)
This pull request introduces a new recipe page to the Astro documentation titled "Customizing Output File Names."
This recipe addresses the need for users to have more control over the naming and directory structure of their built assets (JavaScript, CSS, images, fonts, etc.). It explains how to leverage Vite's Rollup output options within the
astro.config.mjsfile to customizeentryFileNames,chunkFileNames, andassetFileNames.This content was previously part of the v4 documentation but was removed from the main configuration page as it's considered a more advanced use case. Creating it as a recipe makes this valuable information accessible to users who specifically need this customization, as suggested in issue #10348.
Related issues & labels (optional)
recipe,add new content