diff --git a/src/node/build/buildPluginCss.ts b/src/node/build/buildPluginCss.ts index ddcc3f95fcc52f..5b1e8871a69c63 100644 --- a/src/node/build/buildPluginCss.ts +++ b/src/node/build/buildPluginCss.ts @@ -8,6 +8,7 @@ import { parseWithQuery } from '../utils' import { Transform } from '../config' +import hash_sum from 'hash-sum' const debug = require('debug')('vite:build:css') @@ -17,7 +18,6 @@ export const createBuildCssPlugin = ( root: string, publicBase: string, assetsDir: string, - cssFileName: string, minify: boolean, inlineLimit: number, transforms: Transform[] @@ -127,6 +127,8 @@ export const createBuildCssPlugin = ( ).css } + const cssFileName = `style.${hash_sum(css)}.css` + bundle[cssFileName] = { isAsset: true, type: 'asset', diff --git a/src/node/build/index.ts b/src/node/build/index.ts index 03cbdec9cd795b..ddb4fa358eab4e 100644 --- a/src/node/build/index.ts +++ b/src/node/build/index.ts @@ -139,7 +139,7 @@ export async function build(options: BuildConfig = {}): Promise { root = process.cwd(), base = '/', outDir = path.resolve(root, 'dist'), - assetsDir = 'assets', + assetsDir = '_assets', assetsInlineLimit = 4096, alias = {}, transforms = [], @@ -168,7 +168,6 @@ export async function build(options: BuildConfig = {}): Promise { const indexPath = path.resolve(root, 'index.html') const publicBasePath = base.replace(/([^/])$/, '$1/') // ensure ending slash const resolvedAssetsPath = path.join(outDir, assetsDir) - const cssFileName = 'style.css' const resolver = createResolver(root, resolvers, alias) @@ -219,7 +218,6 @@ export async function build(options: BuildConfig = {}): Promise { root, publicBasePath, assetsDir, - cssFileName, !!minify, assetsInlineLimit, transforms @@ -244,11 +242,16 @@ export async function build(options: BuildConfig = {}): Promise { const { output } = await bundle.generate({ format: 'es', sourcemap, + entryFileNames: `[name].[hash].js`, + chunkFileNames: `common.[hash].js`, ...rollupOutputOptions }) spinner && spinner.stop() + const cssFileName = output.find( + (a) => a.type === 'asset' && a.fileName.endsWith('.css') + )!.fileName const indexHtml = emitIndex ? renderIndex(output, cssFileName) : '' if (write) { diff --git a/src/node/config.ts b/src/node/config.ts index 648ccea3d2776b..e8dec4288121e1 100644 --- a/src/node/config.ts +++ b/src/node/config.ts @@ -92,7 +92,7 @@ export interface BuildConfig extends SharedConfig { /** * Directory relative from `outDir` where the built js/css/image assets will * be placed. - * @default 'assets' + * @default '_assets' */ assetsDir?: string /** diff --git a/test/test.js b/test/test.js index b603e99cb11674..e7d4c58bb1fe48 100644 --- a/test/test.js +++ b/test/test.js @@ -82,7 +82,7 @@ describe('vite', () => { expect(await getText('.asset-import')).toMatch( isBuild ? // hashed in production - /\/assets\/testAssets\.([\w\d]+)\.png$/ + /\/_assets\/testAssets\.([\w\d]+)\.png$/ : // only resolved to absolute in dev '/testAssets.png' )