在构建期间如何渲染Create React App html模板

Question

Create React App包含一个public/index.html，其中包含由模板引擎替换的多个字符串。

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

我的问题是CRA Webpack配置文件或构建脚本中的%PUBLIC_URL%被其他值替换了吗？我已经看到CRA在哪里使用html-webpack-plugin，但这似乎使用了默认的lodash模板引擎，该引擎使用不同的语法来标记要替换的内容

Answer 1

在config / env.js文件PUBLIC_URL中已设置：

https://github.com/facebook/create-react-app/blob/a10223d418e4093856bd225e6e4be6e12ac8ae4e/packages/react-scripts/config/env.js#L71

然后在config / webpack.config.js中调用getClientEnvironment（publicUrl）的地方：

https://github.com/facebook/create-react-app/blob/a10223d418e4093856bd225e6e4be6e12ac8ae4e/packages/react-scripts/config/webpack.config.js#L79

Answer 2

替换由 InterpolateHtmlPlugin 完成。

这是 webpack 配置中的相应行：https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/config/webpack.config.js#L655

这里是 InterpolateHtmlPlugin 的源代码：https://github.com/facebook/create-react-app/blob/main/packages/react-dev-utils/InterpolateHtmlPlugin.js