Vite 프로젝트 설정 파일 vite.config.js

Vite 프로젝트 설정 파일 vite.config.js

 

vite.config.js는 Vite 프로젝트의 설정 파일로, Vite의 동작을 커스터마이징할 수 있도록 다양한 옵션과 플러그인을 정의합니다.
이 설정 파일은 JavaScript 또는 TypeScript로 작성할 수 있으며, 프로젝트의 루트 디렉토리에 위치합니다.

---

1. 기본 구조

vite.config.js는 Vite에서 제공하는 defineConfig 함수를 사용해 설정을 정의합니다.
이 함수는 타입 지원과 자동 완성을 제공하여 사용 편의성을 높입니다.

예제:

import { defineConfig } from 'vite'

export default defineConfig({
  // Vite의 설정 옵션
  server: {
    port: 3000, // 개발 서버 포트
  },
  build: {
    outDir: 'dist', // 빌드 출력 디렉토리
  },
})

 

---

2. 주요 설정 옵션

(1) server

개발 서버 관련 옵션을 설정합니다.

server: {
  port: 3000, // 개발 서버 포트 번호
  open: true, // 서버 시작 시 브라우저 자동 열기
  proxy: {    // API 프록시 설정
    '/api': {
      target: 'http://localhost:4000', // 백엔드 서버 주소
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, ''), // API 경로 재작성
    },
  },
},

 

---

(2) build

프로덕션 빌드와 관련된 설정을 정의합니다.

build: {
  outDir: 'dist', // 빌드 출력 디렉토리
  sourcemap: true, // 소스맵 생성 (디버깅용)
  rollupOptions: { // Rollup의 세부 옵션 설정
    output: {
      manualChunks: {
        vendor: ['react', 'react-dom'], // 특정 모듈 분리
      },
    },
  },
},

 

 

---

(3) plugins

Vite에서 사용할 플러그인을 정의합니다.

import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    react(), // React 플러그인 추가
  ],
})

 

 

---

(4) resolve

모듈 해석 방식을 설정합니다.
예를 들어, 별칭(alias)을 정의하거나 확장자를 지정할 수 있습니다.

resolve: {
  alias: {
    '@': '/src', // '@'를 '/src'로 매핑
  },
  extensions: ['.js', '.ts', '.jsx', '.tsx'], // 기본 확장자 목록
},

 

---

(5) css

CSS와 관련된 설정을 정의합니다.

css: {
  preprocessorOptions: {
    scss: {
      additionalData: `@import "@/styles/global.scss";`, // SCSS 전역 변수 추가
    },
  },
},

 

---

(6) define

애플리케이션 내에서 전역 상수를 정의합니다.

define: {
  __APP_VERSION__: JSON.stringify('1.0.0'),
},

 

이렇게 정의한 상수는 코드에서 __APP_VERSION__으로 참조할 수 있습니다.

---

(7) optimizeDeps

개발 서버에서 디펜던시를 미리 번들링하는 설정을 정의합니다.

optimizeDeps: {
  include: ['lodash'], // 미리 번들링할 패키지
  exclude: ['moment'], // 번들링에서 제외할 패키지
},

 

 

 

---

3. 확장 가능한 설정 (예: TypeScript 사용)

vite.config.ts를 사용하면 TypeScript의 타입 지원을 활용할 수 있습니다.

vite.config.ts 예제:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 8080,
  },
})

 

---

4. 동적 설정 (환경 변수 사용)

환경 변수(process.env)를 기반으로 설정을 동적으로 변경할 수 있습니다.

환경 변수 파일 설정:

• .env: 기본 설정
• .env.development: 개발 환경 설정
• .env.production: 프로덕션 환경 설정

예제:

import { defineConfig } from 'vite'

export default defineConfig(({ mode }) => {
  return {
    base: mode === 'production' ? '/prod/' : '/',
    server: {
      port: mode === 'production' ? 8080 : 3000,
    },
  }
})

 

---

5. 설정 확장 및 플러그인 사용

Vite는 다양한 커뮤니티 플러그인을 지원하며, 설정 파일에서 이를 활용할 수 있습니다:

• @vitejs/plugin-vue: Vue 지원
• @vitejs/plugin-react: React 지원
• vite-plugin-eslint: 코드 린팅
• vite-plugin-compression: gzip 압축

---

정리

vite.config.js는 Vite의 유연한 설정을 가능하게 하며, 프로젝트 요구사항에 따라 최적화와 커스터마이징을 지원합니다. 주요 옵션은 개발 서버, 빌드 설정, 플러그인 추가, 모듈 해석 등이 포함되며, 환경 변수와 동적 설정을 통해 복잡한 요구사항도 손쉽게 처리할 수 있습니다.

 

https://ko.vite.dev/config/#configure-vite

Vite