加载带哈希文件名图片时项目启动报错，求解决方案

安全阿岳

2026-7-6

问题解决与配置优化方案

一、先解决启动报错的核心问题

你把webpack的loader配置写到了.eslintrc.json里，这是完全错误的——.eslintrc.json是ESLint的代码规范检查配置文件，根本不识别webpack的loader规则，这就是启动报错的直接原因。

解决步骤：

打开.eslintrc.json，删除rules里那段"loader"相关的所有配置
保存文件后重新执行yarn start，报错会立即消失

二、优化图片加载配置（针对无webpack配置文件的脚手架项目）

你的项目应该是Create React App（CRA）这类零配置脚手架，默认会自动用file-loader处理图片，给文件名加哈希是为了实现静态资源长期缓存，这是合理的优化机制。如果需要自定义配置，分两种场景处理：

场景1：只想去掉文件名哈希，不需要缓存优化

直接把图片放到项目根目录的public文件夹下（比如public/images/image.png），然后在组件里直接用绝对路径引用：

<img src="/images/image.png" alt="示例图片" />

这种方式下图片不会被webpack处理，也不会追加哈希，但失去了缓存优化，适合不需要长期缓存的小图。

场景2：保留缓存，自定义哈希规则/输出路径

因为不想暴露webpack配置文件，需要用react-app-rewired + customize-cra来覆盖脚手架的默认配置（无需执行eject）：

安装依赖

yarn add react-app-rewired customize-cra --dev

在项目根目录创建config-overrides.js，写入自定义配置

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

module.exports = override(
  addWebpackModuleRule({
    test: /\.(png|jpe?g|gif)$/i,
    exclude: /node_modules/,
    use: [
      {
        loader: 'file-loader',
        options: {
          // 自定义输出规则，比如去掉哈希就写`static/media/[name].[ext]`
          name: 'static/media/[name].[hash:8].[ext]',
        },
      },
    ],
  })
);

修改package.json里的启动脚本

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

重新执行yarn start，配置即可生效

关键提醒

ESLint和webpack是完全独立的工具：ESLint负责代码语法/规范检查，webpack负责模块打包与资源处理，绝对不要把webpack的配置写到ESLint文件里。

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