Giving complex names in css with webpack. But the classes in html do not change

I want to give complex class names in css with webpack, I have already done this. My current situation is that I import my css file to a js file and perform dynamic operations using the original names. When I build, it gives complex names that I use in the css and js files as I want. I also want to change the names of the classes in the tags used in the content of the html file I want, how can I do this?

original

.main {
  width:100%;
}

import styles from "./style.css"

document.body.className = styles.main // styles["main-lg"]

compiled

.vZzj7FyRHQ9JWz9k32ms {
    width:100%;
}

(()=>{"use strict";document.body.className="vZzj7FyRHQ9JWz9k32ms"})();

Configurations I used in my webpack.config.js file

const HtmlWebpackPlugin = require("html-webpack-plugin");
// const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
//const webpack = require("webpack");

const isDevelopment = process.env.NODE_ENV === "development";


const rules = [{
        test: /.css$/,
        use: [
            { loader: isDevelopment ? "style-loader" : MiniCssExtractPlugin.loader },
            {
                loader: "css-loader",
                options: {
                    sourceMap: true,
                    importLoaders: 1,
                    modules: true,
                },
            },
            { loader: "postcss-loader" },
        ],
    },
    {
        test: /.html$/i,
        use: [{
                loader: "html-loader", // HTML dosyasını yükler
                options: {
                    sources: false,
                },
            },
        ],
    },
 
    {
        test: /.js$/,
        exclude: /node_modules/,
        //type: "javascript/esm",
        use: {
            loader: "babel-loader",
            options: {
                presets: ["@babel/preset-env"],
                plugins: ["@babel/plugin-syntax-top-level-await"],
            },
            // loader: "babel-loader",
            // options: {
            //   plugins: ["@babel/plugin-syntax-top-level-await"],
            // },
        },
    },
];

module.exports = {
 entry: {
        index: path.resolve(__dirname, "src", "index.js"),
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[contenthash].js",
    },
    module: { rules: rules },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            filename: "index.html",
            template: "./src/index.html",
            hash: true,
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true,
                removeComments: true,
            },
        }),
        new MiniCssExtractPlugin({
            filename: "[contenthash].css",
            chunkFilename: "[name].css",
        }),
    ],
    optimization: {
        minimizer: [
            new TerserPlugin(),
            // new UglifyJsPlugin({
            //     uglifyOptions: {
            //         output: {
            //             comments: false,
            //         },
            //     },
            // }),
        ],
    },
};

All I want now is to change the classes in html just like in javascript.

The names in the css file and javascript changed with css-loader, but I could not change the classes in the html file.