html-webpack-plugin 单页面|多页面写法及报错处理

前置知识
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() 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这个属性

image.png

项目根目录控制台执行 vue inspect > webapck.config.js
（webapck.config.js名字随便起就行）
执行完 ，根目录会多出一个webapck.config.js 的文件，
他就是vue最后生成的webpack配置
打开他，搜entry看结果，发现默认入口是叫app

image.png

还是webapck.config.js这个文件，搜HtmlWebpackPlugin，
发现对应配置是叫config.plugin("html")

image.png

所以配置可以这样写

image.png

vue inspect > webapck.config.js 看结果

image.png

数据进去了，cdn具体是什么数据就不用我说了都是网上很常见的方案了
还是贴一下把，格式类似这种

const cdn = {
css: ['//unpkg.com/[email protected]/lib/theme-chalk/index.css'],
js: [
 '//unpkg.com/[email protected]/dist/vue.js',
 '//unpkg.com/[email protected]/lib/index.js',
 ],
};

要看结果的话，还得改一下html文件
html加这些，就是遍历cdn，插入link script
这样打包出来的才有上面配置那些cdn
加的地方放title标签后就行

 
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>


<% } %>

<% for (let i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>

<% } %>

npm run build 看dist 的index.html
发现可以了，单入口配置到此为止

image.png

然后多页面

配置两个入口

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了

image.png

老样子，vue inspect > webapck.config.js看结果

image.png

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看结果

image.png

发现配置进去，多入口完结
基本vue inspect 检查webpack文件没问题，输出打包也不会有什么大问题

总结

单入口 多入口配置差异主要在于多入口时名字不叫html了
他有他的格式，就是html-[入口名]
你用config("html")，vue根本就找不到，所以args是空数组
至于那个use的提示，多半是个友好提示，但没达到解决问题的地步而已

ok 就这样，又补一个坑