fix(asset): respect assetFileNames if rollupOptions.output is an array (#8561)

Co-authored-by: patak-dev <matias.capeletto@gmail.com>

Author: inkyMountain

packages/vite/src/node/config.ts

@@ -569,6 +569,29 @@ export async function resolveConfig(
     )
   }
 
+  // Check if all assetFileNames have the same reference.
+  // If not, display a warn for user.
+  const outputOption = config.build?.rollupOptions?.output ?? []
+  // Use isArray to narrow its type to array
+  if (Array.isArray(outputOption)) {
+    const assetFileNamesList = outputOption.map(
+      (output) => output.assetFileNames
+    )
+    if (assetFileNamesList.length > 1) {
+      const firstAssetFileNames = assetFileNamesList[0]
+      const hasDifferentReference = assetFileNamesList.some(
+        (assetFileNames) => assetFileNames !== firstAssetFileNames
+      )
+      if (hasDifferentReference) {
+        resolved.logger.warn(
+          colors.yellow(`
+assetFileNames isn't equal for every build.rollupOptions.output. A single pattern across all outputs is supported by Vite.
+`)
+        )
+      }
+    }
+  }
+
   return resolved
 }
 

packages/vite/src/node/plugins/asset.ts

@@ -365,11 +365,22 @@ async function fileToBuiltUrl(
     const { search, hash } = parseUrl(id)
     const postfix = (search || '') + (hash || '')
     const output = config.build?.rollupOptions?.output
-    const assetFileNames =
+
+    const defaultAssetFileNames = path.posix.join(
+      config.build.assetsDir,
+      '[name].[hash][extname]'
+    )
+    // Steps to determine which assetFileNames will be actually used.
+    // First, if output is an object or string, use assetFileNames in it.
+    // And a default assetFileNames as fallback.
+    let assetFileNames: Exclude<OutputOptions['assetFileNames'], undefined> =
       (output && !Array.isArray(output) ? output.assetFileNames : undefined) ??
-      // defaults to '<assetsDir>/[name].[hash][extname]'
-      // slightly different from rollup's one ('assets/[name]-[hash][extname]')
-      path.posix.join(config.build.assetsDir, '[name].[hash][extname]')
+      defaultAssetFileNames
+    if (output && Array.isArray(output)) {
+      // Second, if output is an array, adopt assetFileNames in the first object.
+      assetFileNames = output[0].assetFileNames ?? assetFileNames
+    }
+
     const fileName = assetFileNamesToFileName(
       assetFileNames,
       file,

playground/legacy/main.js

@@ -1,4 +1,5 @@
 import './style.css'
+import './vite.svg'
 
 async function run() {
   const { fn } = await import('./async.js')

playground/legacy/package.json

@@ -7,6 +7,7 @@
     "build": "vite build --debug legacy",
     "build:custom-filename": "vite --config ./vite.config-custom-filename.js build  --debug legacy",
     "build:dynamic-css": "vite --config ./vite.config-dynamic-css.js build  --debug legacy",
+    "build:multiple-output": "vite --config ./vite.config-multiple-output.js build",
     "debug": "node --inspect-brk ../../packages/vite/bin/vite",
     "preview": "vite preview"
   },

playground/legacy/vite.config-multiple-output.js

@@ -0,0 +1,28 @@
+import legacy from '@vitejs/plugin-legacy'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [legacy({ modernPolyfills: true })],
+  build: {
+    manifest: true,
+    minify: false,
+    rollupOptions: {
+      output: [
+        {
+          assetFileNames() {
+            return 'assets/subdir/[name].[hash][extname]'
+          },
+          entryFileNames: `assets/subdir/[name].js`,
+          chunkFileNames: `assets/subdir/[name].js`
+        },
+        {
+          assetFileNames() {
+            return 'assets/subdir/[name].[hash][extname]'
+          },
+          entryFileNames: `assets/anotherSubdir/[name].js`,
+          chunkFileNames: `assets/anotherSubdir/[name].js`
+        }
+      ]
+    }
+  }
+})