Plugin could not be registered at 'html-webpack-plugin-before-html-processing'. Hook was not found

[sRect]

Error: Plugin could not be registered at 'html-webpack-plugin-before-html-processing'. Hook was not found. BREAKING CHANGE: There need to exist a hook at 'this.hooks'. To create a compatibility layer for this hook, hook into 'this._pluginCompat'. at Compilation.plugin (/Users/fcq/Desktop/webpack4.x/node_modules/tapable/lib/Tapable.js:69:9) at Compilation.deprecated [as plugin] (internal/util.js:66:15) at /Users/fcq/Desktop/webpack4.x/node_modules/add-asset-html-cdn-webpack-plugin/index.js:33:17 at SyncHook.eval [as call] (eval at create (/Users/fcq/Desktop/webpack4.x/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:13:1) at SyncHook.lazyCompileHook (/Users/fcq/Desktop/webpack4.x/node_modules/tapable/lib/Hook.js:154:20) at Compiler.newCompilation (/Users/fcq/Desktop/webpack4.x/node_modules/webpack/lib/Compiler.js:631:26) at hooks.beforeCompile.callAsync.err (/Users/fcq/Desktop/webpack4.x/node_modules/webpack/lib/Compiler.js:667:29) at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/fcq/Desktop/webpack4.x/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1) at AsyncSeriesHook.lazyCompileHook (/Users/fcq/Desktop/webpack4.x/node_modules/tapable/lib/Hook.js:154:20) at Compiler.compile (/Users/fcq/Desktop/webpack4.x/node_modules/webpack/lib/Compiler.js:662:28) at readRecords.err (/Users/fcq/Desktop/webpack4.x/node_modules/webpack/lib/Compiler.js:321:11) at Compiler.readRecords (/Users/fcq/Desktop/webpack4.x/node_modules/webpack/lib/Compiler.js:529:11) at hooks.run.callAsync.err (/Users/fcq/Desktop/webpack4.x/node_modules/webpack/lib/Compiler.js:318:10) at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/fcq/Desktop/webpack4.x/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1) at AsyncSeriesHook.lazyCompileHook (/Users/fcq/Desktop/webpack4.x/node_modules/tapable/lib/Hook.js:154:20) at hooks.beforeRun.callAsync.err (/Users/fcq/Desktop/webpack4.x/node_modules/webpack/lib/Compiler.js:315:19) at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/fcq/Desktop/webpack4.x/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1) at AsyncSeriesHook.lazyCompileHook (/Users/fcq/Desktop/webpack4.x/node_modules/tapable/lib/Hook.js:154:20) at Compiler.run (/Users/fcq/Desktop/webpack4.x/node_modules/webpack/lib/Compiler.js:312:24) at processOptions (/Users/fcq/Desktop/webpack4.x/node_modules/webpack-cli/bin/cli.js:353:14) at yargs.parse (/Users/fcq/Desktop/webpack4.x/node_modules/webpack-cli/bin/cli.js:364:3) at Object.parse (/Users/fcq/Desktop/webpack4.x/node_modules/webpack-cli/node_modules/yargs/yargs.js:567:18) at /Users/fcq/Desktop/webpack4.x/node_modules/webpack-cli/bin/cli.js:49:8 at Object.<anonymous> (/Users/fcq/Desktop/webpack4.x/node_modules/webpack-cli/bin/cli.js:366:3) at Module._compile (internal/modules/cjs/loader.js:689:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10) at Module.load (internal/modules/cjs/loader.js:599:32) at tryModuleLoad (internal/modules/cjs/loader.js:538:12) at Function.Module._load (internal/modules/cjs/loader.js:530:3) at Module.require (internal/modules/cjs/loader.js:637:17) at require (internal/modules/cjs/helpers.js:22:18) at Object.<anonymous> (/Users/fcq/Desktop/webpack4.x/node_modules/webpack/bin/webpack.js:156:2) at Module._compile (internal/modules/cjs/loader.js:689:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10) at Module.load (internal/modules/cjs/loader.js:599:32) at tryModuleLoad (internal/modules/cjs/loader.js:538:12) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] build: cross-env NODE_ENV=production webpack npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

[sRect]

When used with the add-asset-htmll-webpack-plugin or add-asset-html-cdn-webpack-plugin, an error occurs.so,I modified it like this:

// https://github.com/stephencookdev/speed-measure-webpack-plugin/tree/repro/html-webpack-plugin#optionspluginnames
const AddAssetHtmlCdnPlugin = require('add-asset-html-cdn-webpack-plugin');
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
const SpeedMeasureWebpackPlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasureWebpackPlugin({
  pluginNames: {
    customAddAssetHtmlCdnPluginName: AddAssetHtmlCdnPlugin,
    customAddAssetHtmlWebpackPluginName: AddAssetHtmlWebpackPlugin
  }
});

module.exports = smp.wrap({
  ...
})