fix(build): respect rollup output.assetFileNames, fix #2944

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

@@ -6,7 +6,7 @@ import { Plugin } from '../plugin'
 import { ResolvedConfig } from '../config'
 import { cleanUrl } from '../utils'
 import { FS_PREFIX } from '../constants'
-import { PluginContext, RenderedChunk } from 'rollup'
+import { OutputOptions, PluginContext, RenderedChunk } from 'rollup'
 import MagicString from 'magic-string'
 import { createHash } from 'crypto'
 
@@ -185,6 +185,75 @@ export function getAssetFilename(
   return assetHashToFilenameMap.get(config)?.get(hash)
 }
 
+function assetFileNamesToFileName(
+  file: string,
+  contentHash: string,
+  content: string | Buffer,
+  config: ResolvedConfig
+): string {
+  const basename = path.basename(file)
+
+  // placeholders for `assetFileNames`
+  // see https://rollupjs.org/guide/en/#outputassetfilenames for available placeholders
+  // `hash` is slightly different from the rollup's one
+  const extname = path.extname(basename)
+  const ext = extname.substr(1)
+  const name = basename.slice(0, -extname.length)
+  const hash = contentHash
+
+  let assetFileNames: OutputOptions['assetFileNames']
+  const output = config.build?.rollupOptions?.output
+  // only the object format is currently considered here
+  if (output && !Array.isArray(output)) {
+    assetFileNames = output.assetFileNames
+  }
+  // defaults to '<assetsDir>/[name].[hash][extname]'
+  // slightly different from rollup's one ('assets/[name]-[hash][extname]')
+  if (assetFileNames == null) {
+    assetFileNames = path.posix.join(
+      config.build.assetsDir,
+      '[name].[hash][extname]'
+    )
+  }
+
+  if (typeof assetFileNames === 'function') {
+    assetFileNames = assetFileNames({
+      name: file,
+      source: content,
+      type: 'asset'
+    })
+    if (typeof assetFileNames !== 'string') {
+      throw new TypeError('assetFileNames must return a string')
+    }
+  } else if (typeof assetFileNames !== 'string') {
+    throw new TypeError('assetFileNames must be a string or a function')
+  }
+
+  const fileName = assetFileNames.replace(
+    /\[\w+\]/g,
+    (placeholder: string): string => {
+      switch (placeholder) {
+        case '[ext]':
+          return ext
+
+        case '[extname]':
+          return extname
+
+        case '[hash]':
+          return hash
+
+        case '[name]':
+          return name
+      }
+      throw new Error(
+        `invalid placeholder ${placeholder} in assetFileNames "${assetFileNames}"`
+      )
+    }
+  )
+
+  return fileName
+}
+
 /**
  * Register an asset to be emitted as part of the bundle (if necessary)
  * and returns the resolved public URL
@@ -228,11 +297,11 @@ async function fileToBuiltUrl(
     const contentHash = getAssetHash(content)
     const { search, hash } = parseUrl(id)
     const postfix = (search || '') + (hash || '')
-    const basename = path.basename(file)
-    const ext = path.extname(basename)
-    const fileName = path.posix.join(
-      config.build.assetsDir,
-      `${basename.slice(0, -ext.length)}.${contentHash}${ext}`
+    const fileName = assetFileNamesToFileName(
+      file,
+      contentHash,
+      content,
+      config
     )
     if (!map.has(contentHash)) {
       map.set(contentHash, fileName)