如何控制或预测React托管静态媒体文件时生成的URL路径？

以下是三种可落地的实现方案，可根据项目场景选择：

方案1：使用public目录托管（零配置） #

• 将需要固定路径的静态图片直接放入项目根目录的public文件夹下，可自定义子目录结构，比如public/custom-static/xxx.jpg
• 代码中直接用绝对路径引用即可，例如<img src="/custom-static/xxx.jpg" />
• 打包时public目录下的资源会原样复制到输出目录，不会添加随机哈希后缀，路径完全和存放结构一致，无需修改任何构建配置
• 适用场景：仅少数需要固定URL的资源，不需要构建工具做图片压缩、格式转换等处理的场景

方案2：修改构建配置自定义命名规则 #

2.1 使用CRA脚手架且可接受eject的场景 #

• 执行npm run eject命令暴露脚手架内置的webpack配置（不可逆操作）
• 打开config/webpack.config.js文件，定位到处理图片类资源的loader配置
• 找到file-loader的options.name参数，默认值为static/media/[name].[hash:8].[ext]，其中[hash:8]就是你看到的8位随机字符
  • 若要完全去掉随机后缀，修改为static/media/[name].[ext]即可，打包后路径完全固定
  • 若要保留哈希但可预测，可修改为static/media/[name].[contenthash:8].[ext]，该哈希值由文件内容生成，只要文件内容不变，哈希值固定，可通过提前计算文件内容哈希预知路径

2.2 不想eject的CRA项目 #

可使用craco等CRA配置覆盖工具，在craco.config.js中添加配置覆盖默认的资源命名规则，无需暴露全部内置配置，操作逻辑和2.1一致，支持回退

2.3 自定义webpack项目 #

• Webpack4及更早版本：直接修改file-loader的输出命名配置即可
• Webpack5及以上版本：修改asset module的generator.filename配置即可实现自定义命名规则

注意：如果去掉资源的哈希后缀，更新同名文件时用户浏览器可能会命中旧缓存，可通过手动给URL加版本参数的方式处理缓存失效，比如/static/media/xxx.jpg?v=2

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