Vite

WXT는 내부적으로 Vite를 사용해 여러분의 확장 프로그램을 번들링합니다.

이 페이지에서는 프로젝트의 Vite 설정을 커스터마이징하는 방법을 설명합니다. 번들러 설정에 대해 더 알아보려면 Vite 문서를 참고하세요.

TIP

대부분의 경우 Vite의 빌드 설정을 변경할 필요가 없습니다. WXT는 모든 스토어에서 허용되는 유효한 확장 프로그램을 출력하는 합리적인 기본값을 제공합니다.

Vite 설정 변경하기

wxt.config.ts 파일을 통해 Vite 설정을 변경할 수 있습니다:

// wxt.config.ts
import { defineConfig } from 'wxt';

export default defineConfig({
  vite: () => ({
    // 여기서 설정을 덮어쓸 수 있습니다.
    // vite.config.ts 파일 안에서 `defineConfig({ ... })`를 사용하는 것과 동일합니다.
  }),
});

Vite 플러그인 추가하기

플러그인을 추가하려면 NPM 패키지를 설치하고 Vite 설정에 추가합니다:

// wxt.config.ts
import { defineConfig } from 'wxt';
import VueRouter from 'unplugin-vue-router/vite';

export default defineConfig({
  vite: () => ({
    plugins: [
      VueRouter({
        /* ... */
      }),
    ],
  }),
});

WARNING

WXT가 Vite 빌드를 조정하는 방식 때문에 일부 플러그인이 예상대로 작동하지 않을 수 있습니다. 예를 들어, vite-plugin-remove-console은 일반적으로 프로덕션 빌드(vite build) 시에만 실행됩니다. 하지만 WXT는 개발 중에 개발 서버와 빌드를 조합하여 사용하므로, 수동으로 실행 시점을 지정해야 합니다:

// wxt.config.ts
import { defineConfig } from 'wxt';
import removeConsole from 'vite-plugin-remove-console';

export default defineConfig({
  vite: (configEnv) => ({
    plugins:
      configEnv.mode === 'production'
        ? [removeConsole({ includes: ['log'] })]
        : [],
  }),
});

특정 플러그인에 문제가 발생하면 GitHub 이슈를 검색해 보세요.

해당 플러그인에 대한 이슈가 없다면 새 이슈를 생성하세요.