如何解决react-app-rewired构建时的大小写敏感问题？

问题背景 #

• 本地Windows 10环境：执行react-app-rewired build后，src/assets下的图片、字体、SVG等资源会被复制到build/static/media，文件名大小写保持原样，无加载异常。
• Netlify构建部署：资源文件名会被转为小写（如LEMONMILK.woff变为lemonmilk.[hash].woff），但Netlify部署后资源加载正常。
• Apache（Linux）部署：部分资源出现404错误，原因是CSS中引用的资源路径仍保留原大写文件名（如LEMONMILK.[hash].woff），而实际生成的文件是小写命名，Linux系统的大小写敏感特性导致路径匹配失败。

最佳解决方案 #

通过自定义Webpack配置，强制file-loader（及url-loader）将资源文件名转为小写，同时确保CSS中生成的引用路径同步为小写，实现跨环境的文件名一致性。

实施步骤 #

1. 确保项目已安装file-loader（若未安装，执行以下命令）：

npm install --save-dev file-loader

2. 在项目根目录的config-overrides.js中添加Webpack配置覆盖规则：

module.exports = function override(config, env) {
  // 定位到处理资源文件的loader规则集合
  const assetRules = config.module.rules.find(rule => Array.isArray(rule.oneOf)).oneOf;

  assetRules.forEach(rule => {
    // 处理file-loader规则
    if (rule.loader?.includes('file-loader')) {
      // 修改name选项，使用[name:lowercase]强制文件名转为小写
      rule.options.name = '[name:lowercase].[hash:8].[ext]';
    }
    // 处理url-loader规则（Create React App中部分资源会用url-loader处理）
    if (rule.use?.[0]?.loader?.includes('url-loader')) {
      rule.use[0].options.name = '[name:lowercase].[hash:8].[ext]';
    }
  });

  return config;
};

3. 重新执行构建命令：

react-app-rewired build

修改后，无论在Windows还是Linux环境构建，资源文件名都会统一为小写，CSS中的引用路径也会同步匹配，彻底解决大小写敏感导致的404问题。

其他方案对比 #

• 阻止Webpack转小写：不可行，Windows与Linux的文件系统大小写特性差异无法消除，强行阻止会导致Windows构建的包在Linux环境同样出现404。
• 手动重命名资源：工作量大，后续新增资源易重复出错，缺乏可维护性。
• 修改Apache配置：需开启大小写不敏感，依赖服务器环境，不符合项目环境无关的设计目标。
• 额外引入转小写loader：无需额外依赖，file-loader本身支持[name:lowercase]占位符，足够满足需求。

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