babel을 이용한 react, es6 번들링

es6 문법을 사용하는 react 앱을 번들링 하기 위한 설정이다.
babel-loader를 이용하여 번들링한다.

package.json

"dependencies": {
	"@babel/core": "^7.12.10", // 바벨 핵심기능이 들어있다.
    "@babel/plugin-proposal-class-properties": "^7.12.1", // 클래스에서 자동 필드선언을 지원하기 위한 "바벨의 플러그인"
    "@babel/preset-env": "^7.12.11", // ECMA2015 이상의 문법들을 변환하기 위한 "바벨 플러그인들의 모음"
    "@babel/preset-react": "^7.12.10", // react 와 관련된 "바벨 플러그인의 모음"
	"babel-loader": "^8.2.2", // 웹팩에서 사용될 바벨로더
}

@babel/* 패키지들은 babel-loader의 옵션으로 사용될 패키지들이다.
웹팩입장에서는 babel-loader를 사용하지않는다면 무의미하다.

webpack.config.js

module.exports = (env, options) => {
  return {
    module: {
      rules: [
                {
                    test: /\.jsx?/,
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            [
                              '@babel/preset-env', {
                                targets: {
                                    browsers: ['last 2 chrome versions']
                                }
                              }
                            ], 
                            '@babel/preset-react'
                        ],
                        plugins: [
                            '@babel/plugin-proposal-class-properties',
                            (options.mode !== 'production') && require.resolve('react-refresh/babel'),
                        ].filter(Boolean)
                    }
                },
        ]
  }
}

바벨은 다른 로더들에 비해 덩치도 크고 preset(plugins)들이 많아서 옵션부분에 많은 내용이 담긴다.
babel 공식문서를 참고해가면서 babel-loader 내에 preset과 preset의 해당하는 옵션들, 혹은 plugin들을 적절히 넣어준다.