[question] html-webpack-plugin@^4 support

[chrisands]

Do you want to request a feature, report a bug or ask a question?

In html-webpack-plugin@4 they renamed hooks, so currently svg-sprite-loader doesn't support @4>. Also, they dropped webpack@<4 support. Are you planning to support html-webpack-plugin@4?

I locally fixed the package with patch-package and now I think of making PR to the source. With the support of html-webpack-plugin@4 this plugin also has to drop the old version of webpack.

Related issue #313

[sqal]

Hey @chrisands Could you provide instructions on how to patch this plugin so it works with the latest version of html-webpack-plugin?

[chrisands]

@sqal sure, here's diff. I'll try make PR

diff --git a/lib/plugin.js b/lib/plugin.js
index 3d275b9..452a4d1 100644
--- a/lib/plugin.js
+++ b/lib/plugin.js
@@ -70,8 +70,7 @@ class SVGSpritePlugin {
         .thisCompilation
         .tap(NAMESPACE, (compilation) => {
           try {
-            // eslint-disable-next-line global-require
-            const NormalModule = require('webpack/lib/NormalModule');
+            const NormalModule = compiler.webpack.NormalModule;
             NormalModule.getCompilationHooks(compilation).loader
               .tap(NAMESPACE, loaderContext => loaderContext[NAMESPACE] = this);
           } catch (e) {
@@ -100,9 +99,10 @@ class SVGSpritePlugin {
       compiler.hooks
         .compilation
         .tap(NAMESPACE, (compilation) => {
-          if (compilation.hooks.htmlWebpackPluginBeforeHtmlGeneration) {
-            compilation.hooks
-              .htmlWebpackPluginBeforeHtmlGeneration
+          const hooks = HtmlWebpackPlugin.getHooks(compilation)
+          if (hooks.beforeAssetTagGeneration) {
+            hooks
+              .beforeAssetTagGeneration
               .tapAsync(NAMESPACE, (htmlPluginData, callback) => {
                 htmlPluginData.assets.sprites = this.beforeHtmlGeneration(compilation);

@@ -110,9 +110,9 @@ class SVGSpritePlugin {
               });
           }

-          if (compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing) {
+          if (hooks.beforeHtmlProcessing) {
             compilation.hooks
-              .htmlWebpackPluginBeforeHtmlProcessing
+              .beforeHtmlProcessing
               .tapAsync(NAMESPACE, (htmlPluginData, callback) => {
                 htmlPluginData.html = this.beforeHtmlProcessing(htmlPluginData);

[holloway]

Is there a plan to release this?

[jiikoosol]

Any news about releasing this fix?

[719media]

@d3x42 with vue-cli v5 releasing, this is beginning to cause more problems for vue-cli users running on webpack 5. Any word?

[d3x42]

Unfortunately, the main maintainer of this package passed away. I'm ready to review PR with fixes If someone is ready to make them, but currently not ready to prepare changes by myself.

So feel free to prepare PR and ping me for review.

[ajotka]

I am trying to do the PR for webpack 5, but there is a huge blocker. SVG Sprite Loader is using "webpack-toolkit" and this package is trying to use 'webpack/lib//MultiEntryPlugin' which is deprecated in Webpack 5. Any chance to update? Or should I implement workaround?

[holloway]

Hey @ajotka I'm keen to help out -- just let me know if there's anything I can do.

@d3x42 any thoughts on the preceding question?

[mapreal19]

@chrisands did you make the PR? any updates here?

[mikheeff]

Any updates?

[JinPengGeng]

Any updates?