Vue Cli 配置多入口报错解决办法 Cannot call .tap

项目做多入口, 默认入口为index时启动出现如下报错:

Error: Cannot call .tap() on a plugin that has not yet been defined. Call plugin('preload').use() first. 

错误代码:

// vue.config.js
module.exports = {
  pages: {
    index: {
      entry: "src/main.js",
    },
    qr: {
      entry: "src/qr.main.js",
    },
  },

  chainWebpack(config) {
    config.plugin("preload").tap(() => [
      {
        rel: "preload",
        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
        include: "initial",
      },
    ]);
  },
};

解决办法:

// vue.config.js
module.exports = {
  pages: {
    index: {
      entry: "src/main.js",
    },
    qr: {
      entry: "src/qr.main.js",
    },
  },

  chainWebpack(config) {
    config.plugin("preload-index").tap(() => [
      {
        rel: "preload",
        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
        include: "initial",
      },
    ]);
    config.plugin("preload-qr").tap(() => [
      {
        rel: "preload",
        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
        include: "initial",
      },
    ]);
  },
};

原因vue cli文档给出了解释:

配置参考 | Vue CLI 当在 multi-page 模式下构建时，webpack 配置会包含不一样的插件 (这时会存在多个 html-webpack-plugin 和 preload-webpack-plugin 的实例)。如果你试图修改这些插件的选项，请确认运行 vue inspect。

拓展:

vue-cli3中关于prefetch、preload和路由懒加载的研究 - 百度文库