[8주차] Webpack

[xeunnie]

Webpack

키워드

•	번들링 & 코드 스플리팅: entry, output, chunk, splitChunksPlugin
•	로드 속도 최적화: Tree Shaking, Lazy Loading, dynamic import
•	로더: babel-loader, css-loader, style-loader, file-loader, url-loader
•	플러그인: HtmlWebpackPlugin, DefinePlugin, HotModuleReplacementPlugin
•	캐싱 & 빌드 최적화: cache, hashing, contenthash, asset module
•	모듈 해석 & 경로 설정: alias, resolve, extensions
•	개발 환경 설정: mode, devServer, source-map
•	성능 최적화: minification, optimization, terser-webpack-plugin
•	Webpack과 Babel: 차이점, 함께 사용하는 이유
•	Webpack과 Vite: 차이점, 트렌드 비교

⸻

Webpack 핵심 개념

1. Webpack 기본 개념
   • Webpack은 모듈 번들러로, 여러 개의 파일(JS, CSS, 이미지 등)을 하나로 번들링하여 최적화된 결과물을 생성함.
   • entry: 애플리케이션이 실행될 시작 파일을 지정하는 옵션
   • output: 번들링된 파일을 어떤 위치에, 어떤 이름으로 생성할지 설정
   • loaders: JavaScript가 아닌 파일을 변환하는 도구 (ex: Babel, CSS, 이미지 등)
   • plugins: 번들링된 결과물을 추가적으로 최적화하거나 조작하는 도구
   • mode: development, production, none 3가지 환경을 지원하여 최적화 및 디버깅 설정을 다르게 적용

2. 코드 스플리팅 & 최적화
   • splitChunksPlugin: 공통 모듈을 분리하여 캐싱 효율을 높임.
   • 동적 import(import()): 필요할 때만 특정 모듈을 불러와 성능 개선.
   • TerserPlugin: JavaScript 파일을 최소화하여 로딩 속도를 높임.

3. 로더 (Loaders)
   • JavaScript: babel-loader (ES6+ 코드를 ES5로 변환)
   • CSS: css-loader, style-loader (CSS 파일을 JavaScript로 변환 및 주입)
   • 이미지 & 폰트: file-loader, url-loader (리소스를 번들링할 때 최적화)
   • 기타: ts-loader(TypeScript 지원), svg-loader(SVG 파일 처리)

4. 플러그인 (Plugins)
   • HtmlWebpackPlugin: 자동으로 HTML 파일을 생성하고 번들링된 파일을 포함
   • DefinePlugin: 전역 상수를 주입하여 환경 변수 활용
   • HotModuleReplacementPlugin (HMR): 코드 변경 시 새로고침 없이 즉시 반영

5. Webpack의 캐싱 전략
   • contenthash: 파일이 변경될 때만 새로운 해시를 생성하여 브라우저 캐싱을 효율적으로 활용
   • moduleIds: deterministic: 변경되지 않은 파일의 해시가 유지되어 캐싱을 효과적으로 활용
   • cache: true: 빌드 속도를 개선하기 위해 캐싱 활성화

6. Webpack의 빌드 성능 최적화
   • thread-loader: 여러 개의 프로세스를 활용하여 로더 실행 속도 향상
   • cache-loader: 이전 빌드 결과를 캐싱하여 반복 작업 속도를 개선
   • babel-loader의 cacheDirectory 옵션 활성화
   • optimization.splitChunks: 코드 스플리팅을 통한 로딩 성능 개선

7. Webpack DevServer
   • 개발 환경에서 코드 변경 시 자동 리로딩 (hot: true)
   • API 프록시 설정을 통해 백엔드와의 CORS 문제 해결 가능
   • devtool: 'source-map' 옵션으로 디버깅 편의성 증가

8. Webpack과 Babel의 관계
   • Babel은 최신 JavaScript를 ES5로 변환하는 트랜스파일러
   • Webpack의 babel-loader를 사용하여 모듈을 트랜스파일링 후 번들링 가능
   • Webpack과 Babel을 함께 사용하면 최신 JS 문법과 모듈 시스템을 효율적으로 관리할 수 있음.

9. Webpack vs Vite
   • Webpack은 번들링 중심, Vite는 ESM 기반 개발 환경 최적화
   • Webpack은 전체 프로젝트를 번들링하고, Vite는 필요한 파일만 실행(핫 모듈 로딩 속도 빠름)
   • Webpack은 프로덕션 환경에서 여전히 널리 사용되지만, Vite는 개발 환경에서 점점 더 선호됨.

⸻

면접 대비 Webpack 심화 개념

1. Webpack이 필요한 이유
   • 모듈 시스템을 지원: 여러 개의 JS 파일을 하나로 묶어 최적화
   • 최적화된 빌드: 코드 스플리팅, 캐싱, 트리 쉐이킹 등을 통해 성능 향상
   • 다양한 리소스 번들링: CSS, 이미지, 폰트, TypeScript 등의 리소스를 효율적으로 처리

2. Webpack의 번들링 과정

   1. Entry: 시작 파일(index.js)을 읽어들임
   2. Dependency Graph: 의존 관계를 분석하여 모듈을 정리
   3. Loaders 적용: CSS, 이미지, Babel 등 필요한 변환 수행
   4. Plugins 적용: 최적화 및 추가적인 기능 적용
   5. Output: 번들된 결과물을 dist/ 폴더에 생성

3. Webpack과 Parcel/Vite/Rollup 비교
   • Webpack: 전통적인 번들러, 설정이 복잡하지만 강력한 기능 제공
   • Parcel: 설정이 거의 필요 없고 빠름, 대규모 프로젝트에서는 다소 한계 존재
   • Vite: 개발 서버 속도가 빠름, ES 모듈을 활용하여 핫 리로딩 성능 최적화
   • Rollup: 라이브러리 번들링에 특화, 트리 쉐이킹 최적화가 뛰어남

4. Webpack의 Tree Shaking 동작 방식
   • 불필요한 코드 제거(unused exports)를 통해 번들 크기를 줄임.
   • sideEffects: false 설정을 활용하면 정적으로 분석하여 불필요한 코드를 삭제 가능.
   • ES Modules(ESM) 기반에서 가장 효과적이며, CommonJS에서는 제한적.

5. Webpack에서 Code Splitting 적용 사례
   • import()를 사용한 동적 import 적용 (Lazy Loading)
   • optimization.splitChunks 옵션을 활용한 공통 모듈 분리
   • prefetch 및 preload를 활용하여 미리 필요한 코드 로드

6. Webpack에서 Source Map 활용
   • source-map: 전체 소스 맵 제공(디버깅 용이하지만 빌드 속도 저하)
   • eval-source-map: 빠른 빌드를 지원하지만 보안 이슈 존재
   • hidden-source-map: 프로덕션에서 보안 강화

7. Webpack에서 이미지 최적화
   • image-webpack-loader를 활용하여 이미지 크기 줄이기
   • url-loader와 file-loader를 조합하여 작은 이미지 인라인 처리 가능

8. Webpack의 Hot Module Replacement (HMR)
   • 개발 중 변경된 코드만 즉시 반영하여 빠른 개발 환경 제공
   • module.hot.accept()를 사용하여 특정 모듈만 업데이트 가능

9. Webpack 설정 최적화 Best Practices
   • mode: 'production'으로 설정하여 최적화 적용
   • splitChunks로 코드 스플리팅 적용하여 캐싱 효율 증가
   • devtool: false로 소스맵을 비활성화하여 빌드 속도 개선
   • babel-loader의 cacheDirectory: true 옵션으로 빌드 속도 최적화
   • terser-webpack-plugin으로 코드 압축 및 난독화 적용