vite 빌드 시 js, css 이름 지정하기

vite build를 하면, 그림과 같이 js, css 파일 이름에 접미사로 랜덤한 해시가 붙는다.
그런데, 이 파일 이름을 직접 지정할 순 없을까?

당연히 가능하다.
vite의 특성상 vite.config.js를 건드려주면 되고,
아래의 코드를 defineConfig의 매개변수 오브젝트에 추가해주면 된다.

build: {
  rollupOptions: {
    output: {
      entryFileNames: "[name].js",
      assetFileNames: "[name].[ext]",
    },
  },
},

즉, 아래와 같은 형태로 기존 내용에 추가해서 설정하면 된다.

vite.config.js를 저장 후 빌드하면, 아래와 같이 이름이 지정되어 나온다.
부가적으로, 원래는 하위에 assets 폴더가 만들어지고 그 안에 js, css 파일들이 생성되었지만, 이 설정을 적용한 후에는 index.html과 같은 레벨에 위치하게 된다.