[javascript] webpack-babel 설정하기-기본설정(react)

바벨이란 : 최신 사양의 자바스크립트 코드(ES6+)를 IE나 구형 브라우저에서도 동작하는 코드로 변환(트랜스파일링)해주는 트랜스파일러이다.

 

1) babel 기본 라이브러리 설치

npm i  -D @babel/core //기본적인 바벨
npm i -D@babel/preset-env //브라우져에 맞게 알아서 바꿔주기
npm i -D @babel/preset-react //리액트 용도로 jsx로
npm i -D babel-loader //바벨 웹팩 연결.
npm i -D @babel/plugin-proposal-class-properties //jsx class 문법 지원

npm install --save-dev @babel/plugin-transform-runtime //es6 메서드나 생성자 지원
npm install -D @babel/runtime-corejs3 //es6 메서드나 생성자 지원

출처: https://mine-it-record.tistory.com/503?category=1260998 [나만의 기록들:티스토리]

2) babel 설정

바벨 프리셋의 경우 설치에서 끝나는게 아니라 설정도 같이 해주어야 하는데,

사실 여기서 설정하는 방법이 여러개가 존재한다.

 

전체 설정 파일인 babel.config.js / babel.config.json 파일을 만들어 설정하는 방법이 있고(바벨 7버전부터 생겼다더라)

지역 설정 파일인 .babelrc 파일과 package.json 에 babel key를 넣어서 설정하는 방법이 존재한다.

 

출처: https://mine-it-record.tistory.com/503?category=1260998 [나만의 기록들:티스토리]

 

프로젝트 최상단에  babel.config.json 파일을 만들도록 하자.

{   "presets": ['@babel/preset-env', '@babel/preset-react'],
	plugins: [
        [
          '@babel/plugin-transform-runtime',
          {
            // https://babeljs.io/docs/en/babel-plugin-transform-runtime#corejs
            corejs: 3,
            proposals: true,
          },
        ],
      ]
}

그리고 이전에 설치한 webpack.config.json

 

webpack이 설치가 안되어 있다면 https://zzang9iu.tistory.com/77 를 참고하도록 하자,

[javascript] webpack-js 모듈화하기

const path = require("path");

module.exports = {

    name : 'React-webpack-setting', // 웹팩 설정 이름
    mode : 'development', //실서비스 : Production
    devtool : 'eval',
    resolve : {
        extensions : ['.js', '.jsx']
    },
    entry:{ // 합쳐질 파일 요소들 입력
        app : ['./src/index.jsx'], 
    },
    output:{// 최종적으로 만들어질 js
        path: path.join(__dirname, '/dist'), //빌드 위치
        filename : 'app.js'  //웹팩 빌드 후 최종적으로 만들어질 파일
    },
    module : { //모듈 연결 설정
        rules : [{
            test: /\.jsx?/, // 대상 설정 정규식
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env', '@babel/preset-react'],
            },
        }],
    },
};

#npm run build

이로써 jsx파일도 번들링 할 수 있다.