Playground

다양한 세팅예제들을 볼 수 있다.

https://github.com/vitejs/vite/tree/main/packages/playground

빌드할때 파일 종류별로 따로 디렉토리에 저장하기

빌드하면 /dist/assets 경로에 몽땅 들어가는데 한번에 너무많이 들어가서 복잡하게 느껴지니 종류별로 분류하면 좋을거라 싶어 찾아보니 다음과 같이 사용하면 된다.

// vite.config.ts
export default defineConfig(({ mode }): any => {
  return {
    build: {
      rollupOptions: {
        output: {
          assetFileNames: (assetInfo: any): string => {
            const info: string[] = assetInfo.name.split('.')
            let ext: string = info[info.length - 1]
            if (/png|jpe?g|svg|gif|tiff|bmp|ico|webp/i.test(ext))
            {
              ext = 'images/'
            }
            else if (/woff|woff2/.test(ext))
            {
              ext = 'fonts/'
            }
            else
            {
              ext = ''
            }
            return `assets/${ext}[name]-[hash][extname]`
          },
        },
      },
    },
  }
})