如何修复Webpack打包中SVG背景路径错误问题？

在Webpack打包过程中遇到SVG相关问题：当在CSS（Less）文件中设置SVG为背景图时，原路径assets/img/check.svg被错误替换为/c0cddb80437d14bc7741.svg，访问该路径会弹出错误提示**“第1行第1列错误：文档为空”**。查看生成的文件内容，发现它并非SVG文件，而是一段JS导出代码：

export default {
      id: "check-usage",
      viewBox: "0 0 18 13",
      url: __webpack_public_path__ + "/mnt/d/work/rainbow-vue/src/assets/img/check.svg",
      toString: function () {
        return this.url;
      }
    }

我推测这是mini-css-extract-plugin与svg-sprite-loader插件冲突导致的，请问有没有人遇到过类似问题？

以下是我的Webpack配置：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const fs = require('fs')
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
const webpack = require('webpack');

const PATHS = {
  src: path.join(__dirname, './src'),
  dist: path.join(__dirname, './dist'),
  assets: 'assets/'
}
const PAGES_DIR = `${PATHS.src}/html/pages/`
const PAGES = fs.readdirSync(PAGES_DIR).filter(fileName => fileName.endsWith('.pug'))

module.exports = {
  target: 'web',
  externals: {
    paths: PATHS
  },
  entry: {
    app: PATHS.src,
  },
  devServer: {
    port: 8081,
    liveReload: true,
    hot: false,
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.pug$/,
        oneOf: [
          {
            resourceQuery: /^\?vue/,
            use: ['pug-plain-loader']
          },
          {
            use: [{
              loader: 'pug-loader', options: {pretty: true}
            }]
          }
        ]
      },
      { test: /\.(js)$/, use: 'babel-loader' },
      {
        test: /\.less$/,
        use: [
          'vue-style-loader',
          {
            loader: MiniCssExtractPlugin.loader,
            options: { esModule: false }
          },
          {
            loader: 'css-loader',
            options: { sourceMap: true }
          }, {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                sourceMap: true,
                plugins: [
                  require('autoprefixer'),
                  require('css-mqpacker'),
                  require('cssnano')({
                    preset: [
                      'default', {
                        discardComments: {
                          removeAll: true
                        }
                      }
                    ]
                  })
                ]
              },
            }
          }, {
            loader: 'less-loader',
            options: { sourceMap: true }
          }
        ]
      },
      {
        test: /\.svg$/,

        use: [
          {
            loader: 'svg-sprite-loader',
            options: {
              extract: true,
              spriteFilename: svgPath => `assets/icon/sprite${svgPath.substr(-4)}`
            }
          },
          {
            loader: 'svgo-loader',
            options: {
              plugins: [
                {
                  name: 'removeAttrs',
                  params: {
                    attrs: 'fill',
                  },
                },
              ],
            },
          },
        ]

      },
    ]
  },
  output: {
    path: PATHS.dist,
    publicPath: '/',
    filename: 'main.js',
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './'),
      vue$: 'vue/dist/vue.cjs.js',
    },
    extensions: ['.*', '.js', '.vue', '.json'],
    modules: [
      path.join(__dirname, 'node_modules')
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),
    new VueLoaderPlugin(),
    new CopyWebpackPlugin({patterns: [
      { from: `${PATHS.src}/${PATHS.assets}img`, to: `${PATHS.assets}img` },
      { from: `${PATHS.src}/${PATHS.assets}fonts`, to: `${PATHS.assets}fonts` },
    ]}),
    new SpriteLoaderPlugin(),
    new MiniCssExtractPlugin({
      runtime: false,
      filename: `${PATHS.assets}css/[name].css`,
    }),
    ...PAGES.map(page => new HtmlWebpackPlugin({
      template: `${PAGES_DIR}/${page}`,
      filename: `./${page.replace(/\.pug/,'.html')}`,
      minify: false,
    }))
  ],
  mode: 'development',
  // stats: {warnings:false}
}

注：我已经将MiniCssExtractPlugin的runtime设置为false。

内容的提问来源于stack exchange，提问作者Александр Панфилов