如何阻止Webpack为CRA React项目中的SVG文件名添加哈希？

云上老周

2026-7-6

如何阻止Create React App为SVG文件添加哈希值

前置确认

先确保你所有的SVG文件名全局唯一——哪怕是不同目录下的同名文件也要重命名（比如把icons/arrow.svg和assets/arrow.svg改成icons/arrow-icon.svg和assets/arrow-asset.svg），避免构建后因文件名重复导致资源覆盖或引用错误。

实现方案（无需eject）

用react-app-rewired和customize-cra修改webpack配置，不用 eject 暴露全部配置：

安装依赖

npm install react-app-rewired customize-cra --save-dev

在项目根目录创建config-overrides.js文件，添加以下配置：

const { override, addWebpackModuleRule } = require('customize-cra');

module.exports = override(
  // 配置SVG资源处理规则，禁用哈希
  addWebpackModuleRule({
    test: /\.svg$/,
    issuer: { not: /\.(js|mjs|jsx|ts|tsx)$/ },
    type: 'asset/resource',
    generator: {
      filename: 'static/media/[name][ext]' // 只保留原文件名和后缀，不加哈希
    }
  })
);

修改package.json中的scripts命令：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

针对SVG作为组件引入的额外配置

如果项目中是把SVG作为React组件引入（比如import Logo from './logo.svg'），需要调整config-overrides.js兼容这种场景：

const { override, addWebpackModuleRule } = require('customize-cra');

module.exports = override(
  addWebpackModuleRule({
    test: /\.svg$/,
    oneOf: [
      // 处理JS/TS中引入的SVG组件
      {
        issuer: /\.(js|mjs|jsx|ts|tsx)$/,
        use: ['@svgr/webpack'],
      },
      // 处理作为静态资源的SVG
      {
        type: 'asset/resource',
        generator: {
          filename: 'static/media/[name][ext]'
        }
      }
    ]
  })
);