create-react-app을 사용하여 작성된 리액트 프로젝트의 웹 팩 구성을 업데이트하려면 어떻게 해야 합니까?

create-react-app을 사용하여 작성된 리액트 프로젝트의 웹 팩 구성을 업데이트하려면 어떻게 해야 합니까?

create-react-app을 사용하여 리액트 프로젝트를 만들었습니다.이제 웹 팩 구성을 업데이트해야 하는데 파일을 찾을 수 없습니다.이 파일을 직접 작성해야 합니까?아니면 어떤 프로세스가 필요합니까?나는 반응하는 것이 처음이고 어떻게 해야 할지 잘 모르겠다.

실행할 필요가 없다npm run eject

순서 1

npm install react-app-rewired --save-dev

순서 2

더하다config-overrides.js프로젝트 루트 디렉토리로 이동합니다.(./src 아님)

// config-overrides.js
module.exports = function override(config, env) {
    // New config, e.g. config.plugins.push...
    return config
}

순서 3

npm 스크립트의 react-script에 대한 기존 호출을 "플립"하여 시작, 빌드 및 테스트를 수행합니다.

/* package.json */
"scripts": {
    -   "start": "react-scripts start",
    +   "start": "react-app-rewired start",
    -   "build": "react-scripts build",
    +   "build": "react-app-rewired build",
    -   "test": "react-scripts test",
    +   "test": "react-app-rewired test",
        "eject": "react-scripts eject"
}

순서 4

앱을 재시작합니다.다 했어요.

옵션 1 - CRA의 이젝트

CRA를 사용하여 앱을 만들고 큰 변경을 하지 않았다면npm run eject- 자세한 내용은 이쪽

이 작업을 수행한 후에는 (물론 커밋을 제외하고) 되돌릴 수 없다는 점에 유의하십시오.기본적으로 CRA에서 현재 '숨겨진' 웹 팩 파일 및 기타 파일을 제공합니다.

이 방법에 대한 몇 가지 비판과 두 번째 생각은 다음과 같습니다.

옵션 2 - 리액트 어플리케이션 리와이어

이게 당신에게 맞는 선택일 수도 있어요.이를 통해 프로젝트를 이젝트하거나 너무 많은 변경을 가하지 않고 현재 웹 팩을 확장할 수 있습니다.npm run eject윌. 여기 이 소포 좀 보세요

Egghead.io에서 제공하는 훌륭한 튜토리얼:react-app-rewired 여기서

저는 실 설치와 실 제작 사이에 스크립트를 실행함으로써 이 문제를 해결했습니다.실 설치 후 webpack.config.json 파일이 생성되고 노드 상에서 이를 수정하는 스크립트를 즉시 실행하고 빌드를 실행합니다.

내 코드:
관습.webpack.config.syslog

const fs = require('fs')

// WebPack.config File
const fileConfig = 'node_modules/react-scripts/config/webpack.config.js'

new Promise((resolve) => {
   fs.readFile(fileConfig, 'utf8', function (err, data) {
      if (err) {
        return console.log(err)
      }
      resolve(data)
   })
}).then((file) => {
    
    let CodeAsString = "Code as String to save"

    let regexCode = /YourCodeRegex}/g

    let result = file.replace(regexCode, CodeAsString)

    fs.writeFile(fileConfig, result, function (err) {
        if (err) return console.log(err)
        console.log('The webpack.config file was modifed!')
    })
})

이제 패키지를 편집해야 합니다.프로세스에 다음 코드를 포함합니다.

"scripts": {
    "prestart": "node custom.webpack.config.js",
    "prebuild": "node custom.webpack.config.js",
    "start": "react-scripts start",
    "build": "react-scripts build"
}

완료! :)

https://www.npmjs.com/package/react-app-rewired

완전한 답변은 다음과 같습니다.

재접속 방법create-react-app프로젝트.

다음을 사용하여 앱 만들기create-react-app다시 배선할 수 있습니다

1. 설치하다react-app-rewired위해서create-react-app 2.x웹 팩 4:

npm install react-app-rewired --save-dev

위해서create-react-app 1.x또는react-scripts-ts웹 팩 3 포함:

npm install react-app-rewired@1.6.2 --save-dev

2. 작성하다config-overrides.js루트 디렉토리 내의 파일

/* config-overrides.js */
module.exports = function override(config, env) {
  //do stuff with the webpack config...
  return config;
}

다음과 같습니다.

+-- your-project
|   +-- config-overrides.js
|   +-- node_modules
|   +-- package.json
|   +-- public
|   +-- README.md
|   +-- src

예를 들어 다음과 같습니다.

module.exports = function override(config, env) {
    // New config, e.g. config.plugins.push...

    config.module.rules = [...config.module.rules, 
        {
            test: /\.m?js/,
            resolve: {
              fullySpecified: false
            }
        }
      ]

    return config
}

3. npm 스크립트의 react-script에 대한 기존 호출을 "플립"하여 시작, 빌드 및 테스트를 수행합니다.

송신원:

/* 패키지json */

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

수신인:

/* 패키지json */

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

주의: 이젝트 스크립트의 콜을 뒤집지 마십시오.이 작업은 프로젝트에 대해 한 번만 실행되며, 이후 웹 팩 구성을 완전히 제어할 수 있으므로 리액트 앱 재배선이 더 이상 필요하지 않습니다.이젝트 스크립트에 대해 다시 배선하는 구성 옵션은 없습니다.

4. 개발 서버의 기동

npm start

5. 앱을 구축하다

npm run build

웹 팩 설정은 react-script에 의해 처리되고 있습니다.이젝트하고 싶지 않고 설정만 보고 싶을 것 같습니다.이것들은 다음 URL에 기재되어 있습니다./node_modules/react-scripts/config

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

webpack node_module 을 사용하여 을 할 수 .patch-package https://www.npmjs.com/package/patch-packagehttpswww.npmjs.com/package/

을 인스톨 .react-scripts 것은 「」입니다.npm i react-scripts@5.0.0

럼럼으로 들어가세요.node_modules/react-scripts/webpack/webpack.config.js을 하고 , 「 」를 선택합니다npx patch-package react-scripts

patch-package합니다(예: in a will 、 will 、 will 、 will will 、 will will will will will will will 。patches/react-scripts+5.0.0.patch

를 「」에 추가합니다.package.json 함께

"scripts": {
    "postinstall": "patch-package",
    ...
}

이제 네가 뛸 때마다npm i설치된 라이브러리에 이 패치가 자동으로 포함됩니다.

가장 좋은 방법은 다음과 같습니다.

1. react-app-rewired ★★★★★★★★★★★★★★★★★」customize-cra

2. 작성하다config-overrides.js파일을 root 폴더에 저장합니다.다음은 Webpack 덮어쓰기 파일의 gist의 예를 제시하겠습니다.https://gist.github.com/Nagibaba/209c1bddcc39ff0686a820806cfa8ee3

3. 「 」 「 」 「 」 「 」 「 」 「 」react-scripts.json에서 son to to to to.으로 이동합니다.react-app-rewired들면 다음과 같습니다.

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

갈 준비가 되었습니다.

언급URL : https://stackoverflow.com/questions/63280109/how-to-update-webpack-config-for-a-react-project-created-using-create-react-app