태그: Build Tools
5편
-
Webpack 5 내부 동작과 설정: 의존성 그래프, 로더·플러그인 구조, 코드 스플리팅, Tree Shaking
Webpack 5 정리. 의존성 그래프와 번들링 알고리즘, 로더·플러그인 아키텍처, 코드 스플리팅 전략, Tree Shaking 메커니즘, 프로덕션 패턴, 설치와 기본 설정, Loaders와 Plugins를 다룹니다.
-
PostCSS 플러그인 활용: Autoprefixer, CSS Nesting, CSS Modules, Webpack·Vite·Tailwind 연동
PostCSS로 CSS를 변환하는 방법. 설치와 기본 설정, Autoprefixer, CSS Nesting, CSS Modules, Webpack·Vite 통합, Tailwind CSS 연동을 예제로 정리합니다.
-
Parcel로 설정 없이 번들링하기: 내부 파이프라인, TypeScript·React·CSS, 환경 변수, 코드 스플리팅
Parcel로 설정 없이 번들링하는 방법. Parcel 2 파이프라인 구조, 설치와 기본 사용, TypeScript·React·CSS·이미지 처리, 환경 변수, Code Splitting과 Tree Shaking을 예제로 정리합니다.
-
esbuild로 빠르게 번들링하기: Build API, TypeScript·JSX, Watch·Dev Server, 플러그인
esbuild로 번들링하는 방법. Go 기반으로 빠른 이유, Build API, TypeScript와 JSX 처리, Watch Mode와 Dev Server, 플러그인 작성, React 프로젝트 예제를 정리합니다.
-
Babel 내부 동작: 파서·AST 순회·코드 생성과 Presets·Plugins 설정
@babel/parser가 소스를 AST로 만들고, traverse의 방문자가 노드를 바꾸고, generator가 코드와 소스 맵을 내보내는 과정을 따라간 뒤 preset-env와 core-js 폴리필, Webpack·Vite 통합 설정을 다룹니다.