feat: align default chunk and asset file names with rollup (#10927)

package.json

@@ -89,7 +89,7 @@
     "typescript": "^4.6.4",
     "unbuild": "^0.9.4",
     "vite": "workspace:*",
-    "vitepress": "^1.0.0-alpha.28",
+    "vitepress": "^1.0.0-alpha.29",
     "vitest": "^0.25.1",
     "vue": "^3.2.45"
   },

packages/plugin-legacy/src/index.ts

@@ -298,7 +298,7 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
           | string
           | ((chunkInfo: PreRenderedChunk) => string)
           | undefined,
-        defaultFileName = '[name]-legacy.[hash].js'
+        defaultFileName = '[name]-legacy-[hash].js'
       ): string | ((chunkInfo: PreRenderedChunk) => string) => {
         if (!fileNames) {
           return path.posix.join(config.build.assetsDir, defaultFileName)

packages/vite/src/node/build.ts

@@ -576,13 +576,13 @@ async function doBuild(
           : libOptions
           ? ({ name }) =>
               resolveLibFilename(libOptions, format, name, config.root, jsExt)
-          : path.posix.join(options.assetsDir, `[name].[hash].${jsExt}`),
+          : path.posix.join(options.assetsDir, `[name]-[hash].${jsExt}`),
         chunkFileNames: libOptions
-          ? `[name].[hash].${jsExt}`
-          : path.posix.join(options.assetsDir, `[name].[hash].${jsExt}`),
+          ? `[name]-[hash].${jsExt}`
+          : path.posix.join(options.assetsDir, `[name]-[hash].${jsExt}`),
         assetFileNames: libOptions
           ? `[name].[ext]`
-          : path.posix.join(options.assetsDir, `[name].[hash].[ext]`),
+          : path.posix.join(options.assetsDir, `[name]-[hash].[ext]`),
         inlineDynamicImports:
           output.format === 'umd' ||
           output.format === 'iife' ||

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

@@ -79,15 +79,15 @@ export async function bundleWorkerEntry(
     } = await bundle.generate({
       entryFileNames: path.posix.join(
         config.build.assetsDir,
-        '[name].[hash].js'
+        '[name]-[hash].js'
       ),
       chunkFileNames: path.posix.join(
         config.build.assetsDir,
-        '[name].[hash].js'
+        '[name]-[hash].js'
       ),
       assetFileNames: path.posix.join(
         config.build.assetsDir,
-        '[name].[hash].[ext]'
+        '[name]-[hash].[ext]'
       ),
       ...workerConfig,
       format,

playground/assets/__tests__/assets.spec.ts

@@ -19,7 +19,7 @@ import {
 } from '~utils'
 
 const assetMatch = isBuild
-  ? /\/foo\/assets\/asset\.\w{8}\.png/
+  ? /\/foo\/assets\/asset-\w{8}\.png/
   : '/foo/nested/asset.png'
 
 const iconMatch = `/foo/icon.png`
@@ -209,8 +209,8 @@ describe('image', () => {
     srcset.split(', ').forEach((s) => {
       expect(s).toMatch(
         isBuild
-          ? /\/foo\/assets\/asset\.\w{8}\.png \dx/
-          : /\/foo\/nested\/asset\.png \dx/
+          ? /\/foo\/assets\/asset-\w{8}\.png \dx/
+          : /\/foo\/nested\/asset.png \dx/
       )
     })
   })
@@ -338,7 +338,7 @@ describe.runIf(isBuild)('css and assets in css in build watch', () => {
   test('css will not be lost and css does not contain undefined', async () => {
     editFile('index.html', (code) => code.replace('Assets', 'assets'), true)
     await notifyRebuildComplete(watcher)
-    const cssFile = findAssetFile(/index\.\w+\.css$/, 'foo')
+    const cssFile = findAssetFile(/index-\w+\.css$/, 'foo')
     expect(cssFile).not.toBe('')
     expect(cssFile).not.toMatch(/undefined/)
   })

playground/assets/__tests__/relative-base/relative-base-assets.spec.ts

@@ -10,7 +10,7 @@ import {
 } from '~utils'
 
 const absoluteAssetMatch = isBuild
-  ? /http.*\/other-assets\/asset\.\w{8}\.png/
+  ? /http.*\/other-assets\/asset-\w{8}\.png/
   : '/nested/asset.png'
 
 // Asset URLs in CSS are relative to the same dir, the computed
@@ -20,7 +20,7 @@ const cssBgAssetMatch = absoluteAssetMatch
 const iconMatch = `/icon.png`
 
 const absoluteIconMatch = isBuild
-  ? /http.*\/icon\.\w{8}\.png/
+  ? /http.*\/icon-\w{8}\.png/
   : '/nested/icon.png'
 
 const absolutePublicIconMatch = isBuild ? /http.*\/icon\.png/ : '/icon.png'
@@ -143,7 +143,7 @@ describe.runIf(isBuild)('index.css URLs', () => {
   })
 
   test('relative asset URL', () => {
-    expect(css).toMatch(`./asset.`)
+    expect(css).toMatch(`./asset-`)
   })
 
   test('preserve postfix query/hash', () => {
@@ -158,7 +158,7 @@ describe('image', () => {
     srcset.split(', ').forEach((s) => {
       expect(s).toMatch(
         isBuild
-          ? /other-assets\/asset\.\w{8}\.png \dx/
+          ? /other-assets\/asset-\w{8}\.png \dx/
           : /\.\/nested\/asset\.png \dx/
       )
     })
@@ -191,14 +191,14 @@ test('?raw import', async () => {
 
 test('?url import', async () => {
   expect(await page.textContent('.url')).toMatch(
-    isBuild ? /http.*\/other-assets\/foo\.\w{8}\.js/ : `/foo.js`
+    isBuild ? /http.*\/other-assets\/foo-\w{8}\.js/ : `/foo.js`
   )
 })
 
 test('?url import on css', async () => {
   const txt = await page.textContent('.url-css')
   expect(txt).toMatch(
-    isBuild ? /http.*\/other-assets\/icons\.\w{8}\.css/ : '/css/icons.css'
+    isBuild ? /http.*\/other-assets\/icons-\w{8}\.css/ : '/css/icons.css'
   )
 })
 

playground/assets/__tests__/runtime-base/runtime-base-assets.spec.ts

@@ -9,7 +9,7 @@ import {
 } from '~utils'
 
 const absoluteAssetMatch = isBuild
-  ? /\/other-assets\/asset\.\w{8}\.png/
+  ? /\/other-assets\/asset-\w{8}\.png/
   : '/nested/asset.png'
 
 // Asset URLs in CSS are relative to the same dir, the computed
@@ -19,7 +19,7 @@ const cssBgAssetMatch = absoluteAssetMatch
 const iconMatch = `/icon.png`
 
 const absoluteIconMatch = isBuild
-  ? /\/other-assets\/icon\.\w{8}\.png/
+  ? /\/other-assets\/icon-\w{8}\.png/
   : '/nested/icon.png'
 
 const absolutePublicIconMatch = isBuild ? /\/icon\.png/ : '/icon.png'
@@ -137,11 +137,11 @@ describe('css url() references', () => {
 describe.runIf(isBuild)('index.css URLs', () => {
   let css: string
   beforeAll(() => {
-    css = findAssetFile(/index.*\.css$/, '', 'other-assets')
+    css = findAssetFile(/index-\w{8}\.css$/, '', 'other-assets')
   })
 
   test('relative asset URL', () => {
-    expect(css).toMatch(`./asset.`)
+    expect(css).toMatch(`./asset-`)
   })
 
   test('preserve postfix query/hash', () => {
@@ -156,7 +156,7 @@ describe('image', () => {
     srcset.split(', ').forEach((s) => {
       expect(s).toMatch(
         isBuild
-          ? /other-assets\/asset\.\w{8}\.png \dx/
+          ? /other-assets\/asset-\w{8}\.png \dx/
           : /\.\/nested\/asset\.png \dx/
       )
     })
@@ -189,14 +189,14 @@ test('?raw import', async () => {
 
 test('?url import', async () => {
   expect(await page.textContent('.url')).toMatch(
-    isBuild ? /\/other-assets\/foo\.\w{8}\.js/ : `/foo.js`
+    isBuild ? /\/other-assets\/foo-\w{8}\.js/ : `/foo.js`
   )
 })
 
 test('?url import on css', async () => {
   const txt = await page.textContent('.url-css')
   expect(txt).toMatch(
-    isBuild ? /\/other-assets\/icons\.\w{8}\.css/ : '/css/icons.css'
+    isBuild ? /\/other-assets\/icons-\w{8}\.css/ : '/css/icons.css'
   )
 })
 

playground/assets/vite.config-relative-base.js

@@ -15,8 +15,8 @@ module.exports = {
     rollupOptions: {
       output: {
         entryFileNames: 'entries/[name].js',
-        chunkFileNames: 'chunks/[name].[hash].js',
-        assetFileNames: 'other-assets/[name].[hash][extname]'
+        chunkFileNames: 'chunks/[name]-[hash].js',
+        assetFileNames: 'other-assets/[name]-[hash][extname]'
       }
     }
   },

playground/assets/vite.config-runtime-base.js

@@ -22,8 +22,8 @@ module.exports = {
     rollupOptions: {
       output: {
         entryFileNames: 'entries/[name].js',
-        chunkFileNames: 'chunks/[name].[hash].js',
-        assetFileNames: 'other-assets/[name].[hash][extname]'
+        chunkFileNames: 'chunks/[name]-[hash].js',
+        assetFileNames: 'other-assets/[name]-[hash][extname]'
       }
     }
   },

playground/backend-integration/__tests__/backend-integration.spec.ts

@@ -12,7 +12,7 @@ import {
 } from '~utils'
 
 const outerAssetMatch = isBuild
-  ? /\/dev\/assets\/logo\.\w{8}\.png/
+  ? /\/dev\/assets\/logo-\w{8}\.png/
   : /\/dev\/@fs\/.+?\/images\/logo\.png/
 
 test('should have no 404s', () => {

playground/css-dynamic-import/__tests__/css-dynamic-import.spec.ts

@@ -66,32 +66,32 @@ baseOptions.forEach(({ base, label }) => {
         expect(await getColor('.css-dynamic-import')).toBe('green')
         expect(await getLinks()).toEqual([
           {
-            pathname: expect.stringMatching(/^\/assets\/index\..+\.css$/),
+            pathname: expect.stringMatching(/^\/assets\/index-.+\.css$/),
             rel: 'stylesheet',
             as: ''
           },
           {
-            pathname: expect.stringMatching(/^\/assets\/dynamic\..+\.css$/),
+            pathname: expect.stringMatching(/^\/assets\/dynamic-.+\.css$/),
             rel: 'preload',
             as: 'style'
           },
           {
-            pathname: expect.stringMatching(/^\/assets\/dynamic\..+\.js$/),
+            pathname: expect.stringMatching(/^\/assets\/dynamic-.+\.js$/),
             rel: 'modulepreload',
             as: 'script'
           },
           {
-            pathname: expect.stringMatching(/^\/assets\/dynamic\..+\.css$/),
+            pathname: expect.stringMatching(/^\/assets\/dynamic-.+\.css$/),
             rel: 'stylesheet',
             as: ''
           },
           {
-            pathname: expect.stringMatching(/^\/assets\/static\..+\.js$/),
+            pathname: expect.stringMatching(/^\/assets\/static-.+\.js$/),
             rel: 'modulepreload',
             as: 'script'
           },
           {
-            pathname: expect.stringMatching(/^\/assets\/index\..+\.js$/),
+            pathname: expect.stringMatching(/^\/assets\/index-.+\.js$/),
             rel: 'modulepreload',
             as: 'script'
           }

playground/css/__tests__/css.spec.ts

@@ -64,7 +64,7 @@ test('css import from js', async () => {
 test('css import asset with space', async () => {
   const importedWithSpace = await page.$('.import-with-space')
 
-  expect(await getBg(importedWithSpace)).toMatch(/.*ok\..*png/)
+  expect(await getBg(importedWithSpace)).toMatch(/.*\/ok.*\.png/)
 })
 
 test('postcss config', async () => {
@@ -90,7 +90,7 @@ test('sass', async () => {
     isBuild ? /base64/ : '/nested/icon.png'
   )
   expect(await getBg(urlStartsWithVariable)).toMatch(
-    isBuild ? /ok\.\w+\.png/ : `${viteTestUrl}/ok.png`
+    isBuild ? /ok-\w+\.png/ : `${viteTestUrl}/ok.png`
   )
   expect(await getColor(partialImport)).toBe('orchid')
 
@@ -124,7 +124,7 @@ test('less', async () => {
     isBuild ? /base64/ : '/nested/icon.png'
   )
   expect(await getBg(urlStartsWithVariable)).toMatch(
-    isBuild ? /ok\.\w+\.png/ : `${viteTestUrl}/ok.png`
+    isBuild ? /ok-\w+\.png/ : `${viteTestUrl}/ok.png`
   )
 
   editFile('less.less', (code) => code.replace('@color: blue', '@color: red'))
@@ -297,8 +297,8 @@ test('async chunk', async () => {
   if (isBuild) {
     // assert that the css is extracted into its own file instead of in the
     // main css file
-    expect(findAssetFile(/index\.\w+\.css$/)).not.toMatch('teal')
-    expect(findAssetFile(/async\.\w+\.css$/)).toMatch('.async{color:teal}')
+    expect(findAssetFile(/index-\w+\.css$/)).not.toMatch('teal')
+    expect(findAssetFile(/async-\w+\.css$/)).toMatch('.async{color:teal}')
   } else {
     // test hmr
     editFile('async.css', (code) => code.replace('color: teal', 'color: blue'))
@@ -316,8 +316,8 @@ test('treeshaken async chunk', async () => {
     ).toBeNull()
     // assert that the css is not present anywhere
     expect(findAssetFile(/\.css$/)).not.toMatch('plum')
-    expect(findAssetFile(/index\.\w+\.js$/)).not.toMatch('.async{color:plum}')
-    expect(findAssetFile(/async\.\w+\.js$/)).not.toMatch('.async{color:plum}')
+    expect(findAssetFile(/index-\w+\.js$/)).not.toMatch('.async{color:plum}')
+    expect(findAssetFile(/async-\w+\.js$/)).not.toMatch('.async{color:plum}')
     // should have no chunk!
     expect(findAssetFile(/async-treeshaken/)).toBe('')
   } else {
@@ -416,7 +416,7 @@ test('minify css', async () => {
   }
 
   // should keep the rgba() syntax
-  const cssFile = findAssetFile(/index\.\w+\.css$/)
+  const cssFile = findAssetFile(/index-\w+\.css$/)
   expect(cssFile).toMatch('rgba(')
   expect(cssFile).not.toMatch('#ffff00b3')
 })

playground/css/vite.config-relative-base.js

@@ -15,8 +15,8 @@ module.exports = {
     rollupOptions: {
       output: {
         entryFileNames: 'entries/[name].js',
-        chunkFileNames: 'chunks/[name].[hash].js',
-        assetFileNames: 'other-assets/[name].[hash][extname]'
+        chunkFileNames: 'chunks/[name]-[hash].js',
+        assetFileNames: 'other-assets/[name]-[hash][extname]'
       }
     }
   },

playground/glob-import/__tests__/glob-import.spec.ts

@@ -185,7 +185,7 @@ test('tree-shake eager css', async () => {
   )
 
   if (isBuild) {
-    const content = findAssetFile(/index\.\w+\.js/)
+    const content = findAssetFile(/index-\w+\.js/)
     expect(content).not.toMatch('.tree-shake-eager-css')
   }
 })

playground/legacy/__tests__/legacy.spec.ts

@@ -76,7 +76,7 @@ test('should load dynamic import with css', async () => {
 
 test('asset url', async () => {
   expect(await page.textContent('#asset-path')).toMatch(
-    isBuild ? /\/assets\/vite\.\w+\.svg/ : '/vite.svg'
+    isBuild ? /\/assets\/vite-\w+\.svg/ : '/vite.svg'
   )
 })
 
@@ -116,6 +116,6 @@ describe.runIf(isBuild)('build', () => {
 
   test('includes structuredClone polyfill which is supported after core-js v3', () => {
     expect(findAssetFile(/polyfills-legacy/)).toMatch('"structuredClone"')
-    expect(findAssetFile(/polyfills\./)).toMatch('"structuredClone"')
+    expect(findAssetFile(/polyfills-\w{8}\./)).toMatch('"structuredClone"')
   })
 })

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

@@ -10,14 +10,14 @@ export default defineConfig({
       output: [
         {
           assetFileNames() {
-            return 'assets/subdir/[name].[hash][extname]'
+            return 'assets/subdir/[name]-[hash][extname]'
           },
           entryFileNames: `assets/subdir/[name].js`,
           chunkFileNames: `assets/subdir/[name].js`
         },
         {
           assetFileNames() {
-            return 'assets/subdir/[name].[hash][extname]'
+            return 'assets/subdir/[name]-[hash][extname]'
           },
           entryFileNames: `assets/anotherSubdir/[name].js`,
           chunkFileNames: `assets/anotherSubdir/[name].js`

playground/lib/__tests__/lib.spec.ts

@@ -36,7 +36,7 @@ describe.runIf(isBuild)('build', () => {
     expect(code).not.toMatch('__vitePreload')
 
     // Test that library chunks are hashed
-    expect(code).toMatch(/await import\("\.\/message.[a-z\d]{8}.mjs"\)/)
+    expect(code).toMatch(/await import\("\.\/message-[a-z\d]{8}.mjs"\)/)
   })
 
   test('@import hoist', async () => {

playground/preload/__tests__/preload.spec.ts

@@ -17,10 +17,10 @@ describe.runIf(isBuild)('build', () => {
     await page.goto(viteTestUrl + '/#/hello')
     const html = await page.content()
     expect(html).toMatch(
-      /link rel="modulepreload".*?href=".*?\/assets\/Hello\.\w{8}\.js"/
+      /link rel="modulepreload".*?href=".*?\/assets\/Hello-\w{8}\.js"/
     )
     expect(html).toMatch(
-      /link rel="stylesheet".*?href=".*?\/assets\/Hello\.\w{8}\.css"/
+      /link rel="stylesheet".*?href=".*?\/assets\/Hello-\w{8}\.css"/
     )
   })
 })