Webpack打包时CSS中SVG文件报错，如何添加对应Loader解决？

这个问题很典型——你当前的Webpack配置只处理了CSS和JS文件，但完全没配置如何处理SVG这类静态资源，所以当CSS里引用SVG（比如background: url('./icon.svg')）时，Webpack就不知道该怎么解析它了。

下面是具体的解决步骤：

1. 安装资源处理Loader #

你需要安装file-loader或者url-loader（推荐后者，它可以把小体积的SVG转成Base64编码嵌入到代码里，减少HTTP请求）。打开终端运行：

# 二选一即可，推荐url-loader
npm install --save-dev url-loader file-loader

2. 更新Webpack配置 #

在你的module.rules数组里添加一条专门处理SVG的规则，同时注意：Webpack 2及以后版本已经废弃了loaders字段，建议把你原来的babel-loader配置也移到rules里，保持配置统一。修改后的完整配置大概是这样：

module.exports = {
  // 其他配置项...
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin()
  ],
  module: {
    rules: [
      // 处理CSS的规则
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // 处理JS的Babel规则（从原来的loaders移过来）
      {
        test: /\.js$/,
        loader: 'babel-loader',
        options: { // 用options替代旧的query字段，更符合新版Webpack规范
          presets: ['es2015']
        },
        exclude: /node_modules/
      },
      // 新增：处理SVG的规则
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192, // 小于8KB的SVG转成Base64，大于的话自动用file-loader输出到dist目录
              name: '[name].[hash:8].[ext]', // 输出的文件名格式，避免浏览器缓存旧资源
              outputPath: 'assets/icons/' // 指定SVG文件输出到dist下的assets/icons子目录
            }
          }
        ]
      }
    ]
  }
};

补充说明 #

• 如果只是需要简单输出SVG文件，不需要转Base64，直接用file-loader即可，配置更简洁：

  {
    test: /\.svg$/,
    loader: 'file-loader',
    options: {
      name: '[name].[hash:8].[ext]',
      outputPath: 'assets/icons/'
    }
  }
  

• 要是你需要对SVG进行代码压缩优化，可以搭配svgo-loader一起使用，但基础场景下上面的配置已经足够解决当前的错误了。

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