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

Question

我们如何从 webpack 中自动包含在 index.html 中的所有文件（如 <script src="/static/js/...">...）和 React 应用程序的所有路径中删除初始斜杠？

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

Answer 1

打开 public/index.html 删除所有斜线 after/before %PUBLIC_URL%

例如

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

成为

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

如果您在 jsx 中使用变量 process.env.PUBLIC_URL，请始终删除斜杠 after/before 变量。

例如

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: ''
      }
    }
  }
}

就是这样

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

how to remove the initial slash from bundle file path, publicPath, PUBLIC_URL in webpack with create-react-app?

bundle

reactjs

webpack

create-react-app