본문 바로가기

카테고리 없음

vite.config.ts css/js/이미지 분리하여 빌드

원문 : https://light9639.tistory.com/entry/Viteconfigts-설정

 

export default defineConfig({
  ...

 

  /* = 2개나 3개나 차이 없음.

     index.html 에 '/favicon.ico' 나 '/src/main.ts' 라고 기술하면..

    npm run dev 일 때는 '/favicon.ico' 와 '/src/main.ts' 로 작동하고,

    npm run build 일 때는 './favicon.ico' 와 './css/index....css', './js/index...js' 로 동작

  */

  base: process.env.NODE_ENV == 'development' ? '/' : './',

 

  /* /assets/ 아래에 빌드되던 .css .js 들이,

     .css 파일들은 /css/ 경로에, .js 파일들은 /js/ 경로에 생성

  */
  build: {
    rollupOptions: {
      output: {
        assetFileNames: (assetInfo) => {
          let extType = assetInfo.name?.split('.').at(1);
          if(/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType as string)){
            extType = 'img';
          }
          return `${extType}/[name]-[hash][extname]`
        },
        chunkFileNames: 'js/[name]-[hash].js',
        entryFileNames: 'js/[name]-[hash].js',
      }
    }
  }
})