Why does FaviconsBundlerPlugin not follow provided faviconOptions.path for saving *.xml , *.webmanifest and *.json files

[sam1git]

Given below is my webpack config file. FaviconsBundlerPlugin stores all images in provided faviconOptions.path but saves browserconfig.xml , manifest.webmanifest and yandex-browser-manifest.json under default webpack output.path directory.
The html output file refers to generated *.xml , *.webmanifest and *.json files as if they were present inside faviconOptions.path directory - which they are not.
How to get to save these files inside provided faviconOptions.path ?

Sidenote - if you can share how would I go about troubleshooting such issues on my own that would be great. I looked inside node_modules/html-bundler-webpack-plugin/plugins/favicons-bundler-plugin/index.js but can't pinpoint the code causing this to happen. I have read webpack documentation but could only make sense of some of it. Now I am reading readme for html-bundler-webpack-plugin to better understand webpack. webpack troubleshooting is hard - seems like a black box. If someone can suggest resources or books that beginner can read - that would be great.

const path = require('path');
const HtmlBundlerWebpackPlugin = require('html-bundler-webpack-plugin');
const { FaviconsBundlerPlugin } = require('html-bundler-webpack-plugin/plugins');

module.exports = {
    mode: "production",
    output: {
        path: path.resolve(__dirname, 'build'),
        publicPath: '/',
        assetModuleFilename: "static/[name]-[contenthash][ext]",
        clean: true,
    },
    plugins: [
        new HtmlBundlerWebpackPlugin({
            entry: './src/templates/',
            outputPath: path.join(__dirname, 'build/html/'),
            /*
            minify: {
                collapseWhitespace: true,
                keepClosingSlash: true,
                removeComments: true,
                removeRedundantAttributes: false, // prevents styling bug when input "type=text" is removed
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true,
                minifyCSS: true,
                minifyJS: true,
            },*/              
            js: {
                filename: 'static/[name]-[contenthash].js',
            },
            css: {
                filename: 'static/[name]-[contenthash].css',
            },
            beforeEmit: (content, {assetFile}, compilation) => {
                const { RawSource } = compilation.compiler.webpack.sources;
                for (let filename in compilation.assets) {
                    if (!/\.(css)$/.test(filename)) continue;

                    let assetContent = compilation.assets[filename].source();
                    assetContent = assetContent.replaceAll('/static/', '/');
                    compilation.updateAsset(filename, new RawSource(assetContent));
                }
                return content.replaceAll('="/static/', '="/');
            }
        }),
        new FaviconsBundlerPlugin({
            enabled: 'auto', // true, false, auto - generate favicons in production mode only
            // favicons configuration options, see https://github.com/itgalaxy/favicons#usage
            faviconOptions: {
                path: '/static/favicons', // favicons output path relative to webpack output.path
                icons: {
                android: true, // Create Android homescreen icon.
                appleIcon: true, // Create Apple touch icons.
                appleStartup: false, // Create Apple startup images.
                favicons: true, // Create regular favicons.
                windows: true, // Create Windows 8 tile icons.
                yandex: true, // Create Yandex browser icon.
                },
            },
        }),      
    ],
    module: {
        rules: [
            {
                test: /\.js$/i,
                exclude: [/node_modules/],
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                    },
                },
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                type: "asset/resource",     
            },
            {
                test: /\.css$/i,
                use: [
                    'css-loader'
                ],
            }
        ],
    },
};

[webdiscus]

The plugin uses the Favicons generator for Node.js. The faviconsConfig are options of the Favicons.
It seems, the Favicons has't an option to define the path to web minifest files.

[sam1git]

I see, its hard to dig through other plugins source code so I tried writing my own small easy plugin for overwriting the files with correct path. I am going to leave it here, just in case someone else experiences same issue.

Resource used: https://webpack.js.org/contribute/writing-a-plugin/

Plugin to adjust paths of manifest files:

const path = require('path');
const { FaviconsBundlerPlugin } = require('html-bundler-webpack-plugin/plugins');

class AdjustFaviconManifestPathsPlugin {
    constructor(options = {}) {
        this.extensionsToAdjustOutputPath = options.extensionsToAdjustOutputPath || [];
    }

    apply(compiler) {
        compiler.hooks.emit.tapAsync('AdjustFaviconManifestPathsPlugin', (compilation, callback) => {
            const faviconsBundlerPlugin = compilation.options.plugins.find(
                (plugin) => plugin instanceof FaviconsBundlerPlugin
            );

            if (faviconsBundlerPlugin && faviconsBundlerPlugin.faviconResponse) {
                // Get the outputPathPrefix from FaviconsBundlerPlugin configuration or use default
                const outputPathPrefix = faviconsBundlerPlugin.options.faviconOptions?.path || '/defaultDirFaviconManifests';

                faviconsBundlerPlugin.faviconResponse.files.forEach(({ name, contents }) => {
                    const fileExtension = path.extname(name).toLowerCase();

                    if (this.extensionsToAdjustOutputPath.includes(fileExtension)) {
                        const outputPath = path.join(outputPathPrefix, name);
                        compilation.assets[outputPath] = {
                            source: () => contents,
                            size: () => contents.length,
                        };

                        delete compilation.assets[name];
                    }
                });
            }

            // Invoke the callback to signal that the plugin has completed its work
            callback();
        });
    }
}

module.exports = AdjustFaviconManifestPathsPlugin;

You can use it like this in webpack config file:

//import the plugin from you .js file
const AdjustFaviconManifestPathsPlugin = require('./adjust-favicon-manifest-paths-plugin.js')

// throw in the plugin after FaviconsBundlerPlugin()
  new AdjustFaviconManifestPathsPlugin({
      extensionsToAdjustOutputPath: ['.json', '.webmanifest', '.xml']
  }),     

[webdiscus]

thanks for the elegant solution, I will integrate your code in the FaviconsBundlerPlugin later.

[webdiscus]

@sam1git
I have fixed the issuer in the version 3.4.10.
Now all *.xml , *.webmanifest and *.json files generated by Favicons are saved in the directory defined in the faviconOptions.path option.
Try it w/o the AdjustFaviconManifestPathsPlugin.

[sam1git]

awesome it works without the AdjustFaviconManifestPathsPlugin