Vite 설정하기

출처: https://vitejs-kr.github.io/config/

Vite 설정하기

루트에 있는 vite.config.js 파일을 기본적으로 사용한다

설정에서 명령(dev/serve 또는 build), 사용 중인 모드, 또는 SSR 빌드 여부(ssrBuild)를 분기할 수 있다

export default defineConfig(({ command, mode, ssrBuild }) => {
  if (command === 'serve') {
    return {
      // 개발 서버 설정
    }
  } else {
    return {
      // 빌드 설정
    }
  }
})

비동기 설정을 할 수 있다

export default defineConfig(async ({ command, mode }) => {
  const data = await asyncFunction()
  return {
    // Vite 설정 값 전달
  }
})

환경변수도 가져올 수 있다

import { defineConfig, loadEnv } from 'vite'
export default defineConfig(({ command, mode }) => {
  // 현재 작업 디렉터리의 `mode`를 기반으로 env 파일을 불러옴
  // 세 번째 매개변수를 ''로 설정하면 `VITE_` 접두사에 관계없이 모든 환경 변수를 불러옴
  const env = loadEnv(mode, process.cwd(), '')
  return {
    // Vite 설정
    define: {
      __APP_ENV__: env.APP_ENV
    }
  }
})

공용 옵션

서버 옵션

빌드 옵션

프리뷰 옵션

디펜던시 최적화 옵션

SSR 옵션

워커 옵션

기타사항

import { resolve } from 'path'    //MPA 구조의 경우 진입점 명시
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { splitVendorChunkPlugin } from 'vite'   //청크를 수정하기를 원한다면 설정해준다
/**
 * 일반적인 번들링보다 빠른 이유?
 * 모든 파일을 번들링 한 후에 서버가 시작되는 것이 아닌 서버가 시작된 뒤에 build파일이 떨어진다
 *
 * -----------------------------------------------------
 * npm init vite 플젝이름 --template cli이름
 * 을 통해서 vite가 있는 프로젝트를 생성할 수 있다
 *
 * 특이점 :
 * 기본적으로 rollup 문법을 지원한다
 * .js외의 모든 파일들을 import 할때 extension을 붙여 줘야한다
 *
 * vite에서는 코드에 에러가 있을시, complie failed라는 메시지가 아닌 Internal server error라는 메시지를 띄워준다
 * 네이티브 레벨의 번들링이 아니라, 브라우저를 통한 번들링 작업이 이루어진다
 *
 * vite build --watch 명령을 통해 Rollup Watcher를 활성화 할 수 있습니다
 *
 *
 * */
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(),splitVendorChunkPlugin()],
  //빌드 시에는, 사용자가 접근할 수 있는 모든 .html 파일에 대해 아래와 같이 빌드 진입점이라 명시해줘야만 합니다.
  build:{
    watch: {
      // https://rollupjs.org/guide/en/#watch-options
      // 파일 변경 시 다시 빌드하기
    },
    rollupOptions:{
      input:{
        main: resolve(__dirname, 'index.html'),
        nested: resolve(__dirname, 'nested/index.html'),
      }
    }
  }
})