如何更改 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

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

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

Answer 1

今天有一个更好的解决方案。来自哈希火箭：

当我构建 CRA 应用程序时，我会得到一个以 /static 开头的资产（css、图像）路径。如果我将应用程序部署到https://something.com/myapp，那么该应用程序将尝试访问位于 的这些资产路径https://something.com/static/asset.css。那不是资产所在的地方。该资产位于https://something.com/myapp/static/asset.css。

Create React App 允许您使用文件中的主页属性更改已构建资产的前缀package.json。

您可以将其设置为 myapp：

"homepage": "/myapp"

然后资产的路径为/myapp/static/asset.css

就我而言，我对我的 进行了以下更改package.json：

  "homepage": "/search",
  "build": "react-scripts build && mkdir build/search && mv build/static build/search/static"

这是因为我有一个 nginx 反向代理服务/search于不同的端点，所以我所有的静态资产都必须由它提供服务/search/static。

Answer 2

更新：

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

1. 反应脚本弹出（不推荐）
2. 补丁包
3. 反应应用程序重新连线

我正在提供步骤patch-package。
您需要更改config/webpack.config.jsreact-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 中。

以下是设置补丁包的步骤，您可以阅读他们的自述文件以获取更多详细信息：

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 存储库供您参考。

旧答案：

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

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

在你的 package.json 中你有：

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

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

"postbuild": "mv build/ dist/"

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