html-webpack-plugin@4.0.0-alpha.1 hook error

[wendt88]

error with html-webpack-plugin version >= 4.0.0-alpha.1

The expected HtmlWebpackPlugin hook was not found! Ensure HtmlWebpackPlugin is installed and was initialized before this plugin

downgrade to 4.0.0-alpha works

[jantimon]

The html-webpack-plugin version 4 is getting closer to a release.
Many information can be found in this pr: jantimon/html-webpack-plugin#953

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

The event system was changed alot to work with the new features:

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
    }>

[jamesjieye]

@jantimon This is very helpful! I will work on a fix on my end. Thank you.

[lucaschen]

Any updates on this?

[growlycode]

Would love an update on this.

[greghesp]

Any update on this? I have the same issue in beta 5 using this plugin

EDIT: I've looked at the plugin and it seems its not using the correct approach possibly? I won't add this as a PR, but the code that works for me is as follow:

var assert = require('assert');
const HtmlWebpackPlugin = require('html-webpack-plugin');


function HtmlWebpackExcludeAssetsPlugin (options) {
  assert.equal(options, undefined, 'The HtmlWebpackExcludeAssetsPlugin does not accept any options');
  this.PluginName = 'HtmlWebpackExcludeAssetsPlugin';
}

HtmlWebpackExcludeAssetsPlugin.prototype.apply = function (compiler) {
  if ('hooks' in compiler) {
    // v4 approach:
    compiler.hooks.compilation.tap(this.PluginName, this.applyCompilation.bind(this));
  } else {
    // legacy approach:
    // Hook into the html-webpack-plugin processing
    compiler.plugin('compilation', this.applyCompilation.bind(this));
  }
};

HtmlWebpackExcludeAssetsPlugin.prototype.applyCompilation = function applyCompilation (compilation) {
  var self = this;
  HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups.tapAsync(this.PluginName, registerCb);

  function registerCb (htmlPluginData, callback) {
    var excludeAssets = htmlPluginData.plugin.options.excludeAssets;
    // Skip if the plugin configuration didn't set `excludeAssets`
    if (!excludeAssets) {
      if (callback) {
        return callback(null, htmlPluginData);
      } else {
        return Promise.resolve(htmlPluginData);
      }
    }

    if (excludeAssets.constructor !== Array) {
      excludeAssets = [excludeAssets];
    }

    // Skip invalid RegExp patterns
    var excludePatterns = excludeAssets.filter(function (excludePattern) {
      return excludePattern.constructor === RegExp;
    });

    var result = self.processAssets(excludePatterns, htmlPluginData);
    if (callback) {
      callback(null, result);
    } else {
      return Promise.resolve(result);
    }
  }
};

HtmlWebpackExcludeAssetsPlugin.prototype.isExcluded = function (excludePatterns, assetPath) {
  return excludePatterns.filter(function (excludePattern) {
    return excludePattern.test(assetPath);
  }).length > 0;
};

HtmlWebpackExcludeAssetsPlugin.prototype.processAssets = function (excludePatterns, pluginData) {
  var self = this;
  var body = [];
  var head = [];
  pluginData.headTags.forEach(function (tag) {
    if (!tag.attributes || !self.isExcluded(excludePatterns, tag.attributes.src || tag.attributes.href)) {
      head.push(tag);
    }
  });

  pluginData.bodyTags.forEach(function (tag) {
    if (!tag.attributes || !self.isExcluded(excludePatterns, tag.attributes.src || tag.attributes.href)) {
      body.push(tag);
    }
  });

  return { headTags: head, bodyTags: body, plugin: pluginData.plugin, chunks: pluginData.chunks, outputName: pluginData.outputName };
};

module.exports = HtmlWebpackExcludeAssetsPlugin;

[aKzenT]

@jamesjieye do you plan to release a v4 compatible version or would you publish one if someone opens a PR? Or is this project dead?

[fortinmike]

Just bumped into this after upgrading from html-webpack-plugin v3 to 4.0.4. A fix would be nice :)

[cdbattags]

Is this still a thing?

[simkessy]

I get this issue running it locally but not in docker.