如何使用 create-react-app 从 webpack 中的捆绑文件路径、publicPath、PUBLIC_URL 中删除初始斜杠？

Question

我们如何从 webpack 中自动包含在 index.html 中的所有文件中删除初始斜杠（例如

如何在命令行 npx create-react-app 创建的 React 项目中自定义 webpack.config.js 而不弹出它？

Answer 1

Fancesco Orsi 的回答的第 1 部分解决了我的部分问题，但 /static/ 似乎需要搞乱配置或添加库。

将在我的反应和电子构建之间运行的后记搞砸在一起更简单。我相信人们可以根据他们的需要重新利用它。

我使用以下代码创建了一个 JavaScript 文件，并将 package.json 中的后脚本指向它。

"postbuild": "node mid-build.js"

const { readFileSync, writeFileSync } = require('fs');
let txt = readFileSync('./build/index.html');
txt = txt.toString().replaceAll('/static/', 'static/');
writeFileSync('./build/index.html', txt);
console.log('\nmid-build edits complete\n');

不太优雅，但它有效，我可以返回调试构建。

Answer 2

打开 public/index.html 删除 %PUBLIC_URL% 之后/之前的所有斜杠，

例如，

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

则变为

<link rel="icon" href="%PUBLIC_URL%favicon.ico" />

---

如果您使用变量 process.env.PUBLIC_URL， > 在 jsx 中，始终删除变量前后的斜杠。

例如，

const json = await http({ url: `${process.env.PUBLIC_URL}/config.json`});

：

const json = await http({ url: `${process.env.PUBLIC_URL}config.json`});

在项目的根目录中创建一个名为 .env 的空文件，输入以下文本

PUBLIC_URL=

---

替换 webpack.config.js 的 publicPath 值（您通常可以在 /node_modules/react-scripts/config/webpack.config.js 中找到此文件）而不触及原始（不推荐！！），您可以使用像 react-app-rewired 或 craco 这样的库>。

下面您可以看到 craco 的示例 https://www.npmjs.com/package/@ craco/craco ：

通过 npm i @craco/craco 安装后，

您需要将 package.json 中的一些行从 替换

之后

...
  "scripts": {
    "start": "react-script start",
    "build": "react-script build",
    "test": "react-script test",
    "eject": "react-script eject"
  },
...

为

...
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  },
...

，在您的根项目添加一个名为 craco.config.js

在文件内的

module.exports = {
    configure: {
      output: {
        publicPath: ''
      }
    }
  }
}

添加以下代码即可