Bug when reading from memory in Webpack 5?

Question

JavaScript

Good afternoon!

Building a new project using Webpack 5 .

In development mode I use devServer . By default it reads files from memory. When you start the server, everything is OK, but when you reload the page, the images stop pulling up, as if they are being deleted from memory.

When you start devServer with the writeToDisk: true, parameter , everything works fine even when you refresh the page, but without this option, the pictures in the html fall off. Images are added to html. html is rendered with HtmlWebpackPlugin. Images added in css do not fly off..

Here is the webpack config that I use:

const path = require('path');
const fs = require('fs');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const PROJECT = require('./project.config.json');
const webpack = require('webpack');
const ASSET_PATH = process.env.ASSET_PATH || '/';


function generateHtmlPlugins(templateDir) {
    const templateFiles = fs.readdirSync(path.resolve(__dirname, templateDir));
    const result = templateFiles.filter(el => !PROJECT.excludeList.includes(el));

    return result.map(item => {
      const parts = item.split('.');
      const name = parts[0];
      return new HtmlWebpackPlugin({
        filename: `${name}.html`,
        template: path.resolve(__dirname, `${templateDir}/${name}.html`),
        inject: 'body',
        scriptLoading: 'defer',
      })
    })
}

const htmlPlugins = generateHtmlPlugins('src')

module.exports = {
    target: 'web',
    mode: 'development',
    entry: path.resolve(__dirname, 'src/js/main.js'),
    output: {        
        publicPath: ASSET_PATH,
        clean: true,
        filename: 'js/[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        assetModuleFilename: 'img/[name][ext]'       
    },
    devtool: 'source-map',
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        compress: true,
        watchContentBase: true,
        hot: true,
        open: true,
        historyApiFallback: true,
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        }),
        new webpack.HotModuleReplacementPlugin(),
    ].concat(htmlPlugins),
    module: {
        rules: [
        {
            test: /\.(sa|sc|c)ss$/,
            use: [
                MiniCssExtractPlugin.loader,
                {
                    loader: "css-loader",
                    options: {
                        sourceMap: true,
                    },
                },
                {
                    loader: "sass-loader",
                    options: {
                        sourceMap: true,
                    },
                },
            ],
        },
        {
            test: /\.(png|svg|jpg|jpeg|gif)$/i,
            type: 'asset/resource',
        },
        {
            test: /\.m?js$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader",
              options: {
                presets: ['@babel/preset-env']
              }
            }
          }
        ],
    },
};

What can be the jamb?