> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/webpack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/webpack/react/create-your-own-react-app/configure-babel.md).

# Babel 컴파일러 구성

## 1. Babel, babel-loader 설치

[@babel/core](https://www.npmjs.com/package/@babel/core), [@babel/preset-env](https://www.npmjs.com/package/@babel/preset-env), [babel-loader](https://www.npmjs.com/package/babel-loader) 패키지를 프로젝트에 설치합니다.

{% tabs %}
{% tab title="패키지 설치" %}

```bash
npm i babel-loader @babel/core -D
```

{% endtab %}
{% endtabs %}

## 2. babel-loader 구성

`resolve`, `module` 구성을 추가한 후, Babel 컴파일러 로더(loader)를 구성합니다.

{% tabs %}
{% tab title="webpack.config.js" %}

```javascript
const getAbsolutePath = (pathDir) => path.resolve(__dirname, pathDir)

// ...

module.exports = (_env, argv) => {
  // ...
  return {
    // ...
    resolve: {
      extensions: ['js', 'jsx', 'json'],
      alias: {
        '@components': getAbsolutePath('src/components/'),
        '@contexts': getAbsolutePath('src/contexts/'),
        '@hooks': getAbsolutePath('src/hooks/'),
        '@pages': getAbsolutePath('src/pages/'),
      },
    },
    module: {
      rules: [
        {
          test: /\.jsx?$/i,
          exclude: /node_modules/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                cacheDirectory: true,
                cacheCompression: false,
                envName: isProd ? 'production' : 'development'
              }
            }
          ]
        }
      ]
    }
  }
}
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
불러올 모듈 확장자를 생략할 경우 "**resolve.extensions**"에 추가합니다. 그리고 별칭은 "**resolve.alias**"에 추가합니다. (components, contexts, hooks, pages 등)
{% endhint %}

## 3. Babel 프리셋

[@babel/preset-env](https://www.npmjs.com/package/@babel/preset-env), [@babel/preset-react](https://www.npmjs.com/package/@babel/preset-react) 프리셋을 설치한 후, `babel.config.js` 파일을 만들어 구성합니다.

{% tabs %}
{% tab title="패키지 설치" %}

```
npm i @babel/preset-env @babel/preset-react -D
```

{% endtab %}

{% tab title="babel.config.js" %}

```javascript
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      { modules: false }
    ],
    '@babel/preset-react'
  ]
}
```

{% endtab %}
{% endtabs %}

## 4. Babel 플러그인

React 앱에서 ["클래스 필드" 문법을 사용하기 위한 플러그인](https://babeljs.io/docs/en/babel-plugin-proposal-class-properties), ["동적 가져오기"를 사용하기 위한 플러그인](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports) 등을 설치합니다. 

{% tabs %}
{% tab title="패키지 설치" %}

```bash
npm i @babel/plugin-transform-runtime \
      @babel/plugin-syntax-dynamic-import \
      @babel/plugin-proposal-class-properties -D
```

{% endtab %}

{% tab title="babel.config.js" %}

```javascript
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      { module: false }
    ],
    '@babel/preset-react'
  ],
  plugins: [
    '@babel/plugin-transform-runtime',
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-proposal-class-properties',
  ]
}
```

{% endtab %}
{% endtabs %}

## 5. React 최적화 플러그인 (배포)

React 앱 배포(production) 시 성능을 향상 시키는 [prop-types 제거](https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types), [React.createElement 컴파일 결과 인라인 처리](https://babeljs.io/docs/en/babel-plugin-transform-react-inline-elements), [정적 React 요소를 상수로 출력하는 플러그인](https://babeljs.io/docs/en/babel-plugin-transform-react-constant-elements) 등을 설치합니다.

{% tabs %}
{% tab title="패키지 설치" %}

```bash
npm i babel-plugin-transform-react-remove-prop-types \
      @babel/plugin-transform-react-inline-elements \
      @babel/plugin-transform-react-constant-elements -D
```

{% endtab %}

{% tab title="babel.config.js" %}

```javascript
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      { module: false }
    ],
    '@babel/preset-react'
  ],
  plugins: [
    '@babel/plugin-transform-runtime',
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-proposal-class-properties',
  ],
  env: {
    production: {
      only: ["src"],
      plugins: [
        [
          "transform-react-remove-prop-types",
          { removeImport: true } // import PropTypes from 'prop-types' 제거
        ],
        "@babel/plugin-transform-react-inline-elements",
        "@babel/plugin-transform-react-constant-elements"
      ]
    }
  }
}
```

{% endtab %}
{% endtabs %}