如何更改 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/ 之前附加一个路径

Answer 1

更新：

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

1. react-scripts 弹出（不推荐）
2. 补丁包
3. react-app-rewired

我正在为patch-package 提供步骤。
您需要对 react-scripts 包的 config/webpack.config.js 文件进行更改。这是您需要进行的更改的 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。

这里是安装补丁包的步骤，你可以阅读他们的readme file了解更多详情：

1. yarn add patch-package postinstall-postinstall

2. 将此添加到 package.json 的脚本部分：
   "postinstall": "patch-package"

3. 运行patch-package创建一个.patch文件：
   npx patch-package some-package

4. 提交补丁文件以与您的团队共享修复
   git add patches/react-scripts+4.0.3.patch
git commit -m "change output dir structure in react-scripts"

我也创建了一个git repository 供您参考。

旧答案：

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

更改创建反应应用程序的设置以使其输出到不同的文件夹将非常复杂。但是你可以在构建完成后移动文件，这很简单。

在你的 package.json 你有：

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

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

"postbuild": "mv build/ dist/"

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