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 { PluginContext, RenderedChunk, OutputOptions } from 'rollup'
 import MagicString from 'magic-string'
 import { createHash } from 'crypto'
 
@@ -228,12 +228,78 @@ 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}`
-    )
+
+    // create fileName using rollupOptions.output.assetFileNames
+    let fileName: string
+    {
+      const basename = path.basename(file)
+
+      // placeholders for `assetFileNames`
+      // `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]'
+        )
+      }
+
+      switch (typeof assetFileNames) {
+        // e.g. assetFileNames: 'dir/[name].[ext]'
+        case 'string':
+          // see https://rollupjs.org/guide/en/#outputassetfilenames for available placeholders
+          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}"`
+              )
+            }
+          )
+          break
+
+        // e.g. assetFileNames: () => 'name'
+        case 'function':
+          fileName = assetFileNames({
+            name: file,
+            source: content,
+            type: 'asset'
+          })
+          if (typeof fileName !== 'string') {
+            throw new TypeError('assetFileNames must return a string')
+          }
+          break
+
+        default:
+          throw new TypeError('assetFileNames must be a string or a function')
+      }
+    }
+
     if (!map.has(contentHash)) {
       map.set(contentHash, fileName)
     }