프로젝트 세팅 1 - vite.config.ts

프로젝트 세팅을 할 때, 

그저 폴더 구조 짜기, 타입 설정하기 등등이 다였던 나는

 

vite 빌드 툴을 사용하면서

vite.config.ts 를 설정하면서 중요성을 깨닫고 있다.

 

 

vite.config.ts 에서는

 

파일 세팅

1. 프로젝트 루트 경로 설정

2. 경로 별칭 설정

.

.

 

빌드 세팅

1. 빌드 결과물 저장 경로 설정

2. 코드 압축 여부

3. 소스맵 생성

.

.

 

 개발 서버 세팅

1. 포트 번호 설정

2. 브라우저 자동실행 설정

.

.

플러그인 세팅

1. env 변수 안전하게 관리 (vite-plugin-env-compatible)

2. tailwind 빌드 최적화(vite-plugin-tailwind-purgecss)

.

.

 

등등을 설정 할 수 있다.

 

export default defineConfig({
  plugins: [react()],
  root: "./src", //프로젝트의 루트 경로 설정
  build: {
    outDir: "../dist", //빌드 결과물 저장 경로 설정
  },
  server: {
    port: 4000, //포트 번호 설정
    open: true, //브라우저 자동 실행 설정
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"), //src 폴더를 @ 경로로 설정
    },
  },
});

 

우선 이정도만 기본 설정으로 세팅해두었다.

 

플러그인 세팅을 할 때는

npm 으로 플러그인 설치 후 사용하는거라

꼭 필요한게 아니라면 나중에 필요할 때 설치할까 한다.

(프로젝트가 무거워질 수도 있으니...)