Support for html-webpack-plugin 4?

[aaronjensen]

It's still not out quite yet, but I'm using html-webpack-plugin 4.0.0-alpha.2 for performance reasons. I can't seem to get this plugin working with it, so I'm guessing it's not supported. The integration API has changed considerably:

jantimon/html-webpack-plugin#953

If you could support both versions, that would be much appreciated.

Cheers!

[jantimon]

The html-webpack-plugin is already following a webpack recommendation to increase the hook performance:

webpack/webpack#7673
webpack/webpack#7672

A static version property was added for direct access:
https://github.com/jantimon/html-webpack-plugin/blob/d65b37d2c588047e0d81a38f4645fcdb3ead0b9e/index.js#L915-L927

The new event name and timing can be seen in this chart:

However as the html-webpack-plugin is an optional dependency you will probably need some "optional require" like the webpack-subresource-integrity plugin did:

https://github.com/waysact/webpack-subresource-integrity/blob/6d55aaded4ca50ffc48e6dabb66f41aaa9b6ef28/index.js#L13-L25

Could you please give the new events a try and let me know if they work for your case?
https://github.com/jantimon/html-webpack-plugin/tree/webpack-4#events

beforeAssetTagGeneration hook

    AsyncSeriesWaterfallHook<{
      assets: {
        publicPath: string,
        js: Array<{string}>,
        css: Array<{string}>,
        favicon?: string | undefined,
        manifest?: string | undefined
      },
      outputName: string,
      plugin: HtmlWebpackPlugin
    }>

alterAssetTags hook

    AsyncSeriesWaterfallHook<{
      assetTags: {
        scripts: Array<HtmlTagObject>,
        styles: Array<HtmlTagObject>,
        meta: Array<HtmlTagObject>,
      },
      outputName: string,
      plugin: HtmlWebpackPlugin
    }>

alterAssetTagGroups hook

    AsyncSeriesWaterfallHook<{
      headTags: Array<HtmlTagObject | HtmlTagObject>,
      bodyTags: Array<HtmlTagObject | HtmlTagObject>,
      outputName: string,
      plugin: HtmlWebpackPlugin
    }>

afterTemplateExecution hook

    AsyncSeriesWaterfallHook<{
      html: string,
      headTags: Array<HtmlTagObject | HtmlTagObject>,
      bodyTags: Array<HtmlTagObject | HtmlTagObject>,
      outputName: string,
      plugin: HtmlWebpackPlugin,
    }>

beforeEmit hook

    AsyncSeriesWaterfallHook<{
      html: string,
      outputName: string,
      plugin: HtmlWebpackPlugin,
    }>

afterEmit hook

    AsyncSeriesWaterfallHook<{
      outputName: string,
      plugin: HtmlWebpackPlugin
    }>

[brunocodutra]

@jantimon Thanks a lot for the pointers
@aaronjensen This is definitely on my radar, it's just a matter of finding time to do it

Actually t wasn't too hard, so I went ahead and added support to v4 already. Do you think you could check whether #131 works for you and let me know before I merge it?

[keepitterron]

Hey @brunocodutra any news on this? Any way I can help?
I'd love to use this plugin with html-webpack-plugin@next!

[brunocodutra]

PR #131adds support for it, do you think you could test it and let me know if it works for you?

[keepitterron]

Sure! Do I need to build the project or I can just drop-in replace it in the node_modules?

[brunocodutra]

You should be able to use the repo url (including the branch) in place of the version string in package.json

[keepitterron]

Hey @brunocodutra can confirm it works flawlessly for me!
It generates the icons and it inject them correctly using the alpha version of html-webpack-plugin 🎉