fix the webpack and use just the rules without the plugins as possible:


const path = require('path');
const fs = require('fs');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
// const icons = require('./src/icons');

const DOMAIN = 'genie.li';
const LOCALE_DEFAULT = 'he';
const LOCALES_RTL = ['he', 'ar'];

const localeFiles = fs.readdirSync(path.resolve(__dirname, 'locales')).filter(f => f.endsWith('.json'));
const locales = localeFiles.map(f => path.basename(f, '.json'));
const localeLinks = `<link rel="alternate" hreflang="x-default" href="https://${DOMAIN}/${LOCALE_DEFAULT}/"/>` + 
    locales.map(locale => `<link rel="alternate" hreflang="${locale}" href="https://${DOMAIN}/${locale}/"/>`).join('\n');
const localeOptions = locales.map(locale => `<li data-value="${locale}">${locale}</li>`).join('\n');

module.exports = {
    entry: "./src/index.js",
    output: {
        filename: '[name].[contenthash].js',
        path: path.resolve(__dirname, 'out'),
        clean: true,
    },
    module: {
        rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: 'babel-loader'
        },
        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        },
        {
            test: /\.(png|jpe?g|svg|gif|webp|woff2?|ttf|eot|ico)$/,
            include: path.resolve(__dirname, 'res'),
            exclude: /\.DS_Store$/,
            type: 'asset/resource',
            generator: {
                filename: '[name].[contenthash][ext]'
            }
        }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        // new MiniCssExtractPlugin({
        //     filename: '[name].[contenthash].css'
        // }),
        // new CopyWebpackPlugin({
        //     patterns: [{
        //         from: 'res',
        //         to: '[name].[contenthash][ext]',
        //         noErrorOnMissing: true,
        //     }]
        // }),
        // new WebpackManifestPlugin({
        //     fileName: 'asset-manifest.json',
        // }),
        ...localeFiles.map((file,i) => {
            const locale = locales[i];
            const translations = JSON.parse(fs.readFileSync(path.resolve(__dirname, 'locales', file), 'utf8'));
            return new HtmlWebpackPlugin({
                filename: locale === LOCALE_DEFAULT ? 'index.html' : `index.${locale}.html`,
                template: './src/index.html',
                chunks: ['main', 'styles'],
                inject: 'body',
                minify: {
                    collapseWhitespace: true,
                    removeComments: true,
                    removeAttributeQuotes: true,
                    minifyJS: true,
                    minifyCSS: true,
                },
                templateParameters: {
                    LANG: locale,
                    DIR: LOCALES_RTL.includes(locale) ? 'rtl' : 'ltr',
                    URL_LINKS: localeLinks,
                    LANG_OPTIONS: localeOptions,
                    // assetManifest: require('./asset-manifest.json'),
                    ...translations
                }
            });
        })
    ],
    optimization: {
        minimize: true,
        minimizer: [
            '...',
            new CssMinimizerPlugin(),
        ],
    }
};