콘텐츠로 이동

Vite 플러그인

개요

Vite는 모든 걸 기본으로 제공하려고 하지만, 확장이 필요할 땐 플러그인으로 기능을 붙여요. 플러그인은 Rollup의 잘 설계된 플러그인 인터페이스에 Vite 고유 옵션을 더한 구조라서, 성숙한 Rollup 플러그인 생태계를 그대로 쓰면서 Vite의 개발 서버·SSR 기능도 함께 확장할 수 있어요.

핵심 개념

  • 플러그인 추가 — 플러그인을 devDependencies에 설치하고 vite.config.js의 plugins 배열에 넣으면 돼요. 레거시 브라우저 지원용 @vitejs/plugin-legacy 예시로 보면 아래처럼 되죠.
import legacy from '@vitejs/plugin-legacy';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    legacy({ targets: ['defaults', 'not IE 11'] }),
  ],
});
  • 프리셋과 falsy 무시 — plugins 배열의 한 요소에 여러 플러그인을 묶은 프리셋(예: 프레임워크 통합)도 넣을 수 있고, 내부에서 배열은 평탄화돼요. falsy 요소는 무시되므로 조건부로 플러그인을 켜고 끄는 데 편리해요.
  • 순서 강제(enforce) — 플러그인 실행 위치를 정할 수 있어요. pre는 Vite 코어 플러그인보다 앞에, 기본값은 코어 다음, post는 빌드 플러그인 다음에 실행돼요. Rollup 플러그인과의 호환을 위해 순서를 맞출 필요가 있을 때 써요.
  • 조건부 적용(apply) — 기본적으로 플러그인은 serve와 build에서 모두 실행돼요. 특정 단계에서만 적용하려면 apply: 'build' 또는 apply: 'serve'로 제한하면 돼요.
  • 플러그인 찾기 — Vite는 공통 웹 개발 패턴을 기본 지원하므로, 플러그인을 찾기 전에 Features 가이드를 먼저 확인해 보라는 게 공식 조언이에요. 공식 플러그인은 Vite의 Plugins 섹션, 커뮤니티 플러그인은 Vite Plugin Registry에서 찾아요.

실제 적용(데이터스케쳐스 관점)

캔버스는 실제로 많은 플러그인을 직접 설치하기보다 Vite 템플릿에 미리 구성된 기본 플러그인 위에서 시작해요. react-ts 템플릿에는 React Fast Refresh를 위한 @vitejs/plugin-react가 이미 들어 있어서 따로 설정할 일이 없죠.

커스텀 플러그인이 필요한 순간은 보통 프레임워크 통합이나 특수한 변환이 필요할 때예요. 그럴 때 Vite의 장점은 Rollup 생태계와 호환된다는 점이에요. 이미 검증된 Rollup 플러그인을 enforce나 apply로 순서와 적용 시점을 조정해 끼워 쓰면 되죠. 다만 Vite 공식 문서의 조언처럼, Rollup 프로젝트에서 플러그인이 필요한 경우 중 상당수는 Vite에 이미 기능으로 내장돼 있어서, 플러그인을 찾기 전에 기본 기능부터 확인하는 편이 유지보수에 좋아요.

더 알아보기