<aside> ❗ JS, HTML, CSS, 이미지 파일들을 브라우저에서 사용할 수 있도록 하나의 JS 파일(번들)로 합쳐서 코드를 최적화 시켜주는 번들러이다.

</aside>

babel

// babel 설치
npm i -D @babel/core @babel/preset-env

// async, await 키워드를 사용하기 위한 패키지 설치
npm i -D @babel/plugin-transform-runtime

// .babelrc.js (babel 설정 파일)
module.exports = {
	presets: ['@babel/preset-env'],
	plugins: [
			['@babel/plugin-transform-runtime']
		]
}

// package.json
"browserslist": [
	"> 1%",
	"last 2 versions"
]

• babel : 최신 버전의 JS를 구형 버전의 브라우저에서도 작동하도록 변환 시켜 주는 컴파일러 또는 JSX 언어를 순수한 JS 로 변환 시켜 주는 컴파일러. webpack에 포함되어 있다.
• .babelrc.js 파일은 babel의 환경 설정을 위한 파일이다.
• babel의 ‘@babel/plugin-transform-runtime’ plugin을 통해서 async, await 키워드를 사용할 수 있다.

@babel/polyfill

• Promise, Map, Set 과 같이, ES6 이전 JS 에서 정의되어 있지 않은 객체들을 추가해주는 패키지이다.
• 브라우저가 지원하지 않는 공백을 메꿔주는 패키지이다.
• polyfill는 JS의 문법에 위배되지는 않지만 구버전의 JS에 정의 되어 있지 않는 객체를 추가한다.
• babel은 JS의 문법에 위배되는 새로운 문법을 재작성(컴파일)한다.

Webpack

npm i -D webpack webpack-cli webpack-dev-server@next

• webpack 패키지를 설치한다.

"scripts": {
    "dev": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  }