[5.0.0-alpha.11] building more than one set of favicons (webpack 5)

[rbelling]

Hello, I'm having issue generating more than one set of favicons.

My use case is that I need to build public/en-us/favicon.svg and public/en-gb/favicon.svg. When I was using webpack 4, I used to be able to create two instances of the plugin like this:

// webpack.config.js
plugins: [
  new HtmlWebpackPlugin({
    template: "./public/index.html",
  }),
  new FaviconsWebpackPlugin({
    logo: "./public/en-us/favicon.svg",
    prefix: "assets/en-us",
    inject: false,
  }),
  new FaviconsWebpackPlugin({
    logo: "./public/en-gb/favicon.svg",
    prefix: "assets/en-gb",
    inject: false,
  }),
]

The build used to output two separate folders, dist/assets/en-us and dist/assets/en-gb as expected. After I migrated to webpack 5, it seems like the last entry in the plugin array (en-gb) is the only one that is being created.

Setup to reproduce the issue

    "devDependencies": {
        "favicons": "^6.2.0",
        "favicons-webpack-plugin": "^5.0.0-alpha.11",
        "file-loader": "^6.2.0",
        "html-webpack-plugin": "^5.0.0-beta.6",
        "imagemin-svgo": "^8.0.0",
        "imagemin-webpack": "^5.1.1",
        "url-loader": "^4.1.1",
        "webpack": "^5.18.0",
        "webpack-cli": "^3.3.12",
    },

// extract of webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const FaviconsWebpackPlugin = require("favicons-webpack-plugin");

module.exports = (env, argv) => {
    const { mode } = argv;
    const isDevelopment = mode === "development";
    const isProduction = mode === "production";

    return {
        entry: ["./src/index.js"],
        mode,
        output: {
            path: path.resolve(__dirname, "dist"),
            publicPath: "/",
            filename: isProduction ? "[name].[chunkhash].js" : "[name].js",
        },
        optimization: {
            // ...
        },
        module: {
            rules: [
                {
                    test: /\.(jpe?g|png|webp|gif|svg|ico)$/i,
                    use: [
                        {
                            loader: "file-loader",
                            options: {
                                outputPath: "assets",
                            },
                        },
                    ],
                },
            ],
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: "./public/index.html",
            }),
            new FaviconsWebpackPlugin({
                logo: "./public/en-us/favicon.svg",
                prefix: "assets/en-us",
                inject: false,
            }),
            new FaviconsWebpackPlugin({
                logo: "./public/en-gb/favicon.svg",
                prefix: "assets/en-gb",
                inject: false,
            }),
        ].filter(Boolean),
    };
};

I'm also seeing this message when running webpack, not sure if it's related or not:

(node:13384) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.

[jantimon]

Thanks for the report I will take a look

[jantimon]

😱

just found out what's happening - it is using one cache for ALL favicons-webpack-plugin instances..

I'll add a test and a fix today :)

[jantimon]

can you please try favicons-webpack-plugin@5.0.0-alpha.12 ?

[rbelling]

works like a charm @jantimon 🥳 🎈

Thank you for responding so quickly, amazing work on this project.

[jantimon]

Cool thanks for reporting and testing :)