概述

@vue/cli-service@4.x下，配置了多頁面，構建後因為chunks沒有注入到html中，導致訪問頁面時頁面空白

原因

自定義了splitChunks，且單個包的大小達到某些條件後，會分割為多個包，如index~123.111.js，index~123.222.js，其中index~123是 chunkName
而html-webpack-plugin@3.x中，是判斷 includedChunks.indexOf(chunkName)===-1 以過濾需要注入的chunk名。

但是由於index~123中123是動態，在配置pages時無法獲取splitChunks後的動態chunkName。

所以生產環境構建後無法向html注入script標籤。

解決方案

1. 據説升級html-webpack-plugin到4或5可解決這個問題（實測更多屁事，根本解決不完），
   況且@vue/cli-service@4.x 強依賴了html-webpack-plugin@3.x，即使單獨升級html-webpack-plugin到更高版本也沒用
2. 升級@vue/cli 到5就沒這些屁事了（沒實測，手上項目較大，升級成本比較高 也無法預估風險）
3. 用我寫這個Plugin，完美解決 （https://github.com/lllllxt/DynamicChunksPlugin/tree/main）

參考資料

• webpack - 多入口多文件項目根據maxsize拆包後HtmlWebpackPlugin引入\<script\>失效問題
• 記一次令人頭疼的vue多頁面分包問題
• 使用multi-page模式時chunks無法注入script

太慘了Orz
2025還在用vue2...