ReactJS中react-app-rewired配置raw-loader无效，导入文件仅获路径

算力阿峰

2026-5-14

解决React项目中raw-loader返回文件路径而非内容的问题

看起来你遇到的问题是因为create-react-app默认的webpack配置里，file-loader的优先级比你自定义的raw-loader高——它会先匹配并处理你的.raw文件，最终输出的是文件的打包路径，而不是文件内容。下面是具体的解决方案：

1. 确保raw-loader已安装

首先确认你已经安装了raw-loader：

npm install raw-loader --save-dev
# 或者用yarn
yarn add raw-loader -D

2. 修改config-overrides.js配置

create-react-app的webpack配置使用了oneOf规则来按顺序匹配文件类型，我们需要把raw-loader的规则放在file-loader之前，确保它优先被匹配。同时，还要让file-loader排除处理.raw文件。修改你的config-overrides.js如下：

module.exports = function override(config, env) {
  // 找到create-react-app配置中的oneOf规则集合
  const oneOfRule = config.module.rules.find(rule => rule.oneOf);

  if (oneOfRule) {
    // 在oneOf数组最前面添加raw-loader规则，确保优先匹配
    oneOfRule.oneOf.unshift({
      test: /\.raw$/i,
      use: 'raw-loader',
    });

    // 找到默认的file-loader规则，让它排除.raw文件
    const fileLoaderRule = oneOfRule.oneOf.find(
      rule => rule.loader && rule.loader.includes('file-loader')
    );
    if (fileLoaderRule) {
      fileLoaderRule.exclude = [...(fileLoaderRule.exclude || []), /\.raw$/i];
    }
  } else {
    // 兼容旧版本react-scripts的 fallback 配置
    config.module.rules.push({
      test: /\.raw$/i,
      use: 'raw-loader',
    });
  }

  return config;
};