[vite] font, image 폴더 build할 때 dist로 내보내기

font, image, style 등등을 public이 아닌 어딘가에 두고 작업을 한다 치자. 그리고 빌드를 했을때 dist/asset 폴더 안에 폰트는 fonts, 이미지는 images 뭐 이런식으로 모여서 쌓이길 바랄때 vite 옵션을 아래와 같이 설정하면 된다.

 

 

1. vite.config.ts 추가

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        assetFileNames: ({ name }) => {
          if (/\.(gif|jpe?g|png|svg)$/.test(name ?? '')){
              return 'assets/images/[name]-[hash][extname]';
          }

          if (/\.css$/.test(name ?? '')) {
              return 'assets/css/[name]-[hash][extname]';   
          }

          if (/\.(ttf|otf|woff|woff2|eot)$/.test(name ?? '')) {
            return 'assets/fonts/[name]-[hash][extname]';
          }

          return 'assets/[name]-[hash][extname]';
        },
      }
    }
  }
})

build.rollupOptions.output의 assetFileNames를 활용해서 지정해주면 된다. 만약에 설정을 해주지 않으면 html, css, js, font, image 등이 싸그리빡빡 assets폴더 안에 뒤엉켜서 들어가니까 따로 이렇게 지정해서 빌드해주는게 깔끔함.

 

 

+ dist/assets에 원하는 폴더가 생기지 않을 때

해당 파일을 사용하고 있는지 확인 필요. 예를들어 fonts폴더가 안생긴다면 해당 폰트를 사용하는 css가 제대로 import 되었는지 확인하고, 빌드시 didn't resolve at build time, it will remain unchanged to be resolved at runtime 뭐 이런 멘트가 뜬다면 css에 쓴 경로가 잘못되어 뜨는것이기때문에 경로를 바꿔주면 된다.

 

 

+ 폴더 안에 폴더 안에 폴더 이런식일 경우

위 예시는 말 그대로 assets/images안에 우르르 파일을 넣는 식이라 만약 images/main/toolbar/ 이런 식으로 중첩된 폴더 안에 있는 파일이라면 먹히지 않음. 방법은 찾는 중인데 아무리봐도 모르겠고 일단은 fonts나 images같은건 안바뀌는 static한 요소이기때문에 public/assets 안에 그냥 넣어주고(https://ko.vitejs.dev/guide/assets.html#the-public-directory) 빌드하면 public에 있는 assets이하가 자동으로 dist안으로 고대로 들어가게 되기때문에 일단 이런 방식으로 쓰고 있음... 참고로 이 경우 경로는 '/assets/fonts/nanum-gothic.woff' 이런식으로 써주면 된다. 추후 찾으면 업데이트 하겠음.