如何更改 React 项目中的生产构建静态文件夹路径？

Question

我有一个 React 项目，我运行 npm run build 它为我制作了一个生产版本。问题是它给了我以下注入 index.html

的样式表

<script src="./static/js/5.a4bfdba9.chunk.js"></script>

可以看到，设置的路径是./static/js/

但是我希望路径设置为./static/dashboard/js/5.a4bfdba9.chunk.js

我不知道要更改哪里或更改什么以确保每次运行构建时，它都采用我指定的路径而不是默认路径？

注意： 我查看了 package.json 中的 "homepage": "." 属性，但更改它只会在 /static/js/[=18= 之前附加一个路径]

Answer 1

更新：

您需要更新 webpack 配置才能实现此目的。有多种方法可以做到这一点：

react-scripts eject（不推荐）
补丁包
react-app-rewired

我正在为 patch-package 提供步骤。
您需要更改 react-scripts 包的文件 config/webpack.config.js。这是您需要进行的更改的 git 差异：

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 也会有正确的路径。
但是如果你 install/uninstall 任何包， node_modules 中的更改将被覆盖。要保留这些更改，您可以使用 patch-package，它会在安装后将您的更改写入 node_modules。

以下是设置补丁包的步骤，您可以阅读他们的 readme file 了解更多详情：

yarn add patch-package postinstall-postinstall
在 package.json 的脚本部分添加：
"postinstall": "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 repository供大家参考。

旧答案：

警告： 无法移动构建文件夹的内容。只能移动整个构建文件夹。例如：mv build/ dist/

更改 create react app 的设置以使其输出到不同的文件夹将非常复杂。但是你可以在构建完成后移动文件，这就简单多了。

在你的 package.json 你有：

"scripts": {
  "build": "react-scripts build"

您可以添加另一个名为 postbuild 的脚本，它会在构建后执行一些操作，并且会被 npm/Yarn 自动调用。

"postbuild": "mv build/ dist/"

这应该将文件移动到不同的文件夹。

如何更改 React 项目中的生产构建静态文件夹路径？

How to change production build static folder path in a React project?

javascript

build

npm

reactjs

create-react-app