create-react-app 웹팩 구성 및 파일은 어디에 있습니까?

173

create-react-app패키지 로 ReactJS 프로젝트를 작성했는데 제대로 작동했지만 웹팩 파일 및 구성을 찾을 수 없습니다.

react-create-app는 웹팩에서 어떻게 작동합니까? 기본 설치에서 웹팩 구성 파일은 어디에 있습니까 create-react-app? 프로젝트 폴더에서 구성 파일을 찾을 수 없습니다.

재정의 구성 파일을 만들지 않았습니다. 다른 기사를 사용하여 구성 설정을 관리 할 수 있지만 기존 구성 파일을 찾고 싶습니다.

— 모하마드
소스

96

웹팩 파일 및 구성을 찾으려면 package.json 파일로 이동하여 스크립트를 찾으십시오.

scripts 객체가 라이브러리 react-scripts를 사용하고 있음을 알 수 있습니다

이제 node_modules로 가서 react-scripts 폴더 react-script-in-node-modules를 찾으십시오.

이 react-scripts / scripts 및 react-scripts / config 폴더에는 모든 웹팩 구성이 포함됩니다.

— 비 크람 타쿠 르
소스

1

나는 보았지만 나는 반응하지 않았다

— Mohammad

4

방금 create-react-app를 사용하여 앱을 만들었으며 node_modules에 react-scripts 폴더가 있습니다. 당신은 package.json을 공유 할 수 있습니까

— Vikram Thakur

5

이 답변은 더 이상 정확하지 NPM 지금, 평면 모든 모듈 루트에있는 의미 node_modules디렉토리

— 수직 동기화

4

실제 웹팩 설정은 다음과 같습니다 : github.com/facebook/create-react-app/blob/master/packages/…

— protoEvangelion

가장 일반적인 사용 사례는 프로젝트의 웹팩 구성을 사용자 정의하는 것입니다. 그러나 node_modules에 있으면 모든 npm 설치에서 덮어 쓰지 않습니까?

— 블랑

59

로부터 문서 :

Webpack 또는 Babel과 같은 도구를 설치하거나 구성 할 필요가 없습니다. 코드에 집중할 수 있도록 미리 구성되고 숨겨져 있습니다.

구성 파일에 액세스하려면 다음 을 실행 하여 꺼내야 합니다.

npm run eject

참고 : 이것은 단방향 작업입니다. 꺼낸 후에는 되돌릴 수 없습니다!

대부분의 시나리오에서 다른 방법으로 작동하게하는 방법을 꺼내고 시도하지 않는 것이 가장 좋습니다. 이렇게하면 create-react-appWebpack 의존성 지옥을 처리 할 필요가 없으며 의존성을 업데이트 할 수 있습니다 .

— 클루 그
소스

6

나는 이것들이 숨겨져 있다는 것을 알고 있지만, 이것들이 어디에 있으며 react-create-app 가이 능력을 어떻게 처리하는지 알고 싶습니다.

— Mohammad

그러면 아마도 소스 코드를 봐야 할 것입니다. 확실하지 않습니다

— klugjo

2

@Mohammad 'react-scripts'의 소스를 체크 아웃하면 모든 구성을 찾을 수 있습니다

— Jose Munoz

1

질문에 대답하지는 않았지만 상관없이 나를 도왔습니다

— Chicken Soup

33

많은 사람들이 자신의 구성을 추가하기 위해 웹팩 구성 및 파일을 찾는 것을 목표로이 페이지를 방문합니다. 실행하지 않고 이것을 달성하는 또 다른 방법 npm run eject은 react-app-rewired 를 사용 하는 것 입니다 . 이렇게하면 꺼내지 않고 웹팩 구성 파일을 덮어 쓸 수 있습니다.

— jjbskir
소스

6

여전히 선호되는 솔루션입니까? rewired 프로젝트에는 다음과 같은 경고가 있습니다. github.com/timarney/react-app-rewired#rewire-your-app- : "React App 2.0을 만들 때이 리포지토리 는이 시점에서 대부분 커뮤니티에서"약간 "유지됩니다. .. 참고 : 개인적으로 next.js 또는 Razzle을 사용합니다.

— Anthony Kong

24

꺼내고 싶지 않다고 가정하고 구성을보고 싶다고 가정하면 /node_modules/react-scripts/config

webpack.config.dev.js. //used by `npm start`
webpack.config.prod.js //used by `npm run build`

— vv1z
소스

21

사용되는 웹팩 구성 create-react-app은 다음과 같습니다. https://github.com/facebook/create-react-app/tree/master/packages/react-scripts/config

— 미하이 로타 루
소스

2

이것이 답이되어야합니다

— krankuba

10

/ config 폴더 에서 찾을 수 있습니다 .

꺼내면 다음과 같은 메시지가 나타납니다.

 Adding /config/webpack.config.dev.js to the project
 Adding /config/webpack.config.prod.js to the project

— Alfrex92
소스

7

웹팩 구성이 react-scripts에 의해 처리되고 있습니다. node_modules react-scripts / config에서 모든 웹팩 구성을 찾을 수 있습니다 .

webpack 설정을 사용자 정의하려면 다음 customize-webpack-config를 수행하십시오.

— 하산 아자 즈
소스

3

다음을 실행하여 구성 파일을 추출하십시오.

npm run eject

프로젝트에서 생성 된 구성 폴더를 찾을 수 있습니다. webpack 설정 파일이 초기화되어 있습니다.

— 비나 야크 험 베리
소스

0

나는 그것이 늦었다는 것을 알고 있지만 CRA의 webpack 구성에 액세스하려는 경우 미래의 사람들 이이 문제를 겪고 있다면 달리 실행할 수있는 다른 방법은 없습니다.

$ npm run eject

그러나 제거를 사용하면 업데이트의 CRA 파이프 라인에서 벗어날 수 있으므로 제거 지점에서 직접 유지 관리해야합니다.

나는이 문제를 여러 번 보았으므로 CRA와 거의 동일한 구성을 가진 반응 형 앱을위한 템플릿뿐만 아니라 추가 구성 요소 (스타일 구성 요소, jest 단위 테스트, 배포를위한 Travis ci, 더 예쁘다)와 같은 템플릿을 만들었습니다. , ESLint 등 ...)을 사용하면 유지 관리가 더 쉬워집니다. 저장소를 확인하십시오 .

— 험블 도어
소스