[React] CRA에서 Eject 사용 안하고 webpack custom 하기(customize-cra, react-app-rewired, 웹팩 설정 오버라이딩)

ecject은 custom을 할 수 있는 정말 좋은 기능이지만 그거에 따른 부작용이 좀 많다.

그럼에도 불구하고 장점이 많아서 eject을 했는데 eject을 안해도 된다는 신박함을 알게 되어 포스팅 해본다.

custom은 ecject만큼은 아니라고 하지만.. 음.. 괜찮은듯 하다.

 

상세한 설명이 필요하면 아래 링크를 들어가보자.

https://medium.com/@jsh901220/create-react-app%EC%97%90%EC%84%9C-eject%EC%82%AC%EC%9A%A9%EC%95%88%ED%95%98%EA%B8%B0-customize-cra-react-app-rewired-10a83522ace0

Create-React-App에서 Eject사용안하기(customize-cra, react-app-rewired)

 

준비물?

1. eject하지 않은 cra를 사용한 react project

2. react-app-rewired

3. customize-cra

4. @babel/plugin-proposal-decorators

 

1. react-app-rewired install

npm install --also=dev react-app-rewired

cra 버전에 따라서 react-app-rewired (cra version1)만 필요하다고 하는데

react-app-rewired install > package.json 수정 > config-overrides.js 생성 > npm start를 했는데 안되면

다른 customize-cra를 install 해주자.

필자는 react-app-rewired만 install해도 잘 되었다.

 

2. package.json script 수정

react-scripts를 사용하던걸 react-app-rewired 를 이용해서 하도록 수정해주자.

// 전)
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
  },
  
// 수정)
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
  },

 

3. config-overrides.js 만들기

프로젝트 최상단 (ex) package.json 있는데쯤) 에 config-overrides.js 파일 생성

여기다가 webpack custom을 하면 된다.

 

4. customize-cra install

CRA 버전에 따라 customize-cra가 필요할 수 있다.

npm install --also=dev customize-cra

 

5. @babel/plugin-proposal-decorators install

decorator 문법을 사용하기 위한 플로그인?

npm install --also=dev @babel/plugin-proposal-decorators