Баг при чтении из памяти в Wеbpack 5?

Question

[mgmtx]

Добрый день!

Собираю новый проект, используя Webpack 5.

В режиме разработки использую devServer. По умолчанию он читает файлы из памяти. Когда запускаешь сервер все ок, но, при перезагрузки страницы, перестают подтягиваться изображения, будто из памяти удаляются.

Когда запускаешь devServer с параметром writeToDisk: true,, то все работает нормально даже когда обновляешь страницу, но без этой опции картинки в html отваливаются. Изображения добавляются в html. html обрабатывается с помощью HtmlWebpackPlugin. Картинки, добавленные в css, не слетают..

Вот конфиг webpack, который использую:

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

В чем косяк может быть?