前置知识
pages配置多入口的属性，由于vuecli用的就是html-webpack-plugin
所以配置都是一样的，但你在pages里面加新属性是行不通的
还得通过config.plugin("html").tap这种方式
本文可以解决一些报错，比如
报错1
Error: Cannot call .tap() on a plugin that has not yet been defined. Call plugin('html').use(<Plugin>) first.
plugin('html')不存在，调用use失败
报错2
TypeError: Cannot set properties of undefined (setting 'cdn')
---原因是args是空数组，args[0]再点个cdn肯定报错
上面两个报错基本是你用多入口，然后用老方法配置html plugin配置造成的
解决
根据你入口的名字，config.plugin('html') 有所不一样
比如入口有两个： page1 ，page2
需要这样写
config.plugin('html-page1')
config.plugin('html-page2')
解决过程
可看可不看
单入口
首先vue.config.js不声明多入口，也就是不写pages这个属性
项目根目录控制台执行 vue inspect > webapck.config.js
（webapck.config.js名字随便起就行）
执行完 ，根目录会多出一个webapck.config.js 的文件，
他就是vue最后生成的webpack配置
打开他，搜entry看结果，发现默认入口是叫app
还是webapck.config.js这个文件，搜HtmlWebpackPlugin，
发现对应配置是叫config.plugin("html")
所以配置可以这样写
vue inspect > webapck.config.js 看结果
数据进去了，cdn具体是什么数据就不用我说了都是网上很常见的方案了
还是贴一下把，格式类似这种
const cdn = {
css: ['//unpkg.com/element-ui@2.15.9/lib/theme-chalk/index.css'],
js: [
'//unpkg.com/vue@2.6.14/dist/vue.js',
'//unpkg.com/element-ui@2.15.9/lib/index.js',
],
};
要看结果的话，还得改一下html文件
html加这些，就是遍历cdn，插入link script
这样打包出来的才有上面配置那些cdn
加的地方放title标签后就行
<title>树枝666</title>
<!--css样式文件的加载-->
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
<% } %>
<!--js文件的加载-->
<% for (let i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
npm run build 看dist 的index.html
发现可以了，单入口配置到此为止
然后多页面
配置两个入口
pages: {
index: {
entry: "src/main.js",
template: "public/index.html",
filename: "index.html",
title: "Index Page",
chunks: ["chunk-vendors", "chunk-common", "index"],
},
loginPage: {
entry: "src/loginPage/main.js",
filename: "loginPage.html", // http://127.0.0.1:5500/dist/loginPage.html
template: "public/loginPage.html",
title: "登录",
chunks: ["loginPage"],
},
},
先把之前的这个注释，多入口不叫html了
老样子，vue inspect > webapck.config.js看结果
ok 到这步，应该都悟了，html改名了！
所以应该这样配置
config.plugin("html-index").tap((args) => {
args[0].cdn = cdn;
return args;
});
config.plugin("html-loginPage").tap((args) => {
args[0].cdn = cdn;
return args;
});
再vue inspect > webapck.config.js看结果
发现配置进去，多入口完结
基本vue inspect 检查webpack文件没问题，输出打包也不会有什么大问题
总结
单入口 多入口配置差异主要在于多入口时名字不叫html了
他有他的格式，就是html-[入口名]
你用config("html")，vue根本就找不到，所以args是空数组
至于那个use的提示，多半是个友好提示，但没达到解决问题的地步而已
ok 就这样，又补一个坑
