[JS] babelrc와 webpack.config

이채현

💡 Javascript Babel & Webpack

Webpack으로 React 프로젝트를 초기 설정하다가 ,

presets: [
  [
    '@babel/preset-env',
    {
      targets: {
        browsers: ['> 5% in KR', 'last 2 chrome versions'],
      },
      debug: true,
    },
  ],
  '@babel/preset-react',
],

위 코드의 presets가 과연 .babelrc에 있어야 하는지, webpack.config.js에 있어야하는지 잘 모르겠어서 각 파일의 목적을 정리해보았다.

babelrc

.babelrc는 babel의 설정을 위해 사용한다.

{
  "presets": [...],
  "plugins": [...]
}

webpack.config

물론 webpack.config.js는 webpack의 설정을 위해 사용한다. 프로젝트 파일의 번들링과 관련된 설정들을 작성해준다. 그리고 babel과 관련된 설정들을 .babelrc가 아닌 webpack.config.js에서 babel-loader를 설정한 부분에 작성해줄 수도 있다.

...

module.exports = {

...

module: {
    rules: [
      {
        test: /\\.js?/,
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                targets: {
                  browsers: ['> 5% in KR', 'last 2 chrome versions'],
                },
                debug:true,
              },
            ],
            '@babel/preset-react',
          ],
          plugins: [
            '@babel/plugin-proposal-class-properties',
            'react-refresh/babel',
            [
              'module-resolver',
              {
                root: ['./src'],
                alias: {
                  '#api': './src/api/',
                  '#assets': './src/asset/',
                  '#common': './src/common/',
                  '#component': './src/component/',
                  '#constant': './src/constant/',
                  '#container': './src/container/',
                },
              },
            ],
          ],
          exclude: /node_modules/,
        },
      },
    ],
  },

...

}

결론

결론은, babel의 presets는 webpack.config.js와 .babelrc 파일 둘 중 한 곳에만 있으면 된다! 그러나 babel cli를 이용하여 직접 코드 변환을 수행하거나 babel test 등을 돌릴 때에는 webpack을 거치지 않기 때문에 .babelrc에 작성하는 방식이 권장된다.

나는 webpack.config.js 내에 적어서 사용한다.