gongam-posts

공감

|

SM

SM

autumn

DH

JH

JH

Vite에서 dist 디렉토리?

제공

Vite 에서 등장하는 dist 디렉토리에 대해서 정리했습니다. dist는 distribution(배포) 약자로서 프로젝트를 빌드하고 최적화해서 실재 배포용으로 사용하는 파일들이 저장되는 디렉토리입니다.


Dist 개념 정리

■ 개발 과정에서 (Develpment Server ; vite dev)
1) 소스 파일이 src/, public/ , index.html 같은 원본 파일로 존재합니다.
2) 개발 서버(vite dev)는 이 파일들을 실시간으로 변환에서 브라우저에 전송합니다.

■ 빌드 과정에서 (Production Build ; vite build)
1) vite build 명령어 실행
2) Vite 가 내부적으로 Rollup 을 이용해서 코드를 번들링, 압축, 최적화함
3) 그 결과물을 /dist 폴더를 생성하여 저장함

Dist 예시

dist는 배포과정에서 생성되는 디렉토리이다.
my-project/
├── dist/                ← 빌드 결과물
│   ├── assets/
│   ├── index.html
│   ├── style.css
│   └── main.js
├── public/
├── src/
├── vite.config.js
├── package.json
└── ...

코멘트

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다