webpack과 babel에 대하여

gyojinnK·2024년 4월 2일

TIL - 지나치지 말고 집중해보기

목록 보기

19/23

이번엔 webpack과 babel에 대해서 글을 작성해보자.
프로젝트 개발 과정에서 vite-bundle-visualizer를 사용한 경험이 있는데 이는 프로젝트를 구성하는 bundle를 시각적인 블록으로 크기를 확인할 수 있다.
여기서 bundle하면 떠오르는 webpack과 파생되는 babel을 이번 기회에 확실하게 알아보자.

webpack & babel

webpack

webpack이란 무엇인가?

webpack은 자바스크립트(JS) 애플리케이션을 위한 모듈 번들러이다.
웹 애플리케이션을 구성하는 자원(자바스크립트, CSS, 이미지 파일 등)을 모두 모듈로 간주하고 이러한 모듈들을 하나의 파일 또는 몇 개의 파일로 합치는 작업을 수행한다. 이 과정에서 다양한 로더(loader)를 사용하여 CSS, 이미지 파일 등을 JS 코드 내에서 사용할 수 있게 변환하거나, 플러그인(plugin)을 통해 코드 압축, 환경 변수 주입 등 추가적인 작업을 수행할 수 있다.

webpack 주요 기능

모듈 번들링
- 다양한 자원을 모듈로 관리하고, 의존성을 파악하여 번들(bundle)로 묶음
로더(loder)
- JS가 아닌 자원(CSS, 이미지, 폰트 등)을 JS에서 사용할 수 있도록 변환
플러그인 시스템
- 번들 과정을 커스터마이징하여 다양한 작업(압축, 최적화 등)을 수행
개발 서버
- 개발 중 실시간 리로딩을 지원하는 웹 서버를 제공

webpack +

Tree Shaking - Webpack 2부터 도입된 이 기능은 사용되지 않는 코드를 제거해 번들의 크기를 줄이는 기법으로 ES6 모듈 문법(import와 export)을 사용할 때 효과적으로 작동한다. 개발자가 명시적으로 사용하지 않은 코드는 최종 번들에서 제외된다.
Module Federation - Webpack 5에서 새롭게 도입된 이 기능은 여러 개의 독립적인 빌드(애플리케이션)가 실시간으로 동적 모듈을 공유할 수 있게 해준다. 마이크로프론트엔드 아키텍처에서 유용하게 사용될 수 있다.
환경 변수(Environment Variables) - Webpack은 DefinePlugin을 사용해 빌드 시점에 환경 변수를 주입할 수 있다. 이를 통해 개발, 스테이징, 프로덕션 등의 환경에 따라 다른 설정을 적용할 수 있다.

babel

babel이란 무엇인가?

Babel은 자바스크립트(JS) 코드를 변환하는 컴파일러다. 주로 최신 JS 문법(ECMAScript 2015+ 코드)을 이전 버전의 JS로 변환하여 구형 브라우저에서도 해당 코드가 실행될 수 있도록 한다. 또한, JSX 같은 리액트 문법이나 타입스크립트 같은 JS의 확장 문법을 일반 JS 코드로 변환하는 데에도 사용된다.

babel 주요 기능

코드 변환
- 최신 JS 문법을 구형 브라우저에서도 실행 가능한 코드로 변환
폴리필(polyfill)
- 최신 JS API를 지원하지 않는 브라우저에서 해당 API를 사용할 수 있게 해주는 코드 추가 (@babel/polyfill이 이 역할을 함)
플러그인 시스템
- 다양한 변환 작업을 커스터마이징할 수 있는 플러그인 시스템 제공