Почему картинки переносятся без file-loader-а, а с ним вообще не работают?

Question

Артём @danyvasnafig

Webpack

Почему картинки переносятся без file-loader-а, а с ним вообще не работают?

Снизу мой конфиг файл. Если запустить при таком файле yarn dev, то в dist помещаются все файлы как надо, но картинки кидаются в корень и название хэшируется ( стили, js и т.д. при этом раскидываются по папкам, как должны). Если добавить file loader, то тоже создается своя папка img, в которую падает картинка, но при этом в корне все равно создается хэшированная картинка, при этом в index.html в diste-e тег почему-то подключается именно эта кривая картинка, а не нормальная, из папки img. Подскажите, в чем может быть дело?

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'],
      },
 

    ],
  }
}