Webpack项目中CSS与SVG加载异常，SVG路径含多余字符求助

从你提供的错误请求地址http://localhost:9000/%7B'./images/Browser.svg'%7D（解码后为{'./images/Browser.svg'}）来看，核心问题是SVG路径被错误地保留了模板语法/无效字符，Webpack未正确解析该资源引用，具体原因和解决步骤如下：

1. CSS中SVG引用语法错误 #

大概率是你在CSS里写了错误的引用格式，比如：

/* 错误写法：多余的花括号和嵌套引号 */
background-image: url({'./images/Browser.svg'});
/* 或者错误使用模板字符串但未被Webpack解析 */
background-image: url(${require('./images/Browser.svg')});

修正方式：
使用标准的CSS资源引用语法：

background-image: url('./images/Browser.svg');

如果需要通过JS动态注入资源，应在JS中导入SVG后再传递给样式：

// index.js
import browserSvg from './images/Browser.svg';
document.querySelector('.element').style.backgroundImage = `url(${browserSvg})`;

2. Webpack缺少SVG资源处理配置 #

Webpack默认不会自动处理SVG文件，需要配置对应的loader或asset模块（Webpack 5+）来解析SVG引用：

Webpack 5+ 配置示例（推荐） #

使用内置的asset/resource模块处理SVG：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      // 处理CSS文件
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      // 处理SVG资源
      {
        test: /\.svg$/i,
        type: 'asset/resource',
        generator: {
          filename: 'images/[name][ext]' // 指定SVG输出目录
        }
      }
    ],
  },
};

Webpack 4及以下配置示例 #

使用file-loader处理SVG：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.svg$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'images/[name].[ext]'
            }
          }
        ]
      }
    ],
  },
};

3. CSS-loader配置异常 #

如果使用了css-loader的模块化或ES模块选项，可能导致路径解析异常，需调整配置：

{
  test: /\.css$/i,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        esModule: false, // 避免资源路径被包裹为ES模块格式
      },
    },
  ],
}

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