webpack에 babel 사용해보기

react를 사용하거나 se6를 지원하지 않는 브라우저를 지원하기 위해 webpack 설정시 같이 사용할 수 있는 babel에 대해서 간략히 정리해 본다.

babel

babel은 javascript compiler로 es6 이상 버전의 코드를 브라우저 호환성을 위해 es5 코드로 변환해주는 역할을 한다.

또한 typerscript, react 등의 다른 문법도 preset을 통해 변환할 수 있다.

우선은 react 개발을 CRA가 아닌 webpack으로 시작한다는 가정 하에 어떻게 사용할 수 있는지 알아보자

필요한 preset과 loader 불러오기

babel의 사용 방법 중에는 webpack과 함께 사용하는 방법이 있는데 babel을 webpack에서 사용하기 위해서는 기본적으로 1개의 loader와 2개의 preset 마지막으로 babel/core가 필요하다.

npm install -D @babel/core @babel/preset-env @babel/preset-react babel-loader

• babel/core :

  babel tool-chain의 핵심으로 코드를 분석해 설정 값에 따라 컴파일한다.

• babel/preset-env :

  최신 javascript를 변환할 수 있도록 사전에 설정된 값으로, babel/core가 분석한 코드를 컴파일할 방법을 제시한다.

• babel/preset-react :

  react와 JSX 문법을 변환할 수 있는 설정으로, React을 번들링하기 위해서 필요하다.

• babel-loader :
  webpack에 babel을 통합하기 위한 패키지

위의 preset과 loader, core 설치가 완료되면 webpack.config.js 파일에 설정을 추가 한다.

const path = require("path");

module.exports = {
  target: ["web", "es5"],
  entry: "index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./dist")
  },
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: "babel-loader", //loader를 설정할때 다수의 loader를 설정한다면 use를 하나만 설정한다면 loader를 통해 설정한다.
        options: {
          presets: ["babel/preset-env",["babel/preset-react", {"runtime": "automatic"}]
          ]
        }
      }
    ]
  }
};

이렇게하면 webpack에 babel을 불러와서 react를 번들링할 수 있게된다.