vue2 多页面构建后chunks无法注入script问题

概述

@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...