Vite

Vite 8 베타(Rolldown 기반)를 기반으로 합니다. Vite 8은 Rolldown 번들러와 Oxc 변환기를 사용합니다.

Vite 는 빠른 개발 서버(네이티브 ESM + HMR)와 최적화된 프로덕션 빌드를 지원하는 차세대 프론트엔드 빌드 도구입니다.

기본 설정

TypeScript 사용: 선호 vite.config.ts
항상 ESM 사용, CommonJS 피하기

핵심

주제	설명	참조
구성	`vite.config.ts`, `defineConfig`, 조건부 구성, `loadEnv`	코어 구성
기능	`import.meta.glob`, 자산 쿼리 (`?raw`, `?url`), `import.meta.env`, HMR API	핵심 기능
플러그인 API	Vite-특정 훅, 가상 모듈, 플러그인 순서 지정	핵심 플러그인 API

빌드 및 SSR

주제	설명	참조
빌드 및 SSR	라이브러리 모드, SSR 미들웨어 모드, `ssrLoadModule`, 자바스크립트 API	빌드 및 SSR

고급

주제	설명	참조
환경 API	Vite 6+ 다중 환경 지원, 사용자 정의 런타임	environment-api
롤다운 마이그레이션	Vite 8가지 변경 사항: 롤다운 번들러, Oxc 변환기, 구성 마이그레이션	rolldown-migration

빠른 참조

CLI 명령어

vite              # Start dev server
vite build        # Production build
vite preview      # Preview production build
vite build --ssr  # SSR build

일반 구성

import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [],
  resolve: { alias: { '@': '/src' } },
  server: { port: 3000, proxy: { '/api': 'http://localhost:8080' } },
  build: { target: 'esnext', outDir: 'dist' },
})

공식 플러그인

@vitejs/plugin-vue - Vue 3 SFC 지원
@vitejs/plugin-vue-jsx - Vue 3 JSX
@vitejs/plugin-react - Oxc/Babel을 사용한 React
@vitejs/plugin-react-swc - SWC를 사용한 React
@vitejs/plugin-legacy - 구형 브라우저 지원

GitHub에서 보기

---
name: vite
description: Configure Vite build tool, use its plugin API, set up SSR, and migrate to Vite 8 with Rolldown.
---

# Vite

> Based on Vite 8 beta (Rolldown-powered). Vite 8 uses Rolldown bundler and Oxc transformer.

Vite is a next-generation frontend build tool with fast dev server (native ESM + HMR) and optimized production builds.

## Preferences

- Use TypeScript: prefer `vite.config.ts`
- Always use ESM, avoid CommonJS

## Core

| Topic | Description | Reference |
|-------|-------------|-----------|
| Configuration | `vite.config.ts`, `defineConfig`, conditional configs, `loadEnv` | [core-config](references/core-config.md) |
| Features | `import.meta.glob`, asset queries (`?raw`, `?url`), `import.meta.env`, HMR API | [core-features](references/core-features.md) |
| Plugin API | Vite-specific hooks, virtual modules, plugin ordering | [core-plugin-api](references/core-plugin-api.md) |

## Build & SSR

| Topic | Description | Reference |
|-------|-------------|-----------|
| Build & SSR | Library mode, SSR middleware mode, `ssrLoadModule`, JavaScript API | [build-and-ssr](references/build-and-ssr.md) |

## Advanced

| Topic | Description | Reference |
|-------|-------------|-----------|
| Environment API | Vite 6+ multi-environment support, custom runtimes | [environment-api](references/environment-api.md) |
| Rolldown Migration | Vite 8 changes: Rolldown bundler, Oxc transformer, config migration | [rolldown-migration](references/rolldown-migration.md) |

## Quick Reference

### CLI Commands

```bash
vite              # Start dev server
vite build        # Production build
vite preview      # Preview production build
vite build --ssr  # SSR build
```

### Common Config

```ts
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [],
  resolve: { alias: { '@': '/src' } },
  server: { port: 3000, proxy: { '/api': 'http://localhost:8080' } },
  build: { target: 'esnext', outDir: 'dist' },
})
```

### Official Plugins

- `@vitejs/plugin-vue` - Vue 3 SFC support
- `@vitejs/plugin-vue-jsx` - Vue 3 JSX
- `@vitejs/plugin-react` - React with Oxc/Babel
- `@vitejs/plugin-react-swc` - React with SWC
- `@vitejs/plugin-legacy` - Legacy browser support