Webpack 5 - img src in html issues?

Question

css

I'm trying to build a project on webpack 5.
Here are the settings:

const path = require('path');

const HTMLWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const isDev = process.env.NODE_ENV === 'development';

const optimization = () => {
  const config = {
    splitChunks: {
      chunks: 'all',
    },
  };

  if (!isDev) {
    config.minimizer = [new TerserPlugin(), new CssMinimizerPlugin()];
  }

  return config;
};

const cssLoaders = (extra) => {
  const loaders = [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {},
    },
    'css-loader',
  ];

  if (extra) {
    loaders.push(extra);
  }

  return loaders;
};

const plugins = () => {
  const base = [
    new HTMLWebpackPlugin({
      template: './index.html',
    }),

    new CleanWebpackPlugin(),

    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'src/favicon.ico'),
          to: path.resolve(__dirname, 'dist'),
        },
      ],
    }),

    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
    }),
  ];

  if (!isDev) {
    base.push(new BundleAnalyzerPlugin());
  }

  return base;
};

module.exports = {
  context: path.resolve(__dirname, 'src'),

  mode: 'development',

  entry: {
    main: ['@babel/polyfill', './index.js'],
    // other: '',
  },

  optimization: optimization(),

  devServer: {
    port: 3200,
    hot: isDev,
  },

  devtool: isDev ? 'source-map' : false,

  resolve: {
    extensions: ['.js'],
  },

  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    assetModuleFilename: 'assets/[hash][ext]',
  },

  plugins: plugins(),

  module: {
    rules: [
      {
        test: /\.css$/i,
        use: cssLoaders(),
      },

      {
        test: /\.s[ac]ss$/i,
        use: cssLoaders('sass-loader'),
      },

      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset/resource',
      },

      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },

      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
};

Project structure:
dist
src
assets/logo.svg
styles/styles.scss
index.html

When working with images in css, everything compiles well, properties like backgorund: url(link to the image works)

But when I want to use the image in the tag in html

error Failed
to load resource: the server responded with a status of 404 (Not Found) (in the browser )

rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
      },

I get an error

ERROR in Error: Child compilation failed:
Module Error (from ../node_modules/html-loader/dist/cjs.js):
HtmlSourceError: Bad value for attribute "src" on element "img": Must be non-empty (From line 27, column 14; to line 27, column 20)

I don't understand what to do.. I also installed svgo-loader

Answer 1

Bad value for attribute "src" on element "img": Must be non-empty