Problem to render [git-revision-hash] inside css

[cojaco]

Hi,

I have the problem that resources that are loaded from the (s)css are not rendered with the [git-revision-hash]. However, only when I am in normal webpack build mode. When I start webpack --watch everything works.

so webpack (build) => url(/assets/fonts/myFont-Regular.[git-revision-hash].woff2) format("woff2"), and webpack --watch => url(/assets/fonts/myFont-Regular.946a26b9.woff2) format("woff2"),

I am attaching the webpack.config. Maybe someone can help me further.

'use strict';
const path = require('path');
const webpack = require('webpack');
const packageJSON = require('./package.json');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const FantasticonPlugin = require('fantasticon-webpack-plugin');

const {GitRevisionPlugin} = require('git-revision-webpack-plugin');

module.exports = {
    target: 'web',
    mode: process.env.APP_ENV === 'production' ? 'production' : 'development',
    devtool: process.env.APP_ENV === 'production' ? false : 'inline-source-map',
    entry: {
        main: [
            path.resolve(__dirname, './src/assets/scripts/main.js'),
            path.resolve(__dirname, './src/assets/styles/main.scss'),
        ],

        // workaround to copy fonts into dist folder - do not remove until we find a proper way!
        // ignore fonts.css in dist folder!
        fonts: path.resolve(__dirname, './src/assets/styles/fonts.scss')
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: packageJSON.project.publicPath + '/',
        filename: 'js/[name].[git-revision-hash].js',
        clean: true,
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                    },
                },
            },

            {
                test: /\.s[ac]ss$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                // https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env
                                // the stage option determines which CSS features to polyfill
                                // disable every polyfill: false
                                // stable: 4

                                plugins: [['postcss-preset-env', {stage: 4}]],
                            },
                        },
                    },
                    'sass-loader',
                ],
            },

            // svg: created as data url
            /*{
                test: /\.svg$/i,
                type: 'asset/inline'
            },*/
            {
                test: /\.(png|jpg|gif)$/,
                type: 'asset/resource',
                generator: {
                    filename: 'images/[name].[git-revision-hash][ext]',
                },
            },

            {
                test: /\.svg$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'vectors/[name][ext]',
                },
                // https://webpack.js.org/plugins/image-minimizer-webpack-plugin/#standalone-loader
            },
            {
                test: /\.(woff|woff2)$/,
                type: 'asset/resource',
                generator: {
                    filename: 'fonts/[name].[git-revision-hash][ext]',
                },
            },
        ],
    },
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './src'),
            toolbox: path.resolve(__dirname, './src/assets/scripts/utilities/toolbox'),
        },
        extensions: [
            '.sass',
            '.scss',
            '.css',
            '.wasm',
            '.web.js',
            '.mjs',
            '.js',
            '.json',
            '.web.jsx',
            '.svg',
            '.png',
            '.jpg',
            '.webp',
            '.jpeg',
            '.jsx',
            '.woff',
            '.woff2',
        ],
    },
    plugins: [
        new GitRevisionPlugin({
            commithashCommand: 'rev-parse --short HEAD',
        }),
        new CopyPlugin({
            patterns: [
                {
                    from: '**/*.svg',
                    to: '../src/patterns/fundamentals/vectors/v-[name].hbs',
                    context: 'src/assets/vectors',
                },
                {
                    from: '**/*.hbs',
                    to: 'patterns/',
                    context: 'src/patterns',
                },

                {
                    from: '**/*.*',
                    to: 'images/',
                    context: 'src/assets/images',
                },
            ],
        }),
        new FantasticonPlugin({
            runOnComplete: false, //optional
            //onComplete: (fontConfig) => {}, //optional
            //configPath: 'myconfig.js', //optional
            //config: { ... } //optional
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name].[git-revision-hash].css',
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            toolbox: 'toolbox',
        }),
    ],
    optimization: {
        minimizer: [
            '...', // keep the existing minimizer of webpack, which is terser (minimizes js files)
            new CssMinimizerPlugin({
                // css optimization only in production mode
                // https://webpack.js.org/plugins/css-minimizer-webpack-plugin/#remove-all-comments
                minimizerOptions: {
                    preset: [
                        'default',
                        {
                            discardComments: {removeAll: true},
                        },
                    ],
                },
            }),

            new ImageMinimizerPlugin({
                minimizer: {
                    implementation: ImageMinimizerPlugin.svgoMinify,
                    options: {
                        encodeOptions: {
                            // Pass over SVGs multiple times to ensure all optimizations are applied. False by default
                            multipass: true,
                            plugins: [
                                // set of built-in plugins enabled by default
                                // see: https://github.com/svg/svgo#default-preset
                                {
                                    name: 'preset-default',

                                    params: {
                                        overrides: {
                                            // customize default plugin options
                                            inlineStyles: {
                                                onlyMatchedOnce: false,
                                            },

                                            // or disable plugins
                                            removeDoctype: false,
                                            cleanupIDs: false,
                                        },
                                    },
                                },
                                {
                                    name: 'prefixIds',
                                },
                            ],
                        },
                    },
                },
            }),
        ],
    },
};