Support html-webpack-plugin v4

[edmorley]

Hi

The upcoming html-webpack-plugin v4 (currently at 4.0.0-beta.1) has changed the name of several of its hooks, which causes:

Syntax error: Unable to tap into the HtmlWebpackPlugin's callbacks. Make sure to list
PreloadPlugin at some point after HtmlWebpackPlugin in webpack's plugins array.

(See: facebook/create-react-app#5103 (comment))

The new hook names are described here:
jantimon/html-webpack-plugin#953 (comment)

Many thanks :-)

[jeffposnick]

That's fun 😄

We can add in html-webpack-plugin v4 compatibility as part of the v3.0.0-beta releases, and then hopefully move that to be a final v3.0.0 release in the near future.

[jeffposnick]

Sorry for the lack of updates—I've been trying to get things upgraded for html-webpack-plugin v4 (in the same branch that added support for webpack v4), and run into a couple of issues:

• [v4-beta.2] Issue with HtmlWebpackPlugin.getHooks() jantimon/html-webpack-plugin#1091
• [v4-beta.2] Alternative to htmlPluginData.assets.chunks? jantimon/html-webpack-plugin#1092

[jeffposnick]

Hey all—could folks give npm install preload-webpack-plugin@3.0.0-beta.3 a try?

That is meant to add support for html-webpack-plugin v4, but I did have to remove a some features in the process (like support for include: allChunks, due to jantimon/html-webpack-plugin#1092).

[ghost]

@jeffposnick works great! thanks!
I'm using: {rel: "prefetch", include: "allAssets"}

[jeffposnick]

Thanks—I'm still working out some of the ergonomics with html-webpack-plugin v4 (see jantimon/html-webpack-plugin#1091 (comment)), but that at least gives folks who are on the bleeding edge something to work with 😄

[phil-lgr]

howdy, worked first time with

module.exports = new PreloadWebpackPlugin({
    rel: 'preload',
    include: 'initial', // 'initial' or 'allChunks'
});

 "preload-webpack-plugin": "^3.0.0-beta.3",
 "html-webpack-plugin": "^4.0.0-beta.2",

👏 👏 👍

[pgregorova]

Just wondering if there are any updates on supporting Webpack 4+ in upcoming release and when it may be? Thank you.

[Tim-ls]

@phil-lgr good job! I had resolved.

[jeffposnick]

So both jantimon/html-webpack-plugin#1091 and jantimon/html-webpack-plugin#1092 remain open, with the first issue being more serious with regards to how this plugin integrates with html-webpack-plugin v4.

npm install preload-webpack-plugin@3.0.0-beta.3 should give folks something that works with the latest html-webpack-plugin v4 beta, but I'm a little hesitant to make that a final release while the underlying html-webpack-plugin interface is still up in the air.

[andyfurniss4]

Adding my name to this in the hope that we can get v4 support.

Would the Vue version of this package provide a way through the impasse? I notice they state the following:

Uses a combination of htmlWebpackPluginBeforeHtmlProcessing and htmlWebpackPluginAlterAssetTags hooks to inject links as objects rather than strings. This allows for more flexibility when the tags need to be altered by other plugins.

I'm not very experienced with the details but it sounds like they may have experienced similar issues? For reference, I tried using the Vue version but I just get Cannot read property 'tap' of undefined when trying to build.

[EliteMasterEric]

This issue has been open for over a year and is still not closed.

Since even create-react-app uses html-webpack-plugin 4.0.0-beta.5, I would assume it's stable enough to base an update off of the most recent interface.

For those looking to resolve this issue without this plugin, look into magic comments.

[glassdimlygr]

No need for magic comments. You can use the preload-webpack-plugin@next, which installs the latest, in which Webpack 4 support has been added. I tested with 3.0.0-beta.4 See the release page.

[alireza-mh]

not working with html-webpack-plugin version > 4.0.0