注意：此功能适用于
react-scripts@0.5.0及更高版本。
更改HTML
public 文件夹包含 HTML 文件，因此你可以对其进行调整，例如，设置页面标题。带有编译代码的 <script> 标记将在构建过程中自动添加到该标记中。
在模块系统之外添加静态资源
你还可以将其他资源添加到 public 文件夹。
请注意，我们通常建议你改为在 JavaScript 文件中导入资源。例如，请参阅有关 添加一个样式表 以及 添加图片和字体 部分。这种机制提供了许多好处：
- 脚本和样式被压缩并打包在一起，以避免额外的网络请求。
- 缺少文件会导致编译错误，而不是给用户 404 错误。
- 结果文件名包含内容哈希，因此你无需担心浏览器会缓存旧版本。
但是，你可以使用 escape hatch(逃生舱) ，在模块系统之外添加资源。
如果将文件放入 public 文件夹，Webpack 将 不会 处理它。相反，它将被复制到构建文件夹中。要引用 public 文件夹中的资源，需要使用名为 PUBLIC_URL 的特殊变量。
在 index.html 中，你可以像这样使用它：
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
只有 %PUBLIC_URL% 前缀才能访问 public 文件夹中的文件。如果你需要使用 src 或 node_modules 中的文件，则必须将其复制到 public 文件夹，以显式指定将该文件作为构建的一部分的意图。
当你运行 npm run build 时，Create React App 将使用正确的绝对路径替换 %PUBLIC_URL% ，这样即使你使用客户端路由或将其托管在 non-root 上，你的项目也能正常工作。
在 JavaScript 代码中，你可以使用 process.env.PUBLIC_URL 用于类似目的：
render() {
// 注意：这是一个逃生舱（escape hatch），应该谨慎使用！
// 通常我们建议使用`import`来获取资源的 URL
// 如我们上一节 “添加图片和字体”中所述。
return <img src="{process.env.PUBLIC_URL" +="" '="" img="" logo.png'}=""/>;
}
请记住这种方法的缺点：
public文件夹中的所有文件都不会进行后处理或压缩。- 在编译时不会调用丢失的文件，并且会导致用户出现 404 错误。
- 结果文件名不包含内容哈希值，因此你需要添加查询参数或在每次更改时重命名它们（，以便清除浏览器缓存）。
何时使用 public 文件夹 When to Use the public Folder
通常我们建议从 JavaScript 导入 stylesheets ，图片和字体 。
public文件夹可用作许多不常见情况的变通方法：
- 你需要在构建输出中具有特定名称的文件，例如
manifest.webmanifest。 - 你有数千张图片，需要动态引用它们的路径。
- 你希望在打包代码之外包含一个像
pace.js这样的小脚本。 - 某些库可能与 Webpack 不兼容，你没有其他选择，只能将其包含为
<script>标记。
请注意，如果添加声明全局变量的 <script> ，则还需要阅读有关使用它们的下一部分。