webpack-相关报错-持续更新

一、webpack-相关报错

1. 使用Copy Plugin 报错

问题一：

 { ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.options[0] misses the property 'patterns'. Should be:
[non-empty string | object { from, to?, context?, globOptions?, filter?, toType?, force?, info?, transform?, transformPath?, noErrorOnMissing? }, ...] (should not have fewer than 1 item)

原因：安装的插件版本和配置参数不对应。

解决方案：插件版本和配置更新成统一版本。

问题二：

ERROR in unable to locate ‘/Users/xxx/vue-projects/fe-webpack/static' glob

原因：文件路径配置问题

解决方案：引用path插件，自动获取路径。

const path = require(‘path’)

new CopyPlugin({
  patterns: [
  	{ from: path.join(__dirname, ‘./src/static’),to: ‘static’}
  ],
})

问题三：

TypeError: compilation.getCache is not a function

原因：新版版的插件跟webpack版本不对应。

解决方案：升级webpack到5.10.1或者将Copy Plugin插件降到5.1.12

2. compression-webpack-plugin插件使用

 ERROR  TypeError: Cannot read property 'tapPromise' of undefined

原因：项目中使用的webpack版本是4.44.2，而compression-webpack-plugin的插件版本确实最新的7.0.0。导致webpack插件的版本跟插件不匹配

解决方案：降级插件版本到3.1.0

3. clean-webpack-plugin插件使用

问题一：

TypeError: CleanWebpackPlugin is not a constructor

原因：新版的的引入写法改变

解决方案：

// 现在新版本的clean-webpack-plugin引入已经改为
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

问题二：

Error: clean-webpack-plugin only accepts an options object.

原因：新版本中接受一个对象参数

解决方案：

// 直接new 
new CleanWebpackPlugin()
// 新版参数值参考：https://www.npmjs.com/package/clean-webpack-plugin