反应 webpack 应用程序 public/images vs src/images答案

【问题标题】：React webpack app public/images vs src/images反应 webpack 应用程序 public/images vs src/images
【发布时间】：2018-03-22 16:21:10
【问题描述】：

我还使用 webpack 进行转译和捆绑到公共。
将图像资产公开与非公开的优缺点是什么。
哪种项目结构更适合 React 应用？

public/  
-images/  
--favicon.ico  
--(other-image-files...)  
-index.html
-bundle.js

src/
-components/
-style/
-images/
-utils/

【问题讨论】：

现在建议的方法是使用并遵循 create-react-app。

标签： reactjs webpack assets directory-structure organization

【解决方案1】：

src 目录的源代码被编译、链接并最终成为可执行文件的历史由来已久。鉴于今天的构建工具，这个概念仍然是最新的。使用webpack、brunch 或parcel，您永远不会真正直接从public 目录“提供”任何内容——所有内容都被转译、捆绑等到public 或dist 输出目录中。

考虑到这一点，我认为src 完全适用于图像，甚至您的index.html 文件（请注意，最终在您的分发文件夹中的index.html 可能与原始“源”不同index.html 您创建的）。我希望这会有所帮助。不确定它是否更好，但鉴于您的问题，我将其作为一个观点提供。

【讨论】：

【解决方案2】：

总的来说，这个想法是公共目录中的图像可以通过应用程序外部的 URL 访问。只有通过 webpack 导入加载 src 中的任何内容才会被内置。除非公开共享，否则我通常会将内容保存在 src 中。

【讨论】：

【解决方案3】：

https://facebook.github.io/create-react-app/docs/using-the-public-folder

CRA 文档中推荐的方法是将图像放入src 并通过导入来加载。

使用public 文件夹应该只用于特殊情况。

【讨论】：