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

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_*.

[rbelling]

works like a charm @jantimon 🥳 🎈

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

[jantimon]

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