create-react-app 使用 public 文件夹
前置条件
注意：此功能适用于 react-scripts@0.5.0 及更高版本。
更改HTML
public 文件夹包含 HTML 文件，因此你可以对其进行调整，例如，设置页面标题。
带有编译代码的 <script>，会在构建过程中自动添加。
在模块系统之外添加静态资源
你还可以将其他资源添加到 public 文件夹。
请注意，通常我们建议您改为import使用JavaScript文件。
例如，请参阅有关 添加一个样式表 以及 添加图片和字体 部分。这种机制提供了许多好处：
- 脚本和样式被压缩并打包在一起，以避免额外的网络请求。
- 缺少文件会导致编译错误，而不是给用户 404 错误。
- 结果文件名包含内容哈希，因此你无需担心浏览器会缓存旧版本(不需要再手动更新时间戳)。
但是，你可以使用 escape hatch(逃生舱) ，在模块系统之外添加资源。
如果将文件放入 public 文件夹，Webpack 将 不会 处理它。
相反，它将被复制到构建文件夹中。
PUBLIC_URL
要引用 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 文件夹
通常我们建议从 JavaScript 导入 stylesheets ，图片和字体。
public文件夹可用作许多不常见情况的变通方法：
- 你需要在构建输出中具有特定名称的文件，例如
manifest.webmanifest。 - 你有数千张图片，需要动态引用它们的路径。
- 你希望在打包代码之外包含一个像
pace.js这样的小脚本。 - 某些库可能与 Webpack 不兼容，你没有其他选择，只能将其包含为
<script>标记。
请注意，如果添加声明全局变量的 <script> ，则还需要知道怎么使用它们。
