React项目build打包后webp、mp3等特殊类型文件无法加载问题

核心原因 #

这个问题大概率和React本身配置无关，是部署服务器的静态资源规则配置异常导致的，本地create-react-app自带的devServer默认支持所有常见静态资源后缀的响应，所以执行npm run start不会出问题，build打包本身也不会主动过滤webp、mp3这类后缀的资源。

具体可能场景及解决方法 #

• 场景1：服务器MIME类型配置缺失
  大多数Nginx、Apache、Caddy这类web服务器默认不会配置webp、mp3的正确MIME类型，收到这类资源请求时会返回404或者错误的响应头，导致前端无法识别加载。
  以Nginx为例，你需要在Nginx的mime.types配置块中添加对应规则：

  types {
    image/webp webp;
    audio/mpeg mp3;
  }
  

  修改配置后重启服务器即可生效。
• 场景2：静态资源路径配置错误
  如果你的项目部署在服务器的子目录下，没有在CRA配置中设置正确的homepage字段，会导致build后的资源引用路径是根路径，和实际部署路径不匹配。
  解决方法是在package.json中添加配置：

  "homepage": "."
  

  如果你是部署在/myapp这类自定义子目录下，就配置为"/myapp"，重新执行npm run build后再部署即可。
• 场景3：服务器静态资源过滤规则拦截
  部分服务器的安全规则、WAF配置会默认拦截非通用类的资源请求，或者限制了静态资源允许的后缀白名单，你需要检查服务器的安全配置，把webp、mp3加入到允许的后缀白名单中。
• 场景4：build打包时资源未正常输出
  极少数情况是你把webp、mp3放在了public目录以外的位置，且引用方式不符合CRA的资源引入规则，导致build时没有被打包到产物中。你需要确认：
  • 放在public目录的资源引用时路径加了process.env.PUBLIC_URL前缀
  • 放在src目录的资源是通过import xxx from 'xxx.mp3'的方式引入使用，而非直接写死相对路径

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