Vite Plugin, base Path, Custom Build, File Change Rebuild

vite plugin과 base Path에 대한 간단요약.

Plugin

플러그인을 사용하려면 devDepencies 에 플러그인을 추가하고, vite.config.js 설정 파일의 plugins 배열에 해당 플러그인을 포함시켜야 한다.

ex) @vitejs/plugin-legacy

$ npm add -D @vitejs/plugin-legacy

// vite.config.js
import legacy from '@vitejs/plugin-legacy'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ]
})

다른 플러그인들에 대해서는 아래 링크를 통해 확인할 수 있다.

vite 공식 플러그인 리스트 및 정보
vite 커뮤니티 플러그인

다른 플러그인을 쉽게 활성화 하거나 비활성화 시킬 수 있는 잘못된 플러그인은 무시된다.

Plugin 순서

일부 Rollup 플러그인과의 호환을 위해 플러그인 순서를 정하거나 빌드 시에만 플러그인이 동작하도록 구성 할 수 있다. vite 플러그인만을 위한 기능이며, enforce 프로퍼티를 이용하여 순서를 정할 수 있다.

• pre : vite 코어 플러그인보다 먼저 실행하고자 하는 경우
• default : vite 코어 플러그인 이후 실행하고자 하는 경우
• post : vite 빌드 플러그인 이후에 실행하고자 하는 경우

// vite.config.js
import image from '@rollup/plugin-image'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    {
      ...image(),
      enforce: 'pre'
    }
  ]
})

자세한 플러그인 가이드

Plugin 조건부

대표적으로 개발서버 혹은 빌드 등 조건부 동작이 필요할 때 사용

기본적으로 serve 와 build 시 모두 동작

apply 프로퍼티를 이용해 조건적으로 동작하게 할 수 있다.

// vite.config.js
import typescript2 from 'rollup-plugin-typescript2'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    {
      ...typescript2(),
      apply: 'build'
    }
  ]
})

base Path

에셋 등 과 관련된 옵션이다.

default 값은 / 이다. base설정을 통해 프로젝트 루트가 될 디렉터리를 명시해 줄 수 있으며, CLI로는 vite build --base=/my/public/path 가능하다.

JS - import / CSS - url() / .html 파일에서 참조되는 URL들은 이 base를 기준으로 자동으로 맞춰지게 된다.

동적으로 URL를 생성해야 하는 경우, import.meta.env.BASE_URL 를 이용하여 설정이 가능하다.

base 옵션 상세 설정

customizing the Build

빌드 관련 설정은 build 프로퍼티로 설정할 수 있다.

빌드 옵션 상세 정보

rebuild on files changes

파일 변경 시 다시 빌드하는 옵션은 vite build --watch 명령을 통해 Rollup Watcher를 활성화 할 수 있다. 혹은 vite.config.js 에서 build.watch 옵션에서 WatcherOptions 를 직접 명시할 수도 있다.

// vite.config.js
export default defineConfig({
  build: {
    watch: {
      // https://rollupjs.org/configuration-options/#watch
    }
  }
})

--watch 플래그가 활성화된 상태에서 vite.config.js 또는 번들링 된 파일을 변경하게 되면 다시 빌드가 시작된다.