MiniCssExtractPlugin not working with hash as parameter

Question

I am using MiniCssExtractPlugin as CSS minifier.

The CSS file is used on the external project, and in that reason, I need to use the hash as a parameter.

I hash is part of file name then everything working fine. example

plugins.push(
    new MiniCssExtractPlugin({
      filename: '[name].[hash:4].css',
    })
  );

but if the hash is passed as a parameter

plugins.push(
    new MiniCssExtractPlugin({
      filename: '[name].css?[hash:4]',
    })
  );

The file would be generated but not minified.

 rules.push(
    {
      test: /\.css$/,
      exclude: paths.navigation,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader',
        'postcss-loader',
      ],
    }
  );

Answer 1

MiniCssExtractPlugin is not minify your css so that is normal if you want to minify your css use mini-css-extract-plugin

Run this command to install

npm install --save-dev mini-css-extract-plugin

Then in your webpack

const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");


optimization: {
    minimizer: [
        new OptimizeCSSAssetsPlugin({
            cssProcessorOptions: {
                safe: true,
                discardComments: {
                    removeAll: true,
                },
            },
        })
    ]
},