Webpack mini-css-extract-plugin using query string in file name for cache busting not working

Question

I am using WebPack in .Net Mvc project (with .cshtml views) and I want to output all files with query string content hash numbers. I am using Mini Css Extract Plugin. So far i couldn't get the desired result.

For filename here is my configuration.

new MiniCssExtractPlugin({
   filename: "[name].css?v=[contenthash]",
})

Desired result must be this for example; layout.css?v=5ac967f1b94131934254

But instead it outputs this layout.css

Here is my entire webpack config;

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        articlePage: path.resolve(__dirname, 'Content/webpack/articlePage/index.js'),
        boardPage: path.resolve(__dirname, 'Content/webpack/boardPage/index.js'),
        homePage: path.resolve(__dirname, 'Content/webpack/homePage/index.js'),
        layout: path.resolve(__dirname, 'Content/webpack/layout/index.js')
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    },
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: 4,
                uglifyOptions: {
                    comments: false,
                },
            }),
            new OptimizeCSSAssetsPlugin({})
        ],
        splitChunks: {
            chunks: 'all',
        }
    },
    plugins: [
        new CleanWebpackPlugin(['dist', 'static']),
        new MiniCssExtractPlugin({
            filename: "[name].[contenthash].css?v=[contenthash]",
        })
    ]
};

Answer 1

1) layout.css?v=5ac967f1b94131934254 - are you sure that you want to use it as a filename? normally hash is added into the filenamen not extension and not imitating URL.

2) With you do not need to use [contenthash]

Use versioning mvc way:

E.g. for Mvc Core:

<link rel="stylesheet" href="~/dist/main.css" asp-append-version="true" />

Here important is: asp-append-version="true"