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