fix(build): respect assetFileNames, fix vitejs#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'
 
@@ -221,30 +221,71 @@ async function fileToBuiltUrl(
     const contentHash = getAssetHash(content)
     if (!map.has(contentHash)) {
       const basename = path.basename(file)
-      const ext = path.extname(basename)
-      let fileName = path.posix.join(
-        config.build.assetsDir,
-        `${basename.slice(0, -ext.length)}.${contentHash}${ext}`
-      )
-
-      const { output } = config.build?.rollupOptions ?? {}
-      // Only the object format is currently considered here.
+
+      // 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)) {
-        const assetFileNames = output.assetFileNames
-        // e.g assetFileNames: dir/[name].[ext]
-        if (typeof assetFileNames === 'string') {
-          fileName = assetFileNames
-            .replace(/\[name\]/, basename.slice(0, -ext.length))
-            .replace(/\[ext\]/, ext.trimLeft('.'))
-            .replace(/\[hash\]/, getAssetHash(content))
-          // e.g assetFileNames: () => name
-        } else if (typeof assetFileNames === 'function') {
+        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]'
+        )
+      }
+
+      let fileName: string
+      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({
-            type: 'asset',
+            name: file,
             source: content,
-            name: fileName
+            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')
       }
 
       map.set(contentHash, fileName)