babel

1. npm init

2. 바벨설치

@babel/core : es6 -> es5문법으로 바꿔줌
@babel/preset-react : jsx -> javascript로 바꿔줌
@babel/preset-env : 브라우저에 맞게 최신 문법을 옛날문법으로 변환해준다. (함께 사용되어야 하는 Babel 플러그인을 모아 둔 것으로 Babel 프리셋이라고 부른다.)
babel-loader : 웹팩과 바벨을 연결해준다.

@babel/preset-react 와 babel-loader 는 필요에 따라 설치를 한다.

npm install --save-dev @babel/core @babel/cli 
@babel/preset-env @babel/preset-react babel-loader

webpack에서 설정

module: {
	rules: [
    	{
            test: /\.js$/,
            // -> js와 jsx에 룰을 적용시키겠다
            
           exclude: ['/node_modules'],  // node_modules 폴더 제외
                  
            loader: babel-loader,
              options: {
                 presets: [
                   ["@babel/preset-env", {
                      targets: {
                        browsers: ["last 2 chrome versions"],
              //크롬 최신버전과 하나 하위 버전까지 호환되도록 설정
                       node: 'current' // 노드 환경에서 바벨을 쓰고 싶다면
                      }
                      
                  modules: 'false' //트리 쉐이킹
                 }
             , "@babel/preset-react"
             ],
           plugins: ["@babel/plugin-proposal-class-properties"],
         },
                ]
              }
            ]
          }
        }

        targets:{
          browsers: ['last 2 chrome versions'],
          //크롬 최신버전과 하나 하위 버전까지 호환되도록 설정

browsers: ['> 5% in KR'],
//한국에서 점유율 5%이상인 브라우저는 전부 지원

• 더 많은 옵션들

트리 쉐이킹이란?

JS 모듈을 번들링할 때 사용하지 않는 코드를 제거하는 최적화 과정을 말한다