# Babel

바벨(Babel)은 모던 JavaScript를 오늘 날 바로 사용할 수 있도록 만들어주는 트랜스파일러(Transpiler) 입니다.

# 실습

# 1. Babel 로더, 코어, 프리셋 설치

Webpack에서 Babel을 사용하려면 babel-loader를 설치해야 합니다. 추가적으로 @babel/core, @babel/preset-env로 함께 설치합니다.

$ yarn add babel-loader @babel/core @babel/preset-env -D

# 2. 로더 설정

설치한 babel-loader를 Webpack에 설정합니다.

webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}

# 3. Babel 트랜스파일링 결과

bundle 명령을 수행하면 번들링 된 코드가 ES6 → ES5 코드로 변경된 결과를 확인할 수 있습니다.

yarn bundle

# 참고

보다 자세한 사용법은 babel-loader 문서를 참고하세요.