حل مشكلة عدم معالجة الصور الموجود في ملفات html في webpack

لم تظهر صورة اللوجو بإمتداد png رغم ان صورة الخلفية تظهر وذلك بإستخدام الإصدار الأخير من webpack فما الحل

مع العلم أن صورة الخلفية كانت لا تريد الظهور حتى قمت بإنزال إصدار خاص بـ   html-loader@1.3.2" و css-loader@5.0.0

هذا ملف package.json

{
  "name": "safarnysite",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack serve --mode development",
    "dist": "webpack serve --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "bootstrap": "^5.1.3",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^5.0.0",
    "file-loader": "^6.2.0",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^5.5.0",
    "jquery": "^3.6.0",
    "mini-css-extract-plugin": "^2.6.0",
    "popper.js": "^1.16.1",
    "sass": "^1.49.9",
    "sass-loader": "^12.6.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  }
}

وهذا ملف webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');

module.exports = {

  entry: './src/js/index.js',
  
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].bundle.js',
    // clean: true,
  },
  // optimization: {
  //   chunkIds: false,
  // },
  stats: {
    warnings: false,
  },

  performance: {
    maxEntrypointSize: 400000,
    maxAssetSize: 100000,
	  hints: false,
  },

  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    devMiddleware:{
      writeToDisk: true,
    },
    // compress: true,
    port: 9000,
    open: true,
    // livereload: false,
    hot: false,
  },

  module: {
    rules: [
      {
        test: /\.(css|sass|scss)$/i,
        use: [
          // Creates `style` nodes from JS strings
          MiniCssExtractPlugin.loader,
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      },
      {
        test: /\.(jpe?g|png|gif)$/,
        use: {
          loader: 'url-loader',
          options:{
            name: '[name].[ext]',
            outputPath:'images',
            limit: 8192,
          }
          
        },
      },
      {
        test: /\.(svg|eot|woff|woff2|ttf)$/,
        use: {
          loader: 'url-loader',
          options:{
            name: '[name].[ext]',
            outputPath:'fonts',
            limit: 8192,
          }
          
        },
      },
    ],
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].bundle.css',
    }),
    // new CleanWebpackPlugin({
    //   dry: true,
    //   verbose: true,

    // }),
  ],
};