CRA(Create React App) 웹팩 설정하기

CRA는 프로젝트 초기 세팅 및 복잡한 과정을 해결해줍니다.

 

예를 들어, 아래와 같은 명령어로 타입스크립트 환경의 리액트 프로젝트를 만들 수 있습니다.

yarn create react-app my-app --template typescript

이렇게 프로젝트를 만들게 되면 바벨이나 웹팩 같은 종속된 라이브러리나 설정이 보이지 않습니다.

숨겨진 종속성 및 설정을 확인하고 수정하기 위해서는 eject 명령어를 사용해야 하는데 이 방법은 단방향 프로세스로 한번 실행하면 다시 원상태로 복구할 수 없고 이후 직접 유지보수를 해야 합니다.

 

기존 설정을 유지하면서 새로 추가하고 싶은 설정만 추가하는 방법

이 방법은 기존 설정들을 신경 쓰지 않고 원하는 설정만 적용할 수 있기 때문에 관리 및 유지 보수하기 좋습니다.

 

CRA로 프로젝트를 설치한 후 다음과 같은 패키지들 설치합니다.

customize-cra(eject 명령어를 사용하지 않고 webpack.config와 같은 설정 파일을 수정할 수 있는 라이브러리입니다.)

GitHub - arackaf/customize-cra: Override webpack configurations for create-react-app 2.0

Install

yarn add customize-cra react-app-rewired --dev

 

• 아래와 같이 config-overrides.js (package.json과 같은 레벨) 파일을 생성합니다.

const { override, addWebpackAlias } = require('customize-cra');
const path = require('path');

module.exports = override(
  addWebpackAlias({
    '@': path.resolve(__dirname, 'src'),
  })
);

• package.json의 react-scripts -> react-app-rewired로 변경합니다.

  ...
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  ...

 

yarn start를 통해 실행해 보면 정상적으로 동작하는 것을 확인할 수 있습니다.