How to reflect obsfuscated classnames from css files in DOM?

I'm using webpack and trying to obsfuscate css classnames in production. I successfully obsfuscate css classname by setting modules: true, but the problem is when I build it, the obsfuscated classnames are not reflected in the html code, it remains the same as it was in development mode.

How can I reflect the obsfuscated classnames in the DOM too??

Here are my webpack configuration files

webpack.common.js

const path = require('path');

module.exports = {
  entry: {
    main: "./src/index.js",
    treemap: "./src/treemap/index.js"
  },
  devtool: "none",
  module: {
    rules: [
      {
        test: /\.html$/i,
        use: ["html-loader"]
      }
    ]
  }
};

webpack.production.js

const path = require('path');
const merge = require("webpack-merge");
const common = require("./webpack.common");
const TerserPlugin = require("terser-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = merge(common, {
  mode: "production",
  output: {
    filename: "[name].[contentHash].bundle.js",
    path: path.resolve(__dirname, "build")
  },
  plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: "[name].[contentHash].css"
    })
  ],
  optimization: {
    minimizer: [
      new OptimizeCssAssetsPlugin(),
      new TerserPlugin(),
      new HtmlWebpackPlugin({
        filename: 'index.html',
        template: './src/index.html',
        chunks: ['main'],
        hash: true,
        minify: {
          removeAttributeQuotes: true,
          collapseWhitespace: true,
          removeComments: true
        }
      }),
      new HtmlWebpackPlugin({
        filename: 'treemap.html',
        template: './src/treemap/index.html',
        chunks: ['treemap'],
        hash: true,
        minify: {
          removeAttributeQuotes: true,
          collapseWhitespace: true,
          removeComments: true
        }
      })
    ]
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              modules: {
                mode: "local",
                localIdentName: '[hash:base64:5]'
              }
            }
          }
        ]
      }
    ]
  }
});

Thank you!!