Webpack - babel 설정

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

Babel · The compiler for next generation JavaScript

The compiler for next generation JavaScript

babeljs.io

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

이번에 프론트엔드 프로젝트를 진행하며 BABEL 을 사용하게 되었다. 이전 프로젝트에서 리액트를 하면서 사용해보긴 했지만 별다른 설정없이 리액트에서 생성해주는 설정그대로 사용하다보니

javacpro.tistory.com

터미널에서 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 파일에서 확인

step 1