要更改 webpack 配置和构建脚本，您必须从 create-react-app 中弹出（我不建议执行此步骤，因为它会破坏未来的兼容性），或者您可以使用 rewire 之类的工具来覆盖某些设置

看看这个 https://github.com/timarney/react-app-rewired

我个人使用只是重新布线

npm i rewire --save-dev

这是我过去为我的一个项目创建的示例配置，它运行良好！

1. 创建一个 build.js
2. 更改您的 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 使用的所有配置的新文件夹

但是正如我之前所说的，没有理由不使用重新布线而只是覆盖配置而不是弹出

如果有帮助，请不要忘记标记为答案干杯和成功

为什么看不到源文件？这是我会尝试的：

1. 启动你的react应用程序 npm run start
2. 打开浏览器 http://localhost:3000
3. 打开开发人员工具并检查 webpack-dev 服务器创建的分块包。在 Mac 上的 Chrome 中，您可以执行以下操作：cmd+option+j将打开开发人员工具。然后单击源选项卡：在此选项卡中，您将看到由 react 的构建配置创建的包。现在这些包的输出可能不漂亮，但它就在那里。

或者，webpack.config.js即使您使用create-react-app. 由于此配置只是封装在react-scriptsnode module中。因此，也许您可​​以尝试直接编辑此文件，而无需弹出：<base_path>/node_modules/react-scripts/config/webpack.config.js。尽管您需要小心不要破坏现有的配置设置。您可能想弄乱source-map生产版本的设置。至少这样，如果你破坏了这个文件，你总是可以删除并重新安装，react-scripts然后回到你的初始配置。这也将允许您在“半安全”沙盒环境中进行自定义。请记住，没有魔法create-react-app可以提供，而只是在制造构建配置的有用默认值。

最后，正如@xzesstence 指出的，您可以尝试react-app-rewiredmodule。

希望这有帮助！

我想要一个 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构建了未混淆的、可读的代码，按预期运行，没有使用其他修改。仅将 Gitbash 与命令npm install、npm run build和npm start 一起使用 - 只是认为有人可能会觉得这很有用。

我不推荐这个，因为你想要的代码仍然包裹在 webpack eval 中。从源代码中选择有用的部分或重新构建应用程序会更容易。充其量，我必须了解集群 react 和 webpack 是什么。

该文件被保存在服务器进程内存中并不会写入到磁盘，除非你退出脚本（或者是否有可能使用像“联控”的工具），并修改它们以使用其写入到磁盘writeToDisk选项中所描述的webpack DevServer 文档。

但是，您可以通过导航到webpack-dev-server服务器下的端点来获取实际的文件列表/链接。

例如，如果在 localhost:3000 使用默认 url，则使用以下 url 来查看服务器上的所有文件：

http://localhost:3000/webpack-dev-server

但您真正需要的只是 index.html（通常只是加载 JS 文件的存根）和以下 3 个 JS 文件，它们在所有 create-react-app 分期付款中似乎都一致，以及它们各自的源代码地图文件。

1. main.chunk.js
2. 包.js
3. 供应商~main.chunk.js

您可以右键单击页面上的链接并保存它们，或者您可以直接导航链接或从 Chrome 开发工具“源”选项卡中获取它们。

请注意，通常对于代码更改仅更新 main.chunk.js 文件，因此对于平均代码更改，您可能只获取更新的 main.chunk.js 和 main.chunk.js.map 文件。

我知道现在回答这个为时已晚，但试试这个npm i -D cra-build-watch。

我觉得这个库被低估了，但它只是观察 react 应用程序中的变化，而不是一次又一次地重新构建整个包。

尽管重新布线有助于通过不缩小构建来进行构建，但是，它仍然会一次又一次地经历整个构建过程。