프로젝트 구조

WXT는 엄격한 프로젝트 구조를 따릅니다. 기본적으로 다음과 같은 평면 폴더 구조를 가집니다:

📂 {rootDir}/
   📁 .output/
   📁 .wxt/
   📁 assets/
   📁 components/
   📁 composables/
   📁 entrypoints/
   📁 hooks/
   📁 modules/
   📁 public/
   📁 utils/
   📄 .env
   📄 .env.publish
   📄 app.config.ts
   📄 package.json
   📄 tsconfig.json
   📄 web-ext.config.ts
   📄 wxt.config.ts

각 파일과 디렉토리에 대한 간단한 설명입니다:

• .output/: 모든 빌드 결과물이 이곳에 저장됩니다.
• .wxt/: WXT에 의해 생성되며, TS 설정을 포함합니다.
• assets/: WXT에 의해 처리될 CSS, 이미지 및 기타 에셋을 포함합니다.
• components/: 기본적으로 자동으로 임포트되며, UI 컴포넌트를 포함합니다.
• composables/: 기본적으로 자동으로 임포트되며, Vue용 합성 함수를 포함합니다.
• entrypoints/: 확장 프로그램으로 번들링될 모든 엔트리포인트를 포함합니다.
• hooks/: 기본적으로 자동으로 임포트되며, React와 Solid용 훅을 포함합니다.
• public/: WXT에 의해 처리되지 않고 그대로 출력 폴더에 복사될 파일을 포함합니다.
• utils/: 기본적으로 자동으로 임포트되며, 프로젝트 전반에서 사용되는 일반 유틸리티를 포함합니다.
• .env: 환경 변수를 포함합니다.
• .env.publish: 퍼블리싱을 위한 환경 변수를 포함합니다.
• app.config.ts: 런타임 설정을 포함합니다.
• package.json: 패키지 매니저에서 사용하는 표준 파일입니다.
• tsconfig.json: TypeScript의 동작 방식을 설정합니다.
• web-ext.config.ts: 브라우저 시작 설정을 구성합니다.
• wxt.config.ts: WXT 프로젝트의 주요 설정 파일입니다.

src/ 디렉토리 추가하기

많은 개발자들은 소스 코드와 설정 파일을 분리하기 위해 src/ 디렉토리를 사용합니다. wxt.config.ts 파일에서 이를 활성화할 수 있습니다:

// wxt.config.ts
export default defineConfig({
  srcDir: 'src',
});

이 기능을 활성화한 후, 프로젝트 구조는 다음과 같이 보일 것입니다:

📂 {rootDir}/
   📁 .output/
   📁 .wxt/
   📂 src/
      📁 assets/
      📁 components/
      📁 composables/
      📁 entrypoints/
      📁 hooks/
      📁 modules/
      📁 public/
      📁 utils/
      📄 app.config.ts
   📄 .env
   📄 .env.publish
   📄 package.json
   📄 tsconfig.json
   📄 web-ext.config.ts
   📄 wxt.config.ts

다른 디렉토리 커스텀하기

다음 디렉토리를 설정할 수 있습니다:

// wxt.config.ts
export default defineConfig({
  // 프로젝트 루트 기준
  srcDir: "src",             // 기본값: "."
  outDir: "dist",            // 기본값: ".output"

  // srcDir 기준
  entrypointsDir: "entries", // 기본값: "entrypoints"
  modulesDir: "wxt-modules", // 기본값: "modules"
  publicDir: "static",       // 기본값: "public"
})

절대 경로나 상대 경로를 사용할 수 있습니다.