[Pitfall] Webpack reports an error when using hard-source-webpack-plugin

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

I encountered the above problem when using thehard-source-webpack-plugin plugin to add caching to the build.

reason

When searching for solutions, I saw on the Internet that the version of this plug-in that can be used normally is the version below webpack5. Therefore, versions above 5 will report an error. After all, new projects are basically version 5 now

solution

1. Add sub-configuration

This method is mentioned in issues under the plug-ingithub. But I tried it myself and it didn’t work. It probably has something to do with the version. I posted it so you can try it out

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

2. Delete this plug-in and use other caching plug-ins.

Quote hereNuggets brother's article, use webpack's own configuration to add cache. Personal test, it works! ! !

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