Webpack - babel 설정

babel: 최신 문법의 자바스크립트 문법을 모든 브라우저에서 사용할 수 있도록 도와주는 도구

공식 사이트: https://babeljs.io/docs/en/

Babel · The compiler for next generation JavaScript

참고 사이트: [Babel] Babel 의 역할, 기본적인 사용법 (tistory.com)

[Babel] Babel 의 역할, 기본적인 사용법

 

터미널에서 3가지 패키지 설치

@babel/core:

@babel/preset-env

@babel/plugin-transform-runtime

 

명령어: npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime

package.json 파일에서 확인

root 경로의 .babelrc.js 파일을 생성

module.exports = {
  presets: ['@babel/preset-env'],
  plugins: [
    ['@babel/plugin-transform-runtime']
  ]
}

 

webpack.config.js 파일에서 js파일을 사용할 수 있도록 설정한다.

 {
        // js파일로 끝나는 파일을 찾아서 babel-loader를 이용하여 실행시키도록 설정
        test: /\.js$/,
        use: [
          'babel-loader'
        ]
 }

여러 파일들을 각자의 loader를 이용하여 실행시킬 수 있다.

babel을 사용하기 위해서 패키지 설치

명령어: npm i -D babel-loader

package.json 파일에서 확인