React应用生产环境中图片资源的管理方式咨询

webpack对图片资源的处理逻辑 #

• 小体积图片：默认配置下（比如Create React App），小于8KB的图片会被webpack转成Base64编码直接嵌入到JS/CSS文件中，无需单独存放，以此减少HTTP请求次数。
• 大体积图片：webpack会将这类图片复制到打包输出目录（比如build/static/media），同时自动修改组件中的引用路径——把你编写的相对路径（如../assets/xxx.jpg）替换成打包后的资源路径（如/static/media/xxx.[hash].jpg），哈希值用于缓存优化。

部署时的目录结构问题 #

完全不需要手动保持src/assets的文件夹结构。打包完成后，只需把整个打包输出目录（比如Create React App生成的build文件夹）完整上传到Web服务器即可。webpack已经在打包过程中处理好所有资源的引用关系，服务器会根据打包后的目录结构正确提供静态资源。

自定义webpack配置的注意事项 #

如果是手动配置webpack（而非使用CRA这类脚手架），需要确保配置了asset-module（webpack5+推荐）或file-loader，指定图片资源的输出目录、文件名规则，这样才能保证大图片被正确复制到输出目录，且组件中的引用路径被自动更新。

内容的提问来源于stack exchange，提问作者j obe