How to edit webpack config for layout?

Question

webpack

Here's exactly what I've done so far

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

const cssRegx = /\.css$/
const imgRegx = /\.(png|jpe?g|gif)$/i
const htmlRegx = /\.(html)$/

module.exports = {
  context: path.resolve(__dirname, 'src'),
  mode: 'development',
  entry: {
    main: './home/main.js',
    sakura: './home/sakura.js'
  },
  output: {
    filename: 'js/[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    }),
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash].css',
      chunkFilename: 'css/[name].[contenthash].chunk.css'
    })
  ],
  module: {
    rules: [
      {
        test: cssRegx,
        use: [
          'style-loader',
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: './dist',
              minimize: true
            }
          },
          'css-loader'
        ]
      },
      {
        test: imgRegx,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'img',
            }
          },
        ],
      }
    ]
  }
}

There are two problems:
1) When I build main.js, which has image imports, in html (which is also built), the same relative paths remain in the tag as they were
2) Navigation contains links to other html files that are in other folders. How can they also be built together and also change links in html to those that have been built? Do it manually - trash

dist
--css
--img
--js
src
--components
----biography
----contacts
----library
--home
--images
--index.html
--main.js