Vite : vite-plugin-static-copy를 통해 정적 파일 복사하기

 

개요

 

이번 시간에는 Vite를 통해 프로젝트를 진행하던중에 정적파일 복사를 위해 사용한 패키지에 대해 한번 소개해보도록 하겠습니다.

 

 

 

vite-plugin-static-copy 패키지

 

Vite에서 복사를 위해 vite-plugin-static-copy 라는 패키지를 사용하였는데요, 해당 플러그인을 통해 Vite 프로젝트에서 정적파일을 복사하거나 프로젝트에 추가할 수 있습니다.

 

vite-plugin-static-copy

 

 

 

vite-plugin-static-copy 사용법 

 

사용법은 무척 간단합니다.

npm i -D vite-plugin-static-copy

 

위와 같이 패키지를 설치합니다. 

 

 

// vite.config.js / vite.config.ts
import { viteStaticCopy } from 'vite-plugin-static-copy'

export default {
  plugins: [
    viteStaticCopy({
      targets: [
        {
          src: 'bin/example.wasm',
          dest: 'wasm-files'
        }
      ]
    })
  ]
}

 

이후 targets 배열에 복사할 파일을 src 목록에 담고, 최종적으로 복사될 경로를 dest 폴더에 지정한뒤 빌드를 수행하면 됩니다. 

 

 

 

마무리

 

이번 시간에는 간단하게 까먹지 않기 위해 vite-plugin-static-copy 패키지에 대해 정리해보았습니다.

 

Webpack에 익숙해져 있었는데, Vite도 실제로 구성하여 살펴보니 어렵지 않고 쉽게 적용할 수 있는 것 같습니다. 

 

감사합니다.