Webpack 5已生成svg/spritesheet.svg却无法找到的问题求助

升级Webpack 5及相关依赖后遇到了问题：Webpack明明已经生成了svg/spritesheet.svg文件，但在HTML中引用它时却提示找不到。旧版本配置运行完全正常，实在找不到哪里出错了，求帮忙排查。

Webpack输出日志 #

<i> [webpack-dev-middleware] wait until bundle finished: /bundle.js
assets by status 268 bytes [cached] 1 asset
assets by path *.js 281 KiB
  asset bundle.js 280 KiB [emitted] (name: index)
  asset index.f7be300873f5e9bf8004.hot-update.js 869 bytes [emitted] [immutable] [hmr] (name: index)
asset index.html 4.9 KiB [emitted]
asset svg/spritesheet.svg 577 bytes [emitted]  // <-- 这是我需要的文件
asset index.f7be300873f5e9bf8004.hot-update.json 29 bytes [emitted] [immutable] [hmr]
Entrypoint index 281 KiB (268 bytes) = bundle.js 280 KiB index.f7be300873f5e9bf8004.hot-update.js 869 bytes 1 auxiliary asset
cached modules 172 KiB (javascript) 268 bytes (asset) [cached] 33 modules
runtime modules 27.4 KiB 13 modules
./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/index.css 11.3 KiB [built]

我需要的就是日志里标注的asset svg/spritesheet.svg 577 bytes [emitted]这个文件，而且已经在JS文件中引入了它，Webpack既然能生成它，说明是识别到这个文件的对吧？

HTML引用时的报错 #

ERROR in   Error: Child compilation failed:
  Module not found: Error: Can't resolve './svg/spritesheet.svg' 

对应的HTML代码 #

<section id="hero">
  <div class="max-w-6xl mx-auto text-center mb-40 px-10 pt-16">
    <!-- <img src="images/logo.svg" alt="" class="mx-auto my-16"> -->
    <svg class="mx-auto my-16"><use xlink:href="svg/spritesheet.svg#logo" /></svg>
  </div>
</section>

Webpack配置文件 #

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const SpriteLoaderPlugin = require("svg-sprite-loader/plugin");

module.exports = {
    entry: {index: "./src/index.ts"},
    mode: "development",
    devServer: {
        static: {
            directory: path.resolve(__dirname, 'dist'),
          },
        port: 3000,
        open: {
            app: {
              name: 'chrome',
            },
          },
        hot: true,
        compress: true,
        historyApiFallback: true,
        watchFiles: ["src/**/*"]
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: "ts-loader",
                exclude: /node_modules/,
            },
            {
                test: /\.css$/i,
                include: path.resolve(__dirname, "src"),
                use: ["style-loader", "css-loader", "postcss-loader"]
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource'
              },
              {
                test: /\.svg$/,
                use: [
                    {
                        loader: 'svg-sprite-loader',
                        options: {
                            extract: true,
                            spriteFilename: 'svg/spritesheet.svg'
                        },
                    },
                    'svgo-loader',
                ]
            },
            {
                test: /\.html$/,
                use: 'html-loader'
            },
        ],
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"],
    },
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist"),
        // clean: true,
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html',
            chunks: ['index'],
            // cache: false
        }),
        new SpriteLoaderPlugin()
    ]
}

Package.json脚本 #

"scripts": {
  "start": "webpack serve --mode=development",
  "build": "SET NODE_ENV=production && webpack",
  "test": "echo \"Error: no test specified\" && exit 1"
},

有人能看出问题所在吗？

补充说明：不确定是否相关，但现在Webpack会输出两个文件——svg/spritesheet.svg和带哈希值的da9c601f6125caa9dcb3.svg（日志第4行），之前的项目只会生成精灵表，不会为每个SVG单独输出文件。

对应的Webpack输出日志：

asset bundle.js 280 KiB [emitted] (name: index)
asset index.html 5.01 KiB [emitted]
asset svg/spritesheet.svg 577 bytes [emitted]
asset da9c601f6125caa9dcb3.svg 268 bytes [emitted] [immutable] [from: src/images/logo.svg] (auxiliary name: index)
runtime modules 27.4 KiB 13 modules
modules by path ./node_modules/ 170 KiB
  modules by path ./node_modules/webpack-dev-server/client/ 57.4 KiB 12 modules
  modules by path ./node_modules/style-loader/dist/runtime/*.js 5.75 KiB 6 modules
  modules by path ./node_modules/webpack/hot/*.js 4.3 KiB 4 modules
  modules by path ./node_modules/html-entities/lib/*.js 81.3 KiB 4 modules
  modules by path ./node_modules/css-loader/dist/runtime/*.js 2.33 KiB 2 modules
  ./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]
  ./node_modules/events/events.js 14.5 KiB [built] [code generated]
modules by path ./src/ 13.8 KiB (javascript) 268 bytes (asset)
  modules by path ./src/*.css 13.7 KiB
    ./src/index.css 2.37 KiB [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/index.css 11.3 KiB [built] [code generated]
  ./src/index.ts 124 bytes [built] [code generated]
  ./src/images/logo.svg 42 bytes (javascript) 268 bytes (asset) [built] [code generated]

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