Vue-cli: 多页面应用，使用splitChunks插件抽取的chunk，不会被各个html页面自动引入（单页面没问题）

[wubinsheng2017]

Version

3.8.4

Environment info

windows10   node10

Steps to reproduce

1、使用vue-cli3初始化的一个多页面应用，参照下面的链接配置了多页面
https://cli.vuejs.org/zh/config/#pages
pages:{
index:{
entry: filePath,
filename: index.html,
template: 'public/index.html',
hash: true,
chunks: ['chunk-vendors', 'index']
}
b: ......
}

2、在vue.config.js中添加splitChunks配置抽取共通chunk，如下：
config.optimization
.splitChunks({
chunks: 'all',
minChunks: 1,
maxInitialRequests: 4,
maxAsyncRequests: 5,
automaticNameDelimiter: '-',
.....
})

3、结果：
打包出来的index.html中，只引入了chunk-vendors.js index.js，
通过splitChunks共通出来的chunk文件，比如index~b.js，没有被引入index.js中。

因为动态生成的chunks的文件名不固定，如何让它们自动被引入对应的html中？

What is expected?

因为动态生成的chunks的文件名不固定，如何让它们自动被引入对应的html中？

What is actually happening?

动态生成的chunks，没有被引入到html中

[shaonialife]

我也遇到了这个问题, 我目前的解决方案是编写一个插件, 在打包完成后, 扫描所有的html js css文件, 通过正则表达式匹配 js 文件中的列出的依赖, 然后替换到html中, 下图红框中就是该页面入口文件所需的依赖

但是我一直觉得这不是一种好的方案, 等有时间了再想一个新的思路写一个插件或者官方有一个好的解决方案之后再换上.
顺便提一句, 配置pages的时候, 并不需要写 chunks 这个选项

[wubinsheng2017]

方案我也有，问题也能解决
通过cacheGroups生成一个通用的commons，兜底用的那种
但是这样依然是要在chunks中手动指定才会被引入html
但总觉得不妥

[wubinsheng2017]

感觉我问错地方了，我应该去HtmlWebpackPlugin那问

[liyann]

@wubinsheng2017 HtmlWebpackPlugin 使用@next版本就好了

[wubinsheng2017]

@wubinsheng2017 HtmlWebpackPlugin 使用@next版本就好了

亲测有效，谢谢啊。

[q2177329q]

就好

你是怎样升级到next的？我升级了，但是cli-service的依赖是写在它自己的package.json里面的。还是引用它本身的

[wubinsheng2017]

就好

你是怎样升级到next的？我升级了，但是cli-service的依赖是写在它自己的package.json里面的。还是引用它本身的

非vue-cli的工程，这样OK了
vue-cli是这样的，我也没搞定，保留了原来的方案：
config.optimization
.splitChunks({
chunks: 'all',
......
cacheGroups: {
......
common: {
name: 'common',
minChunks: 2,
priority: -20,
reuseExistingChunk: true
},

→ 所有页面的chunks中手动包含下‘common’

[66beta]

蠢办法：
1、把pages和cacheGroups放到外面定义
2、先定义cacheGroups，然后遍历修改pages中的每一页
3、每一页都添加chunks，chunks的值从cacheGroups的定义中提取