vite plugin과 base Path에 대한 간단요약.
플러그인을 사용하려면 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 커뮤니티 플러그인
다른 플러그인을 쉽게 활성화 하거나 비활성화 시킬 수 있는 잘못된 플러그인은 무시된다.
일부 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'
}
]
})
대표적으로 개발서버 혹은 빌드 등 조건부 동작이 필요할 때 사용
기본적으로
serve
와build
시 모두 동작
apply
프로퍼티를 이용해 조건적으로 동작하게 할 수 있다.
// vite.config.js
import typescript2 from 'rollup-plugin-typescript2'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
{
...typescript2(),
apply: 'build'
}
]
})
에셋 등 과 관련된 옵션이다.
default 값은 /
이다. base설정을 통해 프로젝트 루트가 될 디렉터리를 명시해 줄 수 있으며, CLI로는 vite build --base=/my/public/path
가능하다.
JS - import / CSS - url() / .html 파일에서 참조되는 URL들은 이 base를 기준으로 자동으로 맞춰지게 된다.
동적으로 URL를 생성해야 하는 경우, import.meta.env.BASE_URL
를 이용하여 설정이 가능하다.
빌드 관련 설정은 build
프로퍼티로 설정할 수 있다.
파일 변경 시 다시 빌드하는 옵션은 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
또는 번들링 된 파일을 변경하게 되면 다시 빌드가 시작된다.