Vite

빌드 도구로, 번들링 할 때 Rollup 기반의 빌드 커맨드를 사용하여 최적화된 정적 리소스들을 배포할 수 있으며 미리 정의된 설정을 제공

Vite 환경 구성

Vite 환경은 기본적인 개발 환경(.gitignore, public, src, package.json, 라이브 서버 등)을 알아서 만들어준다.

Vite 설치

cd
/* Vite 환경 구성할 파일명 입력 */
cd learn-tailwind-vite
npm init vite@latest

1. 프로젝트 이름 입력
2. Framework 선택 (Vanilla)
3. Variant 선택 (javascript)

VSCode 오픈

cd learn-tailwind-vite
code .

Vite 패키지 설치, 서버 구동

npm install
npm run dev

서버 구동 정상 실행 확인 후 서버 종료

Tailwind CSS 패키지 설치

npm install tailwindcss @tailwindcss/vite --save-dev```

vite.config.js 파일 생성 및 tailwind 플러그인 추가

touch vite.config.js

SPA(Single Page Application) 방식
vite.config.js

import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

MPA(Multiple Page Application) 방식
vite.config.js

import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
	plugins: [
    tailwindcss(),
  ],
  build: {
    rollupOptions: {
      input: {
        index: 'index.html', // 기본 index.html
        button: 'src/components/button.html',
        login: 'src/pages/login.html',
      },
    },
  },
  appType: 'mpa', // fallback 사용안함
  server: {
    // open: 'src/pages/main/index.html', // 서버 시작 시 브라우저에서 지정페이지 자동으로 열기
  },
});

MPA를 이용할 때는 꼭 해당 파일에 html파일을 불러와야 한다.

package.json 설정

빌드할 때 생기는 배포 파일인 dist 파일을 삭제해주는 명령,
package.json

"scripts": {
    "dev": "vite", 
    "build": "vite build", 
    "preview": "vite preview",
    "clean": "rm -rf dist"
  },

dist, 빌드, 프리뷰 서버 구동 단축 패키지 설치 및 명령

npm install npm-run-all --save-dev

package.json

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "clean": "rm -rf dist",
    "compile": "run-s clean build preview"
  },

tailwind 연결

style.css 파일에 작성

@import "tailwindcss";

개발 서버 구동

현재 개발중인 서버를 구동

npm run dev

빌드 & 배포 미리보기

빌드

npm run build

배포 미리보기 서버 구동

npm run preview

단축 속성 (dist 파일 삭제 + 빌드 + 배포 미리보기 서버 구동)

npm run compile

public 파일

빌드할 때 변환 없이 그대로 제공
정적인 리소스(바뀌지 않을 리소스)를 담는다.
ㄴ 파비콘, 폰트 등

절대경로를 이용해 불러온다
ㄴ (/file/img.svg)

src 파일

빌드 과정에서 최적화되는 파일
동적인 리소스를 담는다.
ㄴ 프로젝트 이미지, css, JS 등

상대경로를 이용해 불러온다
ㄴ (./style.css)