Webpack generating random file name for css included in JS file

Question

I am using webpack for bundling js & css files, i am including css import in my js file,

Page1.js

import ('../css/page1.css');
import ('../css/welcome.css');

window.page1_func1 = () => {
  console.log("page 1 function 1 called");
}

window.page1_func2 = () => {
  console.log("page 1 function 2 called");
}

It working, CSS gets applied to my page. But when i check source, i see it has generated extra js files with some random number and then i can see css file with that number. I am wondering how can I keep css name as it is(welcome.css & page1.css) and don't get changed to some random number.

my webpack.config.js

const path = require('path');
const webpack = require('webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
    mode : 'production',
    devtool : false,
    entry : {
        welcome : path.resolve(__dirname, './src/main/resources/static/js/welcome.js'),
        start : path.resolve(__dirname, './src/main/resources/static/js/start.js'),
        page1 : path.resolve(__dirname, './src/main/resources/static/js/page1.js'),
        page2 : path.resolve(__dirname, './src/main/resources/static/js/page2.js'),
        index : path.resolve(__dirname, './src/main/resources/static/js/index.js'),
        main : path.resolve(__dirname, './src/main/resources/static/js/main.js'),
//        page1css : path.resolve(__dirname, './src/main/resources/static/css/page1.css'),
    },
    output : {
        filename: "[name].js",
        path: path.join(__dirname, './target/classes/static/js'),
        clean: true,
        assetModuleFilename : '../img/[hash][ext][query]'
    },
    module: {
        rules: [
            {
              test: /\.s[ac]ss$/i,
              use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'sass-loader'
              ]
            },
            {
                test: /\.css$/i,
                use: [
                  MiniCssExtractPlugin.loader,
                  'css-loader'
                ]
            },
            {
                 test: /\.(jpg|jpeg|png|svg)$/,
                 type: 'asset/resource'
            }
        ]
    },
    optimization: {
       minimize: true,
       minimizer: [
         // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
          `...`,
         new CssMinimizerPlugin({
               test: /\.css$/i,
               minimizerOptions: {
                 preset: [
                   "default",
                   {
                     discardComments: { removeAll: true },
                   },
                 ],
               }  ,
         }),
       ],
    },

    plugins: [
        new MiniCssExtractPlugin({
            filename: "../css/[name].[contenthash].css",
            chunkFilename: "../css/[id].[contenthash].css",
        }),
//        new BundleAnalyzerPlugin()
    ],
}