任何人都可以帮助我进行 webpack 配置吗？

我正在尝试为我的项目配置 webpack（我正在 youtube https://www.youtube.com/watch?v=mnS_1lolc44上学习 colt steele webpack 课程）。但是我无法正确配置我的图像，我尝试了所有方法并在互联网上到处寻找，但无法弄清楚如何解决。下面是我的目录结构和代码片段。

我有三个 webpack 配置文件：webpack.common.js、webpack.dev.js 和 webpack.prod.js

webpack.common.js

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

module.exports = {
    entry: "./src/index.js",
    plugins : [new HtmlWebpackPlugin({
        template: "./src/template.html"
    })],
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: ["style-loader","css-loader","sass-loader"]
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                use: [
                  {
                    loader: "file-loader",
                    options: {
                      name: "[name].[hash].[ext]",
                      publicPath: '/',
                      outputPath: 'img',
                      esModule: false
                    }
                  }
                ]
              },
              {
                test: /\.html$/,
                use: ["html-loader"]
            }              
        ]
    }
}

webpack.dev.js

const path = require('path');
const common = require('./webpack.common');
const {merge} = require('webpack-merge');

module.exports = merge(common, {
    mode: "development",
    output: {
        filename: "main.js",
        path: path.resolve(__dirname, "dist")
    }
})

webpack.prod.js

const path = require('path');
const common = require('./webpack.common');
const {merge} = require('webpack-merge');

module.exports = merge(common, {
    mode: "production",
    output: {
        filename: "main.[contenthash].js",
        path: path.resolve(__dirname, "dist")
    }
})

我的 src 目录结构如下：

我正在通过src/index.js文件导入我所有的 sass 和其他 js 文件，如下所示：

我将 src/template.html 文件中的图像称为

所有图像都存在于 src/img 文件夹中，并且 template.html 文件通过“./img/”路径调用图像。

当我运行 npm build 命令时，我将 dist 文件夹创建为：

在这里，让我感到困惑的一件事是为什么图像会生成两次。一个在 dist/img 文件夹中，具有正确的名称 + 哈希值 + 扩展名，一个在 dist 文件夹中。此外，我生成的 index.html 文件正在调用 dist 文件夹中存在的图像（这是不正确的，为什么生成我不确定）而不是调用 dist/img 文件夹中存在的图像？

Above screenshot is of the generated dist/index.html file. Here, the image path is for the images generated in the dist folder which is not the correct one.

And even I try to open these generated images (present in dist folder) in VS code, I will get the error message "An error occured while loading the image". While images present in dist/img folder, shows me the correct image on selecting any one.

Could anyone please help me in understanding here, why webpack is generating two sets of images (one is correct and another one is incorrect) and why generated dist/index.html file is looking for the path of incorrect images not the correct one.

GitHub Repo : [email protected]:Guru4741/Sedna.git

Thanks