How to use the html-webpack-plugin.getHooks function in html-webpack-plugin

compiler.hooks.compilation.tap('HtmlWebpackPartialsPlugin', compilation => {

      HtmlWebpackPlugin.getHooks(compilation).afterTemplateExecution.tapAsync('HtmlWebpackPartialsPlugin', (data, callback) => {

        // If the input isn't an array, add it as one to simplify the process

        if ( !Array.isArray(this.settings) ) {
          this.settings = [ this.settings ];
        }

        const partial_collection = this.settings.map(partial => {
          return new Partial(partial);
        }).filter(partial => {

          // User option to conditionally inject snippet to allow for config based
          // injection management. Additionally check to see if the partial template
          // filename matches the current HTML Webpack Plugin instance. This defaults
          // to index.html if not set

compiler.hooks.compilation.tap(NAME, compilation => {
      require('html-webpack-plugin')
        .getHooks(compilation)
        .alterAssetTagGroups.tapAsync(
          NAME,
          (
            data: {
              headTags: Array<{ tagName: string; attributes: { [key: string]: any }; innerHTML?: string }>
            },
            cb: (error: Error | null, data: any) => void,
          ) => {
            // inject enviroments
            data.headTags.push({
              tagName: 'script',
              attributes: {},
              innerHTML: `window.${this.namespace} = ${JSON.stringify(this.env, null, 2)}`,
            })
            cb(null, data)

compiler.hooks.compilation.tap(ID, compilation => {
      HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups.tapAsync(
        ID,
        ({ plugin, bodyTags: body, headTags: head }, cb) => {
          const targetDir = compiler.options.output.path;
          // get stats, write to disk
          const htmlName = path.basename(plugin.options.filename);
          // Watch out for output files in sub directories
          const htmlPath = path.dirname(plugin.options.filename);
          const tempFilename = path.join(
            targetDir,
            htmlPath,
            `assets-${htmlName}.json`
          );
           if (!fs.existsSync(tempFilename)) {
            fs.mkdirpSync(path.dirname(tempFilename));
            const newBody = body.filter(
              a => a.tagName === 'script' && a.attributes

module.exports.tapHtml = (tappable, name, plugin) => {
  try {
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    return HtmlWebpackPlugin.getHooks /* HtmlWebpackPlugin >= 4.0 */
      ? HtmlWebpackPlugin.getHooks(tappable).afterTemplateExecution.tapAsync(name, plugin)
      : module.exports.tap(tappable, 'html-webpack-plugin-before-html-processing', name, plugin)
      ;
  } catch (_) {
    // ignore
  }
};

compiler.hooks.compilation.tap(ID, compilation => {
      // Support newest and oldest version.
      if (HtmlWebpackPlugin.getHooks) {
        HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups.tapAsync(
          ID,
          this.alterAssetTagGroups.bind(this, compiler)
        );
      } else {
        compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync(
          ID,
          this.alterAssetTagGroups.bind(this, compiler)
        );
      }
    });
  }

compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
      const htmlWebpackPluginBeforeHtmlProcessing = compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing || htmlWebpackPlugin.getHooks(compilation).afterTemplateExecution

      htmlWebpackPluginBeforeHtmlProcessing.tapAsync(PLUGIN_NAME, (htmlPluginData, callback) => {
        this.insertScriptToClient(htmlPluginData)
        callback(null, htmlPluginData)
      })

      const htmlWebpackPluginAfterHtmlProcessing = compilation.hooks.htmlWebpackPluginAfterHtmlProcessing || htmlWebpackPlugin.getHooks(compilation).beforeEmit

      htmlWebpackPluginAfterHtmlProcessing.tapAsync(PLUGIN_NAME, (htmlPluginData, callback) => {
        this.originalHtml = htmlPluginData.html
        callback(null, htmlPluginData)
      })
    })

compiler.hooks.compilation.tap('HtmlReplaceWebpackPlugin', compilation => {
      if (compilation.hooks.htmlWebpackPluginAfterHtmlProcessing) {
        compilation.hooks.htmlWebpackPluginAfterHtmlProcessing.tapAsync('HtmlReplaceWebpackPlugin', this.replace)
      } else {
        var HtmlWebpackPlugin = require('html-webpack-plugin')

        if (!HtmlWebpackPlugin) {
          throw new Error('Please ensure that `html-webpack-plugin` was placed before `html-replace-webpack-plugin` in your Webpack config if you were working with Webpack 4.x!')
        }

        HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync('HtmlReplaceWebpackPlugin', this.replace)
      }
    })
  } else {

compilation => {
				const hooks = HtmlWebpackPlugin.getHooks(compilation);

				hooks.beforeAssetTagGeneration.tapAsync(
					includeAssetsHtmlPluginName,
					(data, cb) => {
						data.plugin.options.templateParameters = (
							compilation,
							assets,
							assetTags,
							options
						) => {
							return self.templateParametersGenerator(
								compilation,
								assets,
								assetTags,
								options
							);

compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
      const htmlWebpackPluginBeforeHtmlProcessing = compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing || htmlWebpackPlugin.getHooks(compilation).afterTemplateExecution

      htmlWebpackPluginBeforeHtmlProcessing.tapAsync(PLUGIN_NAME, (htmlPluginData, callback) => {
        this.insertScriptToClient(htmlPluginData)
        callback(null, htmlPluginData)
      })

      const htmlWebpackPluginAfterHtmlProcessing = compilation.hooks.htmlWebpackPluginAfterHtmlProcessing || htmlWebpackPlugin.getHooks(compilation).beforeEmit

      htmlWebpackPluginAfterHtmlProcessing.tapAsync(PLUGIN_NAME, (htmlPluginData, callback) => {
        this.originalHtml = htmlPluginData.html
        callback(null, htmlPluginData)
      })
    })