바벨을 웹팩과 통합하기

웹팩으로 통합

보통 실무에서는 바벨을 직접 사용하기 보다는 웹팩으로 통합해서 사용하는 것이 일반적이다. 로더 형태로 제공하는데 babel-loader 이다. github.com/babel/babel-loader

babel/babel-loader

 

사용하기 위해서 먼저 npm install babel-loader 로 babel-loader를 설치한다. 

그 후 webpack.config.js 로 가서 babel-loader를 추가해 준다.

 

// webpack.config.js

module.exports = {
  ... 생략
  
  module: {
    rules: [
      
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_momules/, // node_modules 안에 있는 파일들은 babel-loader 가 처리 하지 않도록 함
      },
    ],
  },
  
  ... 생략
}

 

해당 로더를 추가하고 npm run build로 결과물을 확인해 보자.

 

 

그러면 core-js 부분에서 core-js 모듈을 찾을 수 없다는 에러가 발생했다. 이 에러가 발생하는 이유는 바벨이 app.js 소스를 변환시킬 텐데 이전 포스트 rkdvnfma90.tistory.com/123

바벨 개념 및 사용법

에서 new Promise() 코드를 폴리필을 추가하여 바벨로 변환하였을때 

 

 

이런식으로 변환이 된것을 알 수 있다. 즉, 현재 프로젝트에 core-js 모듈이 설치되어 있지 않기 때문에 에러가 발생하는 것이다. 에러를 해결하기 위해 core-js 모듈을 npm install core-js@2 로 설치하자.

 

 

총정리

1. webpack.config.js 에서 babel-loader를 추가했으므로 자바스크립트 코드에 대해서 웹팩이 바벨 로더를 사용한다. 
2. 바벨로더는 내부적으로 babel-core 실행한다. babel-core는 babel.config.js를 참고해서 실행한다.
3. babel.config.js 에서는 변환하는 프리셋들을 설정한다. 자동으로 변환되지 않는 항목들에 대해선 폴리필을 사용한다.