Files missing in Output

[simann]

Greetings Everyone!

I'm trying to integrate this Plugin into one of my current projects. unfrtunately its not working as expected and >90% of my files are not getting reported/tracked.

Everything that my project needs is located in the src folder and weback builds into my public folder. For several reasons i have different Plugins in my configuration maybe they interfere each other. The output directory is set in my webpack configuration

Expected Behaviour

After the build is finished, a stats.json should be generated with all the informations about my files in the output directory

Actual Behaviour

A stats file is generated with almost none files

[
	{
		"timestamp": 1636799658202,
		"files": [
			{
				"filename": "css/dark.css",
				"previous": 0,
				"size": 122,
				"diff": 122
			},
			{
				"filename": "css/light.css",
				"previous": 0,
				"size": 111,
				"diff": 111
			},
			{
				"filename": "index.html",
				"previous": 0,
				"size": 320,
				"diff": 320
			}
		]
	}
]

Webpack configuration

const path = require("path");
const zlib = require("zlib");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const SizePlugin = require('size-plugin');

module.exports = {
    entry: "./src/react/index.ts",
    resolve: {
        extensions: [".ts", ".tsx", ".js", "css"],
    },
    devServer: {
        static: {
            directory: path.join(__dirname, "public"),
        },
    },
    experiments: {
        asset: true,
    },
    output: {
        path: path.join(__dirname, "/public"),
        filename: "./js/[name].bundle.js",
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: "ts-loader",
            },
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            esModule: false,
                        },
                    },
                    "css-loader",
                ],
                exclude: [
                    path.resolve("src/css/dark.css"),
                    path.resolve("src/css/light.css"),
                ],
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: "asset/resource",
                generator: {
                    filename: "img/[hash][ext][query]",
                },
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: "asset/resource",
                generator: {
                    filename: "css/[hash][ext][query]",
                },
            },
        ],
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                defaultVendors: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendors",
                    chunks: "all",
                },
            },
        },
        minimize: true,
        minimizer: [
            new TerserPlugin(),
            new CssMinimizerPlugin(),
        ],
    },
    plugins: [
        new CopyPlugin({
            patterns: [
                {
                    context: "./src",
                    from: "css/dark.css",
                    to: "./css/dark.css",
                },
                {
                    context: "./src",
                    from: "css/light.css",
                    to: "./css/light.css",
                },
                {
                    context: "./src",
                    from: "img/**/*",
                    to: "./",
                },
                {
                    context: "./src",
                    from: "locales/**/*",
                    to: "./",
                },
            ],
        }),
        new MiniCssExtractPlugin({
            filename: "./css/[name].css",
            chunkFilename: "./css/[name].bundle.css",
        }),
        new HtmlWebpackPlugin({
            template: "./src/html/index.html",
            favicon: "./src/html/favicon.ico",
        }),
        new CompressionPlugin({
            filename: "[path][base].br",
            algorithm: "brotliCompress",
            test: /\.js$|\.css$|\.html$|\.jpg$|\.svg$|\.eot$|\.ttf$|\.woff$|\.woff2$/,
            compressionOptions: {
                params: {
                    [zlib.constants.BROTLI_PARAM_QUALITY]: 11,
                },
            },
            minRatio: Number.MAX_SAFE_INTEGER,
        }),
        new CompressionPlugin({
            filename: "[path][base].gz",
            algorithm: "gzip",
            test: /\.js$|\.css$|\.html$|\.jpg$|\.svg$|\.eot$|\.ttf$|\.woff$|\.woff2$/,
            minRatio: Number.MAX_SAFE_INTEGER,
        }),
        new SizePlugin(),
    ],
};

Final remarks

• Besides that i have to admit that im not an webpack magician and this behaviour may be expected, i missed some configuration to the plugin or the order of the plugins is wrong.
• Im using v2.0.2 because the newest is not working with the new version of webpack Webpack5 Error: Content and Map of this Source is not available (only size() is supported)  #40
• i tried several variants of the pattern value but they didnt affect the outcome

Testcase

Its always hard to imagine what another person is doing and because of this i have created a minimal example that shows what im doing and what is happening

Repository

I would greatly appreciate any hints to solve this :)

[simann]

I figured out what went wrong.

I had to change the pattern option:

new SizePlugin({
    pattern: '**/*.*',
 }),

Now every file gets tracked