webpack4报错compilation.mainTemplate.applyPluginsWaterfall is not a function

最近在进行webpack4的学习，在进行运行的时候出现了一个问题，通过查找资料最终解决，记录一下

html-webpack-plugin 版本不兼容问题

10% building modules 1/1 modules 0 active(node:15332) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:15332) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead                                                  11% building modules 10/10 modules 0 activeD:\project\webpack\node_modules\html-webpack-plugin\lib\compiler.js:81
        var outputName = compilation.mainTemplate.applyPluginsWaterfall('asset-path', outputOptions.filename, {
                                                  ^

TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function
    at D:\project\webpack\node_modules\html-webpack-plugin\lib\compiler.js:81:51
    at compile (D:\project\webpack\node_modules\webpack\lib\Compiler.js:296:11)
    at hooks.afterCompile.callAsync.err (D:\project\webpack\node_modules\webpack\lib\Compiler.js:553:14)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\project\webpack\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (D:\project\webpack\node_modules\tapable\lib\Hook.js:35:21)
    at compilation.seal.err (D:\project\webpack\node_modules\webpack\lib\Compiler.js:550:30)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\project\webpack\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (D:\project\webpack\node_modules\tapable\lib\Hook.js:35:21)
    at hooks.optimizeAssets.callAsync.err (D:\project\webpack\node_modules\webpack\lib\Compilation.js:1294:35)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\project\webpack\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (D:\project\webpack\node_modules\tapable\lib\Hook.js:35:21)
    at hooks.optimizeChunkAssets.callAsync.err (D:\project\webpack\node_modules\webpack\lib\Compilation.js:1285:32)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\project\webpack\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (D:\project\webpack\node_modules\tapable\lib\Hook.js:35:21)
    at hooks.additionalAssets.callAsync.err (D:\project\webpack\node_modules\webpack\lib\Compilation.js:1280:36)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\project\webpack\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:6:1)

原因：是html-webpack-plugin·版本不兼容问题

"webpack":"^4.0.0",
"html-webpack-plugin":"^2.30.1"
//会出现不兼容问题

解决方案：升级到最新版

npm i --save-dev html-webpack-plugin@next
yarn add --dev html-webpack-plugin@next

官方地址：https://github.com/jantimon/html-webpack-plugin