[Quasar_Framework] 02. Build Tool(번들러)

🔧 대표적인 번들러 예시 ✅ 번들러(Build Tool)란?
**번들러(Bundle + er)**는 여러 개의 소스 파일(HTML, CSS, JS, 이미지 등)을
하나 또는 몇 개의 파일로 묶어 최적화하는 도구입니다.
📦 즉, “여러 자원을 브라우저가 효율적으로 처리할 수 있도록
하나로 묶고 가공하는 역할”을 합니다.

용어	한글 표기	의미
Build Tool	보통 "빌드 도구" 또는 "빌드 툴"이라고 표기	소스코드를 실제 실행 가능한 코드로 변환·최적화하는 도구 전반 (ex. 컴파일러, 번들러, 압축기 등 포함)
Bundler	번들러라고 표기	여러 파일을 하나로 묶고 브라우저가 이해할 수 있도록 변환·패키징하는 역할을 하는 빌드 도구의 한 종류

---

🎯 왜 필요한가요?

현대 웹 앱은 다음과 같은 수많은 파일로 구성됩니다:

• .vue, .js, .ts, .css, .scss, .json, 이미지, 폰트 등…

👉 그런데 브라우저는 기본적으로 JavaScript와 HTML만 직접 실행할 수 있고,
Vue, SCSS, TypeScript 등은 브라우저가 직접 이해하지 못합니다.

그래서 이들을 **변환(트랜스파일)**하고, **압축(minify)**하고, 하나로 묶어서
브라우저가 이해할 수 있도록 만드는 도구가 바로 번들러입니다.

---

🔧 대표적인 번들러 예시

 

번들러	특징
Webpack	설정은 복잡하지만 유연하고 강력함 (대규모 프로젝트에 적합)
Vite	빠른 개발 서버와 빌드 속도, 최신 ESM 기반
Parcel	설정이 거의 필요 없음 (제로 설정 번들러)
Rollup	라이브러리 제작에 최적화된 번들러

---

📦 번들링 과정 예시

1. App.vue, main.js, styles.scss, config.json 등등 여러 파일이 있다면
2. 번들러는 이를 아래처럼 처리합니다

[개발자 소스코드들]  → Vue/TypeScript → JavaScript로 트랜스파일  → SCSS → CSS로 변환  → 코드 압축 및 최적화  → 하나 또는 소수의 파일로 묶음 (bundle.js)

최종적으로는:

<script src="dist/bundle.js"></script>

브라우저는 이것만 실행하면 됩니다.

---

✅ Quasar CLI에서의 Vite vs Webpack 비교 표

  

항목	Vite	Webpack
🛠️ 개발 방식	모듈 단위로 ES Module을 활용하여 브라우저에 바로 전달 (Hot Reload 빠름)	전체 코드를 번들링하여 dev 서버로 서빙 (로딩 속도 느림)
⚡ 개발 속도(HMR)	매우 빠름 (초고속 핫 리로드 및 변경 반영)	느림 (리빌드 시 전체 번들 재컴파일)
📦 번들링 시점	개발 중에는 번들링 X, 빌드 시점에만 번들링	개발 시에도 번들링 수행
🚀 최종 빌드 속도	더 빠름 (ESBuild 기반)	느림 (Babel 기반)
🧩 플러그인 생태계	다소 제한적이지만 빠르게 성장 중	성숙하고 풍부한 생태계
⚙️ 구성 유연성	직관적이고 간단 (Vite 자체 설정 구조가 단순함)	복잡하지만 정밀한 설정 가능 (Webpack의 강점)
🧪 정교한 설정/커스터마이징	간단하지만 제한적일 수 있음	매우 유연하고 복잡한 설정 가능 (로더, 플러그인 등)
📁 소스맵 지원	빠르고 정확한 소스맵 제공	소스맵 생성 속도 느림
📱 Quasar Native 플랫폼 지원	Cordova, Capacitor, Electron 지원은 상대적으로 적음 (일부 제약)	Quasar의 모든 모드와 완벽 호환 (Electron, SSR 등 포함)
👶 초보자 추천	초보자에게 매우 적합 (빠른 피드백 루프)	고급 기능까지 쓰려면 설정 학습 필요
🧑‍💻 대규모 프로젝트	성능은 뛰어나지만 아직 제한적 이슈 있음 (플러그인 부족)	완성도 높고 대규모 프로젝트에 적합
📚 공식 문서/자료	문서 친절, 아직 Webpack만큼은 아님	방대한 문서와 커뮤니티

---

🔍 프로젝트 CLI가 Vite인지 Webpack인지 구분하기
✅ 1. quasar.config.js 또는 quasar.conf.js 파일 확인

 

CLI Variant	구분 방법
Vite	파일 상단에 import { defineConfig } from 'quasar' 또는 from 'quasar/vite' 등이 보임
Webpack	module.exports = function (ctx) { return { ... } } 형태로 되어 있음 (CommonJS 형식)

✅ 2. 패키지 파일(package.json) 확인

# Vite CLI variant일때
"devDependencies": {
  "@quasar/app-vite": "^1.0.0"
}

# Webpack CLI variant일때
"devDependencies": {
  "@quasar/app-webpack": "^3.0.0"
}​

✅ 3. 명령어로 확인 (옵션)
터미널에서 아래 명령어 실행

quasar info​

출력 예시에서 다음과 같은 줄을 찾으세요

# Vite CLI variant일때
CLI tooling: @quasar/app-vite v1.4.2

# Webpack CLI variant일때
CLI tooling: @quasar/app-webpack v3.5.1​