[Vite] Rollup 플러그인으로 다수의 Entry 번들링하기

Rollup 플러그인을 활용해 Multi Entry Points build 구현

vite.config.ts

      rollupOptions: {
        input: {
          main: resolve(__dirname, "index.html"),
          viewer: resolve(__dirname, "src/viewer/index.html"),
        },
        output: {
          entryFileNames: "assets/[name].[hash].js",
          chunkFileNames: "assets/[name].[hash].js",
          assetFileNames: "assets/[name].[hash].[ext]",
        },
      },

rollupOptions: vite의 번들러인 rollup을 커스터마이징 할 수 있는 옵션입니다.
input: key는 번들의 name을 뜻하며, value에 입력한 경로를 entry로서 번들링을 수행하게 됩니다.
앞서 입력한 key는 각 entry의 번들이 됩니다.
output: 번들 결과물을 커스터마이징 할 수 있습니다.
entryFileNames: entry로부터 생성된 번들의 파일 이름을 커스터마이징 할 수 있습니다. 저의 경우 해시를 파일 이름에 포함시켰는데요. 사용자가 항상 최신의 번들을 받아볼 수 있게 하기 위함입니다.
chunkFileNames: Code-Splitting 이후 생성된 청크의 이름을 지정합니다.
assetFileNames: 에셋(폰트, 이미지, css) 등의 이름을 지정합니다.