webpack과 babel에 대하여

프로젝트 개발 과정에서 vite-bundle-visualizer를 사용한 경험이 있는데 이는 프로젝트를 구성하는 bundle를 시각적인 블록으로 크기를 확인할 수 있다.

여기서 bundle하면 떠오르는 webpack과 파생되는 babel을 이번 기회에 확실하게 알아보자.

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

babel 주요 기능

• 코드 변환
  최신 JS 문법을 구형 브라우저에서도 실행 가능한 코드로 변환

  
  

• 폴리필(polyfill)
  최신 JS API를 지원하지 않는 브라우저에서 해당 API를 사용할 수 있게 해주는 코드 추가(`@babel/polyfill`이 이 역할을 함)

  
  

• 플러그인 시스템
  다양한 변환 작업을 커스터마이징할 수 있는 플러그인 시스템 제공

webpack과 babel의 조합

webpack이 애플리케이션의 모듈들을 하나의 파일로 번들링하는 과정에서, Babel을 로더(loder)로 사용하여 최신 JS 문법이나 JSX 등을 일반 JS로 변환할 수 있다. 이렇게 함으로써 최신 기술을 사용하면서도 다양한 환경에서의 호환성을 확보할 수 있다.

refer

• https://velog.io/@jackjack/Webpack-Babel-%EB%AA%A8%EB%A5%B4%EB%8A%94%EC%82%AC%EB%9E%8C?utm_source=oneoneone

• https://juneyr.dev/2019-02-20/webpack-babel