Vue.js 2/Webpack禁用Prefetch报错：无法调用未定义插件的.tap()

原因分析 #

npm包更新后（大概率是vue-cli或webpack相关依赖升级），原配置依赖的prefetch插件不再默认被webpack-chain预先定义，直接调用.tap()就会触发未定义插件的错误。

修复方案 #

方案一：检查插件存在后再修改配置 #

先判断prefetch插件是否已注册，仅在存在时修改其参数，避免触发未定义错误：

chainWebpack: config => {
    // stop webpack from prefetching all possible themes
    const prefetchPlugin = config.plugin('prefetch')
    if (prefetchPlugin) {
        prefetchPlugin.tap(args => {
            args[0].fileBlacklist = [ /\/scheme-.*\./ ]
            return args
        })
    }
}

方案二：手动注册并配置PrefetchPlugin #

如果插件完全未被注册，直接手动引入webpack的PrefetchPlugin并完成配置：

const { PrefetchPlugin } = require('webpack')

module.exports = {
    chainWebpack: config => {
        config.plugin('prefetch')
            .use(PrefetchPlugin, [{
                fileBlacklist: [ /\/scheme-.*\./ ]
            }])
    }
}

内容的提问来源于stack exchange，提问作者Keith Jackson