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

标签： javascriptreactjsnpmbuildcreate-react-app

Answer 1

更新：

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

1. 反应脚本弹出（不推荐）
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 。

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

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/"

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