Babel 이란? 🧐

정의 📋

하위 브라우저에서 지원되지 않는 기능들을 지원될 수 있도록 도와주는 도구

특징 👋

• babel이 실행될 때 필요한 컴파일러 (babel-cli)가 필요

Babel이 실행될 수 있는 환경 설정을 위해 필요한 모듈 🛠

@babel/cli

역할

• babel이 실행될 수 있는 환경을 만들어줌

@babel/core

정의

• javascript 파일을 변환시키는 여러가지 기능들을 포함하고 있는 모듈

역할

• 변환을 위해 실행되는 기능들만 제공
• 하위 호환성을 어떻게 맞추어야 하는지 설정

동작

1. @babel/cli로 실행
2. babel이 변환하고자 하는 파일을 input으로 받아들임
3. @babel/core에 제공되는 기능들을 통해 javascript 파일을 변환

@babel/preset-env

정의

• 어떤 스펙으로 변환시키는지 알려주는 모듈

특징

• 하위 브라우저가 모던 자바스크립트 기능들을 지원하기 위해서 필요한 내용들을 담고있음
• preset으로 시작하는 바벨에 대한 모듈들은 특정 기능들 하나하나를 설치하는 것이 아닌 여러 기능들을 제공하기 위해 묶여있는 패키지같은 역할을 함
• 모던 자바스크립트에서 제공되는 기능들이 es5기준으로 하위 브라우저에서도 동작할 수 있게끔 제공되지 않는 기능들을 제공될 수 있게끔 많은 스펙들에 대한 내용을 담고 있음
• 특정 라이브러리나 언어를 지원하기 위해 만들어진 preset들이 있음
  Ex. @babel/preset-react 등 …

역할

• 제공하고자하는 기능에 따라 많은 내용들을 담고있는 패키지 역할

Webpack에서 Babel을 이용할 수 있게해주는 모듈 🛠

Babel-loader

정의

자바스크립트 코드를 기준으로 babel을 사용할 수 있게해주는 모듈

Polyfill이란? 🧐

역할 💪

• 현재 환경에서 어떤 기능이 지원되지 않을 때 또는 사용할 수 없을 때의 환경에서 지원할 수 있게 대체 기능을 추가
• 하위 브라우저에서 ES5 기능이 지원되지 않는 상황일 때도 ES5에 대한 polyfill이 적용돼서 기능들 지원이 될 수 있게 해줌

조건 🔏

• 어플리케이션에서 최초로 1번만 로드가 되어야한다

출처 📝

• Vue.js 압축 완성 올인원 패키지 Online - 패스트캠퍼스

위의 내용은 Webpack을 공부하며 개인적으로 정리한 내용입니다.
본문에 관련된 문제 사항이 있는 경우, 댓글로 남겨주시면 감사하겠습니다! 🙌