Not include favicons in generated HTML of particular plugin instance

[wclr]

I have multiple html plugins in config, they are actually intended for different kind of apps, so some may not need favicons at all, so is it possible to exclude particular html instance?

[brunocodutra]

Currently there isn't any builtin mechanism to tie together specific instances of webapp-webpack-plugin and html-webpack-plugin, but we could work something out if you give me more information on what exactly you're trying to achieve.

As a workaround if you are using Webpack 4 you could try placing the instances of the html plugin you want to skip after webapp-webpack-plugin in the plugins array. I haven't test that myself yet, but it should work.

[wclr]

As a workaround if you are using Webpack 4 you could try placing the instances of the html plugin you want to skip after webapp-webpack-plugin in the plugins array.

Well I'm using webpack 3 and this method doesn't work.

but we could work something out if you give me more information on what exactly you're trying to achieve.

As I've said, I want HTML generated by particular plugin be free from favicons. I'm not sure if for example more complex case is relevant in reallife as using different webapp-webpack-plugin configs for different HTML generated. But what I need could be achieved by handling additional html plugin param which it allows to provide, for example favicons: false

plugins: [
    new HtmlWebpackPlugin({
      title: 'My App',
      filename: 'index.html'
    }),
    new HtmlWebpackPlugin({
      title: 'App Without FavIcons',
      filename: 'index-without-favicons.html',
      favicons: false // this would mean that it is not need to embed favicons links
    })
  ]

[brunocodutra]

But what I need could be achieved by handling additional html plugin param which it allows to provide, for example favicons: false

Sounds good, I'll ship that in the next version.

[brunocodutra]

@whitecolor as soon as automated tests pass for PR #85 I'll merge it and release v2.1.0 with this feature.

Should take at most a couple of hours from now.

[brunocodutra]

Please let me know if you have any issues using the feature.

[wclr]

Works as expected)

[lukecanvin]

I'm doing something similar to @whitecolor but all my instances of html-webpack-plugin use templates and so all of them have to have inject: false.

Currently this means I have to either choose between setting webapp-webpack-plugin to inject: 'force', in which case I get the favicons duplicated in each template, or I don't get any favicons at all. Neither is my ideal ;)

Would it be possible to have it so that force doesn't override favicons: false? Or add some new option to handle this use case?

Many thanks!

[brunocodutra]

Thanks for sharing @lukecanvin, we need to prioritize this.

Just a heads up, you can probably workaround in the mean time by tweaking the order of plugins: first the HtmlWebpackPlugin in which you want Favicons, then WebappWebpackPlugin, then the remaining instances of HtmlWebpackPlugin, as those are not visible to WebappWebpackPlugin, does that make sense?

[lukecanvin]

Thanks for your quick reply @brunocodutra!

I saw you suggested such a workaround above and I did try it out but unfortunately it definitely still includes the fav icons in both templates.

[brunocodutra]

That's interesting, could you share the versions of Webpack and the plugins you are using?

[lukecanvin]

I've got the following versions of webpack and webpack plugins installed:
"webpack": "^4.19.1",
"webapp-webpack-plugin": "^2.4.0",
"terser-webpack-plugin": "^1.1.0",
"webpack-bundle-analyzer": "^3.0.2",
"webpack-cli": "^3.2.1",
"webpack-dashboard": "^2.0.0",
"webpack-dev-server": "^3.1.9",
"webpack-manifest-plugin": "^2.0.4",
"webpack-merge": "^4.1.4",
"webpack-notifier": "^1.6.0",
"workbox-webpack-plugin": "^3.6.2"

In my webpack.config.js I have a function to set up the options for webapp-webpack-plugin:

const configureWebapp = () => {
  return {
    logo: settings.webappConfig.logo,
    prefix: settings.webappConfig.prefix,
    cache: false,
    inject: 'force',
    favicons: {
      appName: pkg.name,
      appDescription: pkg.description,
      developerName: pkg.author.name,
      developerURL: pkg.author.url,
      path: settings.paths.dist.base,
    }
  };
};

Which is then used in my module.exports, where I have in the plugins array:

...
new HtmlWebpackPlugin({
  template: settings.htmlConfig.cssTemplate,
  filename: settings.htmlConfig.cssFilename,
  inject: false,
}),
new WebappWebpackPlugin(
  configureWebapp()
),
new HtmlWebpackPlugin({
  template: settings.htmlConfig.legacyScriptsTemplate,
  filename: settings.htmlConfig.legacyScriptsFilename,
  inject: false,
}),
...

Let me know if you can see anything I can do!

[brunocodutra]

Thanks for sharing, you're right, I'm able to reproduce this locally as well, the behavior must have changed somewhere along the way.

There's an open feature request that seems to address your use case, do you think #136 (in particular what I described in this comment) would work for you?

[lukecanvin]

Yes, I believe that would work for me!