출처: 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'), } } } })