Why are pictures transferred without a file-loader, but do not work with it at all?

Question

webpack

Below is my config file. If you run yarn dev with such a file, then all files are placed in dist as they should, but the pictures are thrown to the root and the name is hashed (styles, js, etc. are scattered across folders, as they should). If you add a file loader, then your own img folder is also created, into which the picture falls, but at the same time, a hashed picture is still created at the root, while for some reason this crooked picture is connected to index.html in the diste-e tag, and not normal, from the img folder. Tell me, what could be the matter?

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

const isDev = process.env.NODE_ENV === 'development'
const isProd = !isDev

const filename = (ext) => isDev ? `[name].${ext}` : `[name].[contenthash].${ext}`;
const webpack = require("webpack");

module.exports = {
  context: path.resolve(__dirname, 'src'),
  entry: './js/index.js',
  mode: 'development',
  output: {

    filename: `./js/${filename('js')}`,
    path: path.resolve(__dirname, 'dist'),
    publicPath: '',
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    compress: true,
    port: 9000,
    open: true,
    hot:true,
  },
  plugins: [
    new HTMLWebpackPlugin ({
      template: path.resolve(__dirname, 'src/index.html'),
      filename: "index.html",
      minify: {
        collapseWhitespace: isProd

      }
    }),
    new webpack.HotModuleReplacementPlugin(),
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin({
      patterns: [
        {from: path.resolve(__dirname, 'src/assets') , to: path.resolve(__dirname, 'dist')}
      ]
    }),
    new MiniCssExtractPlugin({
      filename: `./css/${filename('css')}`,
    })
  ],
  module: {
    rules: [
      {
        test: /\.html$/,
        loader: 'html-loader',
      },
      {
        test: /\.css$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // hmr: isDev
            },
          },
          'css-loader'
        ],

      },
      {
        test: /\.scss$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader",'sass-loader'],
      },
 

    ],
  }
}

Answer 1

html-loader - you need to add another option options: {
esModule: false}