[WebPack Plugin] Contenthash with MiniCssExtractPlugin does not change even if content has changed

[arneee]

Issue copied from the old repo since it still happens on the latest version of the Webpack plugin.

I'm using the contenthash in the filenames to allow long term caching:
https://webpack.js.org/guides/caching/

Unfortunately if the content is changed by the PurgeCss plugin only, for example since I have removed a usage of an class or (much worse) I'm using a class which hasn't been used before, the contenthash does not change. This leads to old files being served to the users and therefore a breaking app.

The content hash changes as soon as I do an actual modification of the CSS files. My guess would be that the contenthash is calculated to early?

webpack config:

const path = require('path');
const glob = require('glob-all')
const ManifestPlugin = require('webpack-manifest-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin'); //installed via npm
const PurgecssPlugin = require('purgecss-webpack-plugin');
const webpack = require('webpack');

// the path(s) that should be cleaned
let pathsToClean = [
    'dist'
];

// the clean options to use
let cleanOptions = {
    root:     '..................../public',
    verbose:  true,
    dry:      false
};

function collectWhitelistPatterns() {
    return [/^pcr-/];
}

module.exports = {

    plugins: [
        new CleanWebpackPlugin(pathsToClean, cleanOptions),
        new ManifestPlugin(),
        new PurgecssPlugin({
            paths: glob.sync(['./src-js/**/*', './templates/**/*'],  { nodir: true }),
            whitelistPatterns: collectWhitelistPatterns,
        }),
        new MiniCssExtractPlugin({
            filename: "[name]-[contenthash].css",
            chunkFilename: "[id]-[contenthash].css"
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        })
    ],

    entry: {
        one: './src-js/index-one.js',
        two: './src-js/index-two.js',
        three: './src-js/index-three.js',
    },

    output: {
        path: path.resolve(__dirname, 'public/dist'),
        filename: dev?'[name]-min.js':'[name]-[contenthash]-min.js',
        publicPath: "/dist/"
    },

    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        "presets": [
                            [
                                "@babel/preset-env",
                                {
                                    "useBuiltIns": "entry",
                                    "targets": "> 0.25%, not dead",
                                }
                            ]
                        ],
                        "plugins": ["transform-remove-console"]
                    }
                }
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader',
                ],
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    },
    externals: {
        jquery: 'jQuery'
    },
};

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days.