Webpack，我正在尝试使用文件加载器来加载图像，但是每当我运行构建时，我都会得到 2 个图像而不是 1 个，并且链接到 html 文件的那个是错误的

如何解决Webpack，我正在尝试使用文件加载器来加载图像，但是每当我运行构建时，我都会得到 2 个图像而不是 1 个，并且链接到 html 文件的那个是错误的

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// const TerserPlugin = require('terser-webpack-plugin');
// const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
  // mode: 'developmen',devtool: 'source-map',entry: './src/app.js',output: {
    path: path.resolve(__dirname,'dist'),filename: '[name].[contenthash].js',},// optimization: {
  //   minimizer: [
  //     new OptimizeCssAssetsPlugin(),//     new TerserPlugin(),//     new HtmlWebpackPlugin({
  //       template: './src/index.html',//       minify: {
  //         removeAttributeQuotes: true,//         collapseWhitespace: true,//         removeComments: true,//       },//     }),//   ],// },module: {
    rules: [
      {
        test: /\.html$/,use: ['html-loader'],{
        test: /\.scss$/,use: [
          MiniCssExtractPlugin.loader,'css-loader','postcss-loader','sass-loader',],{
        test: /\.(svg|png|jpg|gif)$/,use: {
          loader: 'file-loader',options: {
            name: '[name].[hash].[ext]',outputPath: 'images',// publicPath: 'assets',// emitFile: true,// esModule: false,plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',title: 'IT Company',filename: 'index.html',}),new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash].css',chunkFilename: '[id].css',new CleanWebpackPlugin(),};

我正在尝试使用文件加载器为我的 HTML 文件生成动态图像，但是每当我运行构建时，我都会得到 2 个图像，构建中链接到 HTML 文件的图像是错误的，可能是什么问题，因为几个小时以来，我一直在尝试解决此问题，我只想能够从我的模板 HTML 中解析图像并动态加载它。我得到的截图已附加到此，我为主图像创建了一个图像目录，但它一直在查看 enter image description here

之外的那个