how to add hashed names icons and pictures from res folder into the build with webpack? I cant use index.js because its mot recognize the css file and its imported there.






index.html:



<!DOCTYPE html>
<html lang="<%= LANG %>" dir="<%= DIR %>" translate="no">
<head>
    <meta http-equiv="Cache-Control" content="max-age=0, must-revalidate"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Expires" content="0" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" sizes="32x32" href="<%= favicon32 %>">
    <link rel="icon" sizes="16x16" href="<%= favicon16 %>">
    <link rel="apple-touch-icon" sizes="180x180" href="<%= apple180 %>">
    <link rel="icon" sizes="192x192" href="<%= android192 %>">
    <link rel="icon" sizes="512x512" href="<%= android512 %>">
    <link rel="shortcut icon" href="<%= ico %>">
    <title>Genieli</title>
    <%= URL_LINKS %>
</head>
<body>
    <div id="loader">
        <div class="spinner"></div>
    </div>
    <div id="stage">
        <div class="container header">
            <div class="row">
                <span class="langSwitch">
                    <span class="icon button" id="langIcon">&#xe800;</span>
                    <div class="menu" id="langMenu">
                        <ul id="myList"><%= LANG_OPTIONS %></ul>
                    </div>
                </span>
                <span class="icon button" id="themeIcon">&#xf186;</span>
            </div>
        </div>
        <div class="container center">
            <h1>Genieli</h1>
            <h1><%= test %></h1>
        </div>
        <div class="container footer">
            <span>Copyright 2025</span>
            &nbsp;
            <a href="https://genie.li">genie.li</a>
        </div>
</div>
</body>
</html>






webpack:


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 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'
        }),
        ...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',
                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,
                    ...translations
                }
            });
        })
    ],
    optimization: {
        minimize: true,
        minimizer: [
            '...',
            new CssMinimizerPlugin(),
        ],
    }
};