How to use the tapable.AsyncSeriesHook function in tapable

constructor(opts = {}, config = {}) {
    this.opts = opts
    this.opts.cwd = path.resolve(opts.cwd || '.')
    this.initialConfig = config
    this.pages = new Pages(this)
    this.browserApi = new BrowserApi(this)
    this.webpackUtils = new WebpackUtils(this)
    this.log = log
    this.colors = colors
    this.utils = require('saber-utils')
    this.hooks = {
      // Before all user plugins have been applied
      beforePlugins: new AsyncSeriesHook(),
      filterPlugins: new SyncWaterfallHook(['plugins']),
      // After all user plugins have been applied
      afterPlugins: new AsyncSeriesHook(),
      // Before running the build process
      beforeRun: new AsyncSeriesHook(),
      onUpdateConfigFile: new AsyncSeriesHook(),
      // Extend webpack config
      chainWebpack: new SyncHook(['webpackChain', 'opts']),
      getWebpackConfig: new SyncWaterfallHook(['config', 'opts']),
      // Extend markdown-it config
      chainMarkdown: new SyncHook(['config']),
      chainTemplate: new SyncHook(['config']),
      emitRoutes: new AsyncSeriesHook(),
      // Called after running webpack
      afterBuild: new AsyncSeriesHook(),
      // Called after generate static HTML files

constructor(context) {
		super();
		this.hooks = {
			shouldEmit: new SyncBailHook(["compilation"]),
			done: new AsyncSeriesHook(["stats"]),
			additionalPass: new AsyncSeriesHook([]),
			beforeRun: new AsyncSeriesHook(["compilation"]),
			run: new AsyncSeriesHook(["compilation"]),
			emit: new AsyncSeriesHook(["compilation"]),
			afterEmit: new AsyncSeriesHook(["compilation"]),
			thisCompilation: new SyncHook(["compilation", "params"]),
			compilation: new SyncHook(["compilation", "params"]),
			normalModuleFactory: new SyncHook(["normalModuleFactory"]),
			contextModuleFactory: new SyncHook(["contextModulefactory"]),
			beforeCompile: new AsyncSeriesHook(["params"]),
			compile: new SyncHook(["params"]),
			make: new AsyncParallelHook(["compilation"]),
			afterCompile: new AsyncSeriesHook(["compilation"]),
			watchRun: new AsyncSeriesHook(["compiler"]),
			failed: new SyncHook(["error"]),
			invalid: new SyncHook(["filename", "changeTime"]),
			watchClose: new SyncHook([]),

			// TODO the following hooks are weirdly located here
			// TODO move them for webpack 5

beforeHash: new SyncHook([]),
			contentHash: new SyncHook(["chunk"]),
			afterHash: new SyncHook([]),

			recordHash: new SyncHook(["records"]),

			record: new SyncHook(["compilation", "records"]),

			beforeModuleAssets: new SyncHook([]),
			shouldGenerateChunkAssets: new SyncBailHook([]),
			beforeChunkAssets: new SyncHook([]),
			additionalChunkAssets: new SyncHook(["chunks"]),

			additionalAssets: new AsyncSeriesHook([]),
			optimizeChunkAssets: new AsyncSeriesHook(["chunks"]),
			afterOptimizeChunkAssets: new SyncHook(["chunks"]),
			optimizeAssets: new AsyncSeriesHook(["assets"]),
			afterOptimizeAssets: new SyncHook(["assets"]),

			needAdditionalSeal: new SyncBailHook([]),
			afterSeal: new AsyncSeriesHook([]),

			chunkHash: new SyncHook(["chunk", "chunkHash"]),
			moduleAsset: new SyncHook(["module", "filename"]),
			chunkAsset: new SyncHook(["chunk", "filename"]),

			assetPath: new SyncWaterfallHook(["filename", "data"]), // TODO MainTemplate

			needAdditionalPass: new SyncBailHook([]),
			childCompiler: new SyncHook([
				"childCompiler",

thisCompilation: new SyncHook(["compilation", "params"]),
			/** @type {SyncHook} */
			compilation: new SyncHook(["compilation", "params"]),
			/** @type {SyncHook} */
			normalModuleFactory: new SyncHook(["normalModuleFactory"]),
			/** @type {SyncHook}  */
			contextModuleFactory: new SyncHook(["contextModulefactory"]),

			/** @type {AsyncSeriesHook} */
			beforeCompile: new AsyncSeriesHook(["params"]),
			/** @type {SyncHook} */
			compile: new SyncHook(["params"]),
			/** @type {AsyncParallelHook} */
			make: new AsyncParallelHook(["compilation"]),
			/** @type {AsyncSeriesHook} */
			afterCompile: new AsyncSeriesHook(["compilation"]),

			/** @type {AsyncSeriesHook} */
			watchRun: new AsyncSeriesHook(["compiler"]),
			/** @type {SyncHook} */
			failed: new SyncHook(["error"]),
			/** @type {SyncHook} */
			invalid: new SyncHook(["filename", "changeTime"]),
			/** @type {SyncHook} */
			watchClose: new SyncHook([]),

			/** @type {SyncBailHook} */
			infrastructureLog: new SyncBailHook(["origin", "type", "args"]),

			// TODO the following hooks are weirdly located here
			// TODO move them for webpack 5
			/** @type {SyncHook} */

constructor(context) {
		super();
		this.hooks = {
			shouldEmit: new SyncBailHook(["compilation"]),
			done: new AsyncSeriesHook(["stats"]),
			additionalPass: new AsyncSeriesHook([]),
			beforeRun: new AsyncSeriesHook(["compilation"]),
			run: new AsyncSeriesHook(["compilation"]),
			emit: new AsyncSeriesHook(["compilation"]),
			afterEmit: new AsyncSeriesHook(["compilation"]),
			thisCompilation: new SyncHook(["compilation", "params"]),
			compilation: new SyncHook(["compilation", "params"]),
			normalModuleFactory: new SyncHook(["normalModuleFactory"]),
			contextModuleFactory: new SyncHook(["contextModulefactory"]),
			beforeCompile: new AsyncSeriesHook(["params"]),
			compile: new SyncHook(["params"]),
			make: new AsyncParallelHook(["compilation"]),
			afterCompile: new AsyncSeriesHook(["compilation"]),
			watchRun: new AsyncSeriesHook(["compiler"]),
			failed: new SyncHook(["error"]),
			invalid: new SyncHook(["filename", "changeTime"]),
			watchClose: new SyncHook([]),

			// TODO the following hooks are weirdly located here

/** @type {SyncHook} */
			record: new SyncHook(["compilation", "records"]),

			/** @type {SyncHook} */
			beforeModuleAssets: new SyncHook([]),
			/** @type {SyncBailHook} */
			shouldGenerateChunkAssets: new SyncBailHook([]),
			/** @type {SyncHook} */
			beforeChunkAssets: new SyncHook([]),
			/** @type {SyncHook} */
			additionalChunkAssets: new SyncHook(["chunks"]),

			/** @type {AsyncSeriesHook} */
			additionalAssets: new AsyncSeriesHook([]),
			/** @type {AsyncSeriesHook} */
			optimizeChunkAssets: new AsyncSeriesHook(["chunks"]),
			/** @type {SyncHook} */
			afterOptimizeChunkAssets: new SyncHook(["chunks"]),
			/** @type {AsyncSeriesHook} */
			optimizeAssets: new AsyncSeriesHook(["assets"]),
			/** @type {SyncHook} */
			afterOptimizeAssets: new SyncHook(["assets"]),

			/** @type {SyncBailHook} */
			needAdditionalSeal: new SyncBailHook([]),
			/** @type {AsyncSeriesHook} */
			afterSeal: new AsyncSeriesHook([]),

			/** @type {SyncHook} */
			chunkHash: new SyncHook(["chunk", "chunkHash"]),
			/** @type {SyncHook} */
			moduleAsset: new SyncHook(["module", "filename"]),

/** @type {SyncHook} */
			record: new SyncHook(["compilation", "records"]),

			/** @type {SyncHook} */
			beforeModuleAssets: new SyncHook([]),
			/** @type {SyncBailHook} */
			shouldGenerateChunkAssets: new SyncBailHook([]),
			/** @type {SyncHook} */
			beforeChunkAssets: new SyncHook([]),
			/** @type {SyncHook} */
			additionalChunkAssets: new SyncHook(["chunks"]),

			/** @type {AsyncSeriesHook} */
			additionalAssets: new AsyncSeriesHook([]),
			/** @type {AsyncSeriesHook} */
			optimizeChunkAssets: new AsyncSeriesHook(["chunks"]),
			/** @type {SyncHook} */
			afterOptimizeChunkAssets: new SyncHook(["chunks"]),
			/** @type {AsyncSeriesHook} */
			optimizeAssets: new AsyncSeriesHook(["assets"]),
			/** @type {SyncHook} */
			afterOptimizeAssets: new SyncHook(["assets"]),

			/** @type {SyncBailHook} */
			needAdditionalSeal: new SyncBailHook([]),
			/** @type {AsyncSeriesHook} */
			afterSeal: new AsyncSeriesHook([]),

			/** @type {SyncHook} */
			chunkHash: new SyncHook(["chunk", "chunkHash"]),
			/** @type {SyncHook} */
			moduleAsset: new SyncHook(["module", "filename"]),

constructor () {
    this.hooks = {
      start: new SyncHook(),
      beforeRequest: new AsyncSeriesHook(['options']),
      afterRequest: new AsyncSeriesHook(['data', 'options', 'assert']),
      beforeProcess: new AsyncSeriesHook(['process']),
      afterProcess: new AsyncSeriesHook(['data']),
      afterDueOption: new AsyncSeriesHook(['reqOptions', 'options'])
    }
    this._allData = {};
    this._preData = '';
    this._cookie = {};
    this._setCookie = [];
  }

constructor(options: { env: any; }) {
    super();
    this.addPlugin = this.addPlugin.bind(this);
    this.manageHistoryChange = this.manageHistoryChange.bind(this);

    window.PAW_HISTORY = window.PAW_HISTORY || createBrowserHistory({
      basename: options.env.appRootUrl,
    });
    this.history = window.PAW_HISTORY;
    this.historyUnlistener = this.history.listen(this.manageHistoryChange);

    this.hooks = {
      locationChange: new AsyncParallelBailHook(['location', 'action']),
      beforeLoadData: new AsyncSeriesHook(['setParams', 'getParams']),
      beforeRender: new AsyncSeriesHook(['Application']),
      renderRoutes: new AsyncSeriesHook(['AppRoutes']),
      renderComplete: new SyncHook(),
    };
    this.options = options;
    this.manageServiceWorker();
  }