publicPath ignored for FaviconsBundlerPlugin

[laureProthais]

Hi everyone,

For my project, all the assets are deployed to a CDN, so I'm using the following configuration:

module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: "ts-loader",
          exclude: /node_modules/,
        },
        {
          test: /\.s?css$/,
          use: ["css-loader", "postcss-loader", "sass-loader"],
        },
        {
          test: /\.(woff|woff2)$/,
          type: "asset/resource",
          generator: {
            filename: "fonts/[name].[contenthash][ext]",
          },
        },
        {
          test: /\.(png|jpe?g|gif|svg)$/,
          type: "asset/resource",
          generator: {
            filename: "images/[name].[contenthash][ext]",
          },
        },
      ],
    },
    resolve: {
      extensions: [".tsx", ".ts", ".js"],
    },
    output: {
      path: path.resolve(__dirname, `public`),
      publicPath:
        argv.mode === "production" && process.env.CDN_PUBLIC_PATH
          ? process.env.CDN_PUBLIC_PATH
          : "",
      clean: true,
    },

No issues with the paths between a dev and production build; everything works perfectly.

I added the FaviconsBundlerPlugin plugin, naively thinking that when a production build comes out, the favicons resources would have the CDN outpath, but no, I missed something, or it's not currently possible. In the documentation or the FaviconsOptions typing, I don't see the option to add a publicPath.

Here my configuration :

   new HtmlBundlerPlugin({
        minify: true,
        minifyOptions: {
          collapseWhitespace: true,
          keepClosingSlash: true,
          removeComments: true,
          removeRedundantAttributes: false,
          removeScriptTypeAttributes: true,
          removeStyleLinkTypeAttributes: true,
          useShortDoctype: true,
          minifyCSS: true,
          minifyJS: true,
        },
        entry: {
          index: path.resolve(
            __dirname,
            `./apps/templates/index.html`,
          ),
        },
        js: {
          filename: "js/[name].[contenthash:8].js",
        },
        css: {
          filename: "css/[name].[contenthash:8].css",
        },
      }),
      new FaviconsBundlerPlugin({
        enabled: true,
        faviconOptions: {
          path: "./images/favicons",
          icons: {
            android: true,
            appleIcon: true,
            yandex: false,
            windows: false,
          },
        },
      }),

and a extract of html file :

<link rel="icon" href="../../../src-front/images/favicon.svg" />
<link href="../src-front/scss/app.scss" rel="stylesheet" />

become with production build :

<link rel="icon" type="image/x-icon" href="/images/favicons/favicon.ico">
<link href="https://cdn.xxx/css/app.bff83724.css" rel="stylesheet"/>

Thanks for your help :)

[webdiscus]

Hello @laureProthais,

thanks for the question.
This is a bug. I created the issue #156.