SVG sprite(symbol) 在 webpack 升级后不由 svg-loader 生成

Question

我有一个项目，如果构建处于使用 webpack 的开发模式，我需要生成 svg sprite(symbol)。在我使用旧版本 (3.x.x) 的 webpack 之前，这一切都很好。

我现在已经将 webpack 升级到版本 5. 并相应地更新了依赖项并更改了一些结构。现在它不生成精灵。我已经尝试了很多东西，但没有任何效果。

这是我的旧代码：

if(!isProd){
  rules.push({
    test: /\.svg$/,
    include: path.join(__dirname, './library/basics/Icons'),
    loaders: [
      'svg-sprite-loader?' +
        JSON.stringify({
          name: 'icon-[name]',
          prefixize: true,
        }),
      'svgo-loader?' +
        JSON.stringify({
          plugins: [
            {removeTitle: true},
            {convertPathData: false},
            {removeUselessStrokeAndFill: true},
          ],
        }),
    ],
  })

这方面的依赖如下所述

    "svg-sprite-loader": "0.3.1",
    "svgo": "^1.1.1",
    "svgo-loader": "^2.2.0",

    "webpack": "3.12.0",
    "webpack-dev-server": "2.11.2"

现在我把webpack代码更新成这样了

if(!isProd){
    test: /\.svg$/,
    include: path.join(__dirname, "./library/basics/Icons"),
    use: [
      {
        loader: "svg-sprite-loader",
        options: { name: "icon-[name]", prefixize: true },
      },
      {
        loader: "svgo-loader",
        options: {
          removeTitle: true,
          convertPathData: false,
          removeUselessStrokeAndFill: true,
        },
      },
    ],
  }

并更新依赖项

   "svg-sprite-loader": "^6.0.11",
   "svgo": "^1.3.2",
   "svgo-loader": "^4.0.0",

   "webpack": "^5.39.1",
   "webpack-cli": "^5.0.1",
   "webpack-dev-server": "^4.11.1",

这是我未更改的 javscript 代码：

  var general = null;
  var  tickets = null;
  general = require.context('./General', true, /.*\.svg$/)
  general.keys().forEach(general)

  tickets = require.context('./Tickets', true, /.*\.svg$/)
  tickets.keys().forEach(tickets)