【踩坑】webpack使用hard-source-webpack-plugin报错

TypeError: Cannot read properties of undefined (reading ‘tap’)

在使用hard-source-webpack-plugin插件给构建添加缓存时遇到上面的问题。

原因

在搜索解决方法时看到网上说的是这个插件能正常使用的版本是webpack5以下的版本。所以5以上的版本就会报错。毕竟现在新项目基本都是5版本了

解决方案

1、添加子配置

这个方法是在该插件github下的issues中提到的。但是自己试了没用，估计还是和版本有关系，贴出来大家可以尝试下

// vue.config.js中
plugins: [
	new HardSourceWebpackPlugin(),
    new HardSourceWebpackPlugin.ExcludeModulePlugin({
    	// ...setting
    }),
]

2、删除这个插件，使用其他缓存插件

这里引用一下掘金老哥的文章，使用webpack本身的配置添加缓存。亲测，可行！！！

// vue.config.js
configureWebpack: config => {
  config.cache = {
    type: 'filesystem',
    allowCollectingMemory: true
  }
}