Update:
您需要更新 webpack 配置才能实现此目的。有多种方法可以做到这一点：
- 反应脚本弹出（不推荐）
- 补丁包
- 反应应用程序重新连线
我正在提供步骤patch-package.
您需要对文件进行更改config/webpack.config.js的react-scripts包。这是您需要进行的更改的 git diff：
diff --git a/node_modules/react-scripts/config/webpack.config.js b/node_modules/react-scripts/config/webpack.config.js
index 26c2a65..ad29fbd 100644
--- a/node_modules/react-scripts/config/webpack.config.js
+++ b/node_modules/react-scripts/config/webpack.config.js
@@ -212,13 +212,13 @@ module.exports = function (webpackEnv) {
// There will be one main bundle, and one file per asynchronous chunk.
// In development, it does not produce real files.
filename: isEnvProduction
- ? 'static/js/[name].[contenthash:8].js'
+ ? 'static/dashboard/js/[name].[contenthash:8].js'
: isEnvDevelopment && 'static/js/bundle.js',
// TODO: remove this when upgrading to webpack 5
futureEmitAssets: true,
// There are also additional JS chunk files if you use code splitting.
chunkFilename: isEnvProduction
- ? 'static/js/[name].[contenthash:8].chunk.js'
+ ? 'static/dashboard/js/[name].[contenthash:8].chunk.js'
: isEnvDevelopment && 'static/js/[name].chunk.js',
// webpack uses `publicPath` to determine where the app is being served from.
// It requires a trailing slash, or the file assets will get an incorrect path.
@@ -676,8 +676,8 @@ module.exports = function (webpackEnv) {
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
- filename: 'static/css/[name].[contenthash:8].css',
- chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
+ filename: 'static/dashboard/css/[name].[contenthash:8].css',
+ chunkFilename: 'static/dashboard/css/[name].[contenthash:8].chunk.css',
}),
// Generate an asset manifest file with the following content:
// - "files" key: Mapping of all asset filenames to their corresponding
现在，如果您进行这些更改node_modules/react-scripts/config/webpack.config.js您将获得输出到所需文件夹的文件，并且 index.html 也将具有正确的路径。
但是如果您安装/卸载任何软件包，node_modules 中的更改将被覆盖。要保留这些更改，您可以使用补丁包 https://www.npmjs.com/package/patch-package，这将在安装后将您的更改写入node_modules。
以下是设置补丁包的步骤，您可以阅读他们的自述文件 https://github.com/ds300/patch-package#readme更多细节：
-
yarn add patch-package postinstall-postinstall
-
在 package.json 的脚本部分添加以下内容：
"postinstall": "patch-package"
-
运行 patch-package 以创建 .patch 文件：
npx patch-package some-package
-
提交补丁文件以与您的团队共享修复程序
git add patches/react-scripts+4.0.3.patch
git commit -m "change output dir structure in react-scripts"
我创建了一个git 存储库 https://github.com/vaibhavhrt/cra-custom-build-dir-structure也供你参考。
旧答案：
Warning:不适用于移动构建文件夹的内容。只能移动整个构建文件夹。例如：mv build/ dist/
更改创建反应应用程序的设置以使其输出到不同的文件夹将非常复杂。但是您可以在构建完成后移动文件，这非常简单。
在你的 package.json 中你有：
"scripts": {
"build": "react-scripts build"
您可以添加另一个名为postbuild它会在构建后执行一些操作，并由 npm/Yarn 自动调用。
"postbuild": "mv build/ dist/"
这应该将文件移动到不同的文件夹。
