要更改webpack配置和构建脚本，您必须退出create-react-app（我不推荐此步骤，因为它会破坏未来的兼容性）或使用rewire等工具覆盖某些设置
看看这个。
https://github.com/timarney/react-app-rewired
我个人用的只是重新布线

npm i rewire --save-dev

这是我过去为我的一个项目创建的一个示例配置，它运行得非常好!
1.创建build.js
1.更改package.json，使其运行build.js

• • 内部版本. js**

const rewire = require('rewire');
const defaults = rewire('react-scripts/scripts/build.js');
const config = defaults.__get__('config');

// Consolidate chunk files instead
config.optimization.splitChunks = {
  cacheGroups: {
    default: false,
  },
};
// Move runtime into bundle instead of separate file
config.optimization.runtimeChunk = false;

// JS
config.output.filename = '[name].js';
// CSS. "5" is MiniCssPlugin
config.plugins[5].options.filename = '[name].css';
config.plugins[5].options.publicPath = '../';

然后在我的package.json中，我将npm脚本链接更改为如下所示（将运行build.js脚本的节点构建）

• • 包. json**

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

所以如果你真的想退出create-react-app，你所要做的就是运行

npm run-script eject

然后，您将获得一个新文件夹，其中包含create-react-app使用的所有配置
但正如我之前所说，没有理由不使用rewire，只是覆盖配置而不是弹出。

我想要一个React应用程序的未混淆代码--主要是出于好奇，我有源代码--同时还要用Angular重写它（生成一个更易维护的应用程序，大小为5%，依赖性为1%）。
我从未使用过React，但在修改文件时发现
<base_path>/node_modules/react-scripts/config/webpack.config.prod.js
并将module.exports下的大型优化配置项替换为以下内容...

module.exports = {...

    optimization: {
            minimize: false,
            splitChunks: {
                chunks: 'all',
                name: true
            },
            runtimeChunk: true
        },

npm run build构建了未混淆的可读代码，这些代码按预期运行，没有使用其他修改。仅在命令 npm install，npm run build 和 npm start 中使用Gitbash-只是认为有人可能会发现这很有用。

我不推荐这样做，因为你想要的代码仍然被包裹在一个混乱的webpack eval中。从源代码中挑选有用的部分或者只是重新构建应用程序更容易。最好的情况是，我看到了集群React和webpack是什么。

为什么你看不到源文件？下面是我的尝试：
1.使用npm run start启动react应用
1.打开浏览器至http://localhost:3000
1.打开 * 开发者工具并检查webpack-dev服务器 * 创建的分块捆绑包。在Mac上的Chrome中，您可以执行以下操作：cmd+option+j将打开开发者工具。然后单击源选项卡：在这个选项卡中，你会看到react的build configuration * 创建的bundle。现在这些bundle的输出可能不太漂亮，但都在那里。
或者，即使使用create-react-app，应用程序的所有构建配置设置也包含在webpack.config.js文件中。由于此 * 配置仅封装在react-scripts节点模块 * 中。因此，您可以尝试直接编辑此文件，而无需弹出：<base_path>/node_modules/react-scripts/config/webpack.config.js。尽管您需要小心，不要破坏现有的配置设置。您可能希望在生产版本中弄乱source-map设置。至少这样，如果您损坏了此文件，您可以始终删除并重新安装react-scripts，然后返回到初始配置。这还将允许您在"半安全"的情况下使用自定义设置记住，create-react-app并没有提供什么魔力，它只是为您的构建配置提供了 * 有用的默认值。*
最后，正如@xzesstence指出的，您可以试用react-app-rewired模块。
希望能有所帮助!

这些文件保存在服务器进程内存中，不会写入磁盘，除非您弹出脚本（或者如果可以使用“rewire”之类的工具）并使用writeToDisk选项修改脚本以将其写入磁盘，如webpack DevServer文档中所述。
但是，您可以通过导航到服务器下的webpack-dev-server端点来获取实际的文件列表/链接。
例如，如果使用localhost：3000的默认url，则使用以下url查看服务器上的所有文件：
http://localhost:3000/webpack-dev-server
但您真正需要的只是index.html（通常只是一个加载JS文件的存根）和以下3个JS文件（它们在所有create-react-app部分上似乎都是一致的），沿着它们各自的源Map文件。

1. main.chunk.js
2. bundle.js
3. vendors~main.chunk.js
   您可以右键单击页面上的链接并保存它们，也可以直接导航链接或从Chrome开发工具的“源代码”选项卡获取它们。
   注意，一般来说，对于代码更改，只更新main.chunk.js文件，因此对于一般的代码更改，您可能只获取更新后的main.chunk.js和main.chunk.js.map文件。

我知道现在回答这个问题已经太晚了，但是试试这个npm i -D cra-build-watch。
我觉得这个库被低估了，但它只是观察React应用程序的变化，并没有一次又一次地重新构建整个包。
虽然重新布线有助于使建设不缩小它，但是，它仍然经历了整个过程的建设一次又一次。

在这个问题上花了一整天的时间之后，我找不到一种方法来获得生产代码的非缩小版本，
我所做的是：打开chrome上的开发工具，导航到源选项卡;现在找到javascript文件（在create-react-app中，它通常位于static〉js〉main.js中）
当javascript文件可见时，屏幕左下方会出现一对花括号（请看图片）：
screenshot of the dev tools
当你点击花括号时，它美化了代码，然后你可以给代码添加断点（点击行上的数字）并刷新页面以启动调试器，处理那些代码并不方便，但现在这对我来说是有效的。
希望能有所帮助。