출처: 이웅모 《모던 자바스크립트 Deep Dive》 49장 · 본인 말로 정리

한줄 요약

모던 문법을 쓰되 구형 환경도 지원하려면 Babel(트랜스파일) + 필요 시 polyfill, 모듈을 묶어 브라우저가 로드하기 쉽게 하려면 Webpack(번들) 이 전형적 조합.

왜 필요한가

에버그린 브라우저는 ES6 지원율이 높지만 구형·ES.NEXT는 부족할 수 있다. “최신으로 작성 → 배포 타겟으로 변환”이 개발 환경의 역할.

Babel

1. 설치
2. 프리셋(@babel/preset-env 등)으로 변환 범위 설정
3. babel.config.json
4. 소스 → 트랜스파일 → 출력
5. 문법만으로 부족한 API는 플러그인/polyfill로 런타임 보완

문법 변환(transpile) ≠ API polyfill 임을 구분.

Webpack

의존성 그래프를 따라가 번들 생성.

전형적인 세팅 감각:

• entry / output
• babel-loader로 JS를 Babel에 통과
• module.rules

module.exports = {
  entry: './src/index.js',
  output: { filename: 'bundle.js' },
  module: {
    rules: [{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }],
  },
};

체크포인트