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

本来没打算写这篇的，但是看到上一篇写的那种低级解决方法都有人点赞，瞬间动力满满，就写了，不废话，开干

报错的整体内容如下

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

大家在搜这个报错时，应该会先看高点击量的那几篇，我这篇主要是解决这几篇文章的评论区的这个问题，如下图

但是可能有的小伙伴没看过那几篇文章就来看我这篇，所以我决定写总结版的

以下正文

---

这个报错是在vue.config.js文件中的，位于项目的根目录处，打开这个文件

大家应该能找到和我一样的代码块

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

接着我要把代码改成下面的形式，如下图

 chainWebpack(config) {
    config.plugin('preload-vue-loader').tap(() => [
      {
        rel: 'preload',
        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
        include: 'initial'
      }
    ]),
      config.plugin('preload-feature-flags').tap(() => [
      {
        rel: 'preload',
        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
        include: 'initial'
      }
    ])，
    ...
}

大家仔细观察会发现，其实不一样的地方是config.plugin('')这个单引号之间的内容，它们的格式都是'preload-xxx'，那这个xxx在哪看呢？

我们需要在终端输入以下命令查看

vue inspect

接着就会出现很长一段的界面，大家不用慌，我们先找到plugins这个数组（在界面偏下的位置），如下图

接着我们需要找下面这几个关键字

config.plugin('   ')

看我上面的截图，黄色框框住的东西就是我们要写在下图红框的，你的界面有几个黄框的东西就写几个这样配置（记住是写在chainWebpack(config){ } 里面的！！）

以上就是高点击量文章的步骤

我当时写完所有配置，报错就变成了如下

Error: Cannot call .tap() on a plugin that has not yet been defined. Call plugin('preload-vue-loader').use(<Plugin>) first.

 这时候就不单单是拆分配置的问题了，直接操作

首先在文件最外层（就是写在module.exports={ }外面），写如下定义

const PreloadWebpackPlugin = require('@vue/preload-webpack-plugin')

 在这如果报错的，可以去package.json文件的’devDependencies‘中找找自己有没有配置@vue/preload-webpack-plugin，如果没配置执行下面的命令

npm install --save-dev @vue/preload-webpack-plugin

//或者

yarn add --dev @vue/preload-webpack-plugin

接着在module.exports={ }里面找到 configureWebpack:{ }，补充成下面的样子

configureWebpack: { 
    plugins: [
      new PreloadWebpackPlugin({
        rel: 'preload',
        fileBlacklist: [/.*\.(js|map|css)$/]
      })
    ]
  }

 接着再打开我们在上边配置好的代码块

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

在所有配置的 .tap 前加上 .use(PreloadWebpackPlugin)，变成下面这样（记得是全部配置好的都要加上）

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

然后我的报错就解决了

文章可能会有用词不规范的地方希望理解（因为有的东西我不知道要叫啥），有错误的地方还望指出~ 本文几乎都是教操作 没讲原理，其实我能讲出大概原理，但是！只是我脑子里想到的原理，没有文件支撑，加上我是小白，怕理解错了说出来误导大家，所以就不讲了，希望能帮助到大家~