elementui源碼解讀-問題5 TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function

蔚落 2022-12-24 03:00 195阅读 0赞

1.異常問題 TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvc2VkZ3Vlc3Q_size_16_color_FFFFFF_t_70][]

參考 [https://blog.csdn.net/zaocha321/article/details/104080778][https_blog.csdn.net_zaocha321_article_details_104080778]

解決方法升級`html-webpack-plugin`

`npm i html-webpack-plugin@next`

`2.異常問題 安裝html-webpack-plugin后,出現行的問題`

TypeError: Cannot read property 'tap' of undefined  
    at HtmlWebpackPlugin.apply (D:\\losedguest\\MyDemo\\Vue\\workplace\\webui\\node\_modules\\html-webpack-plugin\\index.js:40:31)  
    at webpack (D:\\losedguest\\MyDemo\\Vue\\workplace\\webui\\node\_modules\\webpack\\lib\\webpack.js:51:13)  
    at startDevServer (D:\\losedguest\\MyDemo\\Vue\\workplace\\webui\\node\_modules\\webpack-dev-server\\bin\\webpack-dev-server.js:94:16)  
    at processOptions (D:\\losedguest\\MyDemo\\Vue\\workplace\\webui\\node\_modules\\webpack-dev-server\\bin\\webpack-dev-server.js:166:3)  
    at findPort.then (D:\\losedguest\\MyDemo\\Vue\\workplace\\webui\\node\_modules\\webpack-dev-server\\lib\\utils\\processOptions.js:33:9)  
    at process.\_tickCallback (internal/process/next\_tick.js:68:7)  
    at Function.Module.runMain (internal/modules/cjs/loader.js:834:11)  
    at startup (internal/bootstrap/node.js:283:19)  
    at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)

發現安裝的`html-webpack-plugin:"`[^5.0.0-alpha.14][5.0.0-alpha.14]" 最新版本

打開`html-webpack-plugin的packages.json文件 發現其依賴的webpack版本是5.4.0而本項目的`"webpack": "^4.43.0",

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvc2VkZ3Vlc3Q_size_16_color_FFFFFF_t_70 1][]

![20201127085312281.png][]

解決方法

到網址[https://www.npmjs.com/package/html-webpack-plugin][https_www.npmjs.com_package_html-webpack-plugin]上找下html-webpack-plugin歷史版本,我用的最新4.X.X裡面 "html-webpack-plugin": "^4.5.0",

然後重新安裝`npm i html-webpack-plugin@`^4.5.0

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvc2VkZ3Vlc3Q_size_16_color_FFFFFF_t_70]: /images/20221120/38188d8247884dc68108502daa8d8557.png
[https_blog.csdn.net_zaocha321_article_details_104080778]: https://blog.csdn.net/zaocha321/article/details/104080778
[5.0.0-alpha.14]: https://www.npmjs.com/package/html-webpack-plugin/v/5.0.0-alpha.14
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvc2VkZ3Vlc3Q_size_16_color_FFFFFF_t_70 1]: /images/20221120/ec01507bc4d945629adffc6c926f2462.png
[20201127085312281.png]: https://img-blog.csdnimg.cn/20201127085312281.png
[https_www.npmjs.com_package_html-webpack-plugin]: https://www.npmjs.com/package/html-webpack-plugin