目前，我有一个 webpack 5 项目，需要几个 svg 图像和一个背景图像。 svg 图像被编码到 template.html 文件中。背景图像在 style.css 文件中引用。当我运行构建时，网页上没有构建任何图像。它们保持散列形式（即使我在文件加载器测试中使用自定义名称。

下面是当前的 webpack 配置文件：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        index: './src/js/index.js',
    },
    plugins: [
        new HtmlWebpackPlugin({
          template: './src/template.html',
        }),
      ],
    devtool: 'inline-source-map',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'docs'),
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use:['style-loader','css-loader'],
            },
            {
                test: /\.(png|svg|jpg|jpe?g|gif)$/i,
                use: [
                    {
                      loader: 'file-loader',
                      options: {
                        name: '[name].[ext]',
                        outputPath: 'assets/images/'
                      }
                    }
                ]
            },
            {
                test:/\.html$/,
                use: [
                  'html-loader'
                ]
              },
        ],
    },
};

下面是一个片段，展示了 svg 是如何实现的

<div class="studyTime">
      <div id="timeManager">
        <div id="toDoButtons">
          <button id="new"><img src="./assets/images/add.svg" alt=""></button>
          <button id="clear"><img src="./assets/images/clear.svg" alt=""></button>
        </div>
        <div id="todo">

        </div>
      </div>
      <img class="openDrawer" id="timeOpen" src="./assets/images/left.svg" alt="">
    </div>
    <div class="clock">
      <div class="clock-face">
        <div class="core"></div>
        <div class="hand" id="hour-hand"></div>
        <div class="hand" id="min-hand"></div>
        <div class="hand" id="second-hand"></div>
      </div>
    </div>

最后，这是程序构建时的图像： 构建时出现图像错误

我尝试过使用文件加载器格式，以及删除它。我的文件结构如下所示：

文件结构

我没有收到任何错误，图像出现在捆绑代码中，但以散列形式出现，并且不会出现在实时网站中。