vite.config.js - Examples

  1/**
  2 * Vite 설정 파일
  3 * https://vitejs.dev/config/
  4 */
  5
  6import { defineConfig } from 'vite';
  7import { resolve } from 'path';
  8
  9export default defineConfig({
 10    // 개발 서버 설정
 11    server: {
 12        port: 3000,           // 포트 번호
 13        open: true,           // 브라우저 자동 열기
 14        cors: true,           // CORS 허용
 15        host: true,           // 네트워크에서 접근 허용
 16        // 프록시 설정 (API 서버 연동 시)
 17        // proxy: {
 18        //     '/api': {
 19        //         target: 'http://localhost:8080',
 20        //         changeOrigin: true,
 21        //         rewrite: (path) => path.replace(/^\/api/, '')
 22        //     }
 23        // }
 24    },
 25
 26    // 빌드 설정
 27    build: {
 28        outDir: 'dist',       // 출력 디렉토리
 29        sourcemap: true,      // 소스맵 생성
 30        minify: 'terser',     // 압축 방식 (terser 또는 esbuild)
 31        target: 'es2020',     // 타겟 브라우저
 32
 33        // 번들 분할 설정
 34        rollupOptions: {
 35            input: {
 36                main: resolve(__dirname, 'index.html'),
 37                // 다중 페이지 앱의 경우
 38                // about: resolve(__dirname, 'about.html'),
 39            },
 40            output: {
 41                // 청크 파일 이름 패턴
 42                chunkFileNames: 'assets/js/[name]-[hash].js',
 43                entryFileNames: 'assets/js/[name]-[hash].js',
 44                assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
 45
 46                // 벤더 번들 분리
 47                manualChunks: {
 48                    // vendor: ['lodash', 'axios'],
 49                }
 50            }
 51        },
 52
 53        // 청크 크기 경고 임계값 (KB)
 54        chunkSizeWarningLimit: 500,
 55    },
 56
 57    // 경로 별칭 설정
 58    resolve: {
 59        alias: {
 60            '@': resolve(__dirname, 'src'),
 61            '@components': resolve(__dirname, 'src/components'),
 62            '@utils': resolve(__dirname, 'src/utils'),
 63            '@styles': resolve(__dirname, 'src/styles'),
 64        }
 65    },
 66
 67    // CSS 설정
 68    css: {
 69        // CSS 모듈 설정
 70        modules: {
 71            localsConvention: 'camelCase',
 72        },
 73        // PostCSS 설정
 74        postcss: {
 75            plugins: [
 76                // autoprefixer 등 플러그인 추가
 77            ]
 78        },
 79        // 전처리기 옵션
 80        preprocessorOptions: {
 81            scss: {
 82                // 전역 변수 파일 자동 import
 83                // additionalData: `@import "@/styles/variables.scss";`
 84            }
 85        }
 86    },
 87
 88    // 환경 변수 접두사
 89    envPrefix: 'VITE_',
 90
 91    // 플러그인
 92    plugins: [
 93        // @vitejs/plugin-react
 94        // @vitejs/plugin-vue
 95        // @vitejs/plugin-legacy (구형 브라우저 지원)
 96    ],
 97
 98    // 최적화 설정
 99    optimizeDeps: {
100        // 사전 번들링할 의존성
101        include: [],
102        // 사전 번들링에서 제외할 의존성
103        exclude: []
104    },
105
106    // 미리보기 서버 설정
107    preview: {
108        port: 4173,
109        open: true,
110    }
111});