vue-cli3配置webpack,htmlWebpackPlugin

背景

项目上线后需要添加到百度搜索引擎，如何添加到百度搜索引擎参照https://jingyan.baidu.com/article/fc07f989c34dbb52ffe519a3.html。 重点是需要在html中添加一个meta，于是我就直接添加了

<meta name="baidu-site-verification" content="sxexxxxx" />

然后问题出现了，在百度进行HTML验证的时候，出现错误

“不要做任何修改”emm,发现vue项目webpack打包会进行压缩html，去掉双引号空格等，于是百度验收就不能成功。

vue-cli3创建的项目修改webpack配置

所以就需要修改配置，让打包时保持百度验证meta的格式不变。 网上看了一圈都是cli2的配置，还是有一定的差别，配置vue-cli3项目，全部都在vue.config.js，下面给出cli3的配置。
官网提供configureWebpack和chainWebpack两种配置，因为我要在原来的基础上直接修改配置，所以用chainWebpack。 cli.vuejs.org/zh/guide/we…
看到官网的配置例子

问题来了，我需要的是配置plugin，这里配置的是loader,我怎么知道应该往config里写点什么呢？
重点来了

（1）控制台输入：vue inspect > output.js 拿到解析好的 webpack 配置。

（2）打开output.js

（3）比如，这里我是想要修改htmlWebpackPlugin的行为，于是在output.js中搜索htmlWebpackPlugin，output.js里有注释，自然会告诉你怎么写啦。

最终我的修改

module.exports = {
  chainWebpack: (config) => {
    // 为保证加入百度搜索引擎的meta格式，修改htmlWebpackPlugin的选项
    config.plugin('html').tap((options) => {
      // eslint-disable-next-line
      options[0].minify = {
        ...options[0].minify,
        ignoreCustomFragments: [/<meta name="baidu-site-verification" content="sxe4OW9kxm" \/>/],
      }
      // more options: https://github.com/jantimon/html-webpack-plugin#minification
      return options;
    });
  },
};