不需要跑 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 步

重新启动您的应用程序。完毕

选项 1 - 弹出您的 CRA

如果您刚刚使用 CRA 创建了您的应用程序，并且没有对其进行重大更改，您可以使用npm run eject-在此处了解更多信息

请记住，执行此操作后将无法返回（当然，提交除外）。这基本上将为您提供 webpack 文件和其他当前“隐藏”在 CRA 中的文件

对这里方法的一些批评和重新思考

选项 2 - 重新连接 React 应用程序

这可能是您的正确选择。这允许您扩展当前的 webpack，而不会弹出，或随意在您的项目中搞乱/进行太多更改npm run eject。看看这里的包

Egghead.io 的一个很棒的教程，使用react-app-rewired 这里

Webpack 配置由react-scripts处理。我假设您不想弹出而只想查看配置，您会在其中找到它们/node_modules/react-scripts/config

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

我通过在 yarn install 和 yarn build 之间运行脚本解决了这个问题。yarn install 后生成了 webpack.config.json 文件，然后立即在 Node 上运行一个修改它的脚本，然后运行构建。

我的代码：
custom.webpack.config.js

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!')
    })
})

那么，现在您是否需要编辑 package.json 以在流程中包含此代码：

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

完毕！:)