更新:
你需要更新 webpack 配置来实现这一点。有多种方法可以做到这一点:
- react脚本弹出(不推荐)
- 补丁包
- react-app-rewired
我正在为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 中的更改将被覆盖。要保留这些更改,您可以使用patch-package,它会在安装后将更改写入 node_modules 中。
以下是设置补丁包的步骤,您可以阅读他们的自述文件以获取更多详细信息:
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 存储库供您参考。
旧答案:
警告:不适用于移动构建文件夹的内容。只能移动整个构建文件夹。例如:mv build/ dist/
更改 create react app 的设置以使其输出到不同的文件夹将非常复杂。但是您可以在构建完成后移动文件,这非常简单。
在你的 package.json 你有:
"scripts": {
"build": "react-scripts build"
您可以添加另一个称为postbuild
在构建之后执行某些操作的脚本,并将由 npm/Yarn 自动调用。
"postbuild": "mv build/ dist/"
这应该将文件移动到不同的文件夹。