npm安装compression-webpack-plugin插件报错问题记录

问题再现

因项目需要，在前端项目中安装compression-webpack-plugin插件

• 运行npm install compression-webpack-plugin命令之后在package.json文件中已经出现了"compression-webpack-plugin": "^7.1.2"这个依赖项
• 运行npm run serve命令启动项目，报错信息如下：

 ERROR  Error: Rule can only have one resource source (provided resource and test + include + exclude) in {
  "exclude": [
    null
  ],
  "use": [
    {
      "loader": "/Users/lyb/Downloads/wcp-front-vue/node_modules/cache-loader/dist/cjs.js",
      "options": {
        "cacheDirectory": "/Users/lyb/Downloads/wcp-front-vue/node_modules/.cache/babel-loader",
        "cacheIdentifier": "61a7e43e"
      },
      "ident": "clonedRuleSet-38[0].rules[0].use[0]"
    },
    {
      "loader": "/Users/lyb/Downloads/wcp-front-vue/node_modules/babel-loader/lib/index.js",
      "options": "undefined",
      "ident": "undefined"
    }
  ]
}
Error: Rule can only have one resource source (provided resource and test + include + exclude) in {
  "exclude": [
    null
  ],
  "use": [
    {
      "loader": "/Users/lyb/Downloads/wcp-front-vue/node_modules/cache-loader/dist/cjs.js",
      "options": {
        "cacheDirectory": "/Users/lyb/Downloads/wcp-front-vue/node_modules/.cache/babel-loader",
        "cacheIdentifier": "61a7e43e"
      },
      "ident": "clonedRuleSet-38[0].rules[0].use[0]"
    },
    {
      "loader": "/Users/lyb/Downloads/wcp-front-vue/node_modules/babel-loader/lib/index.js",
      "options": "undefined",
      "ident": "undefined"
    }
  ]
}
    at checkResourceSource (/Users/lyb/Downloads/wcp-front-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/RuleSet.js:167:11)
    at Function.normalizeRule (/Users/lyb/Downloads/wcp-front-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/RuleSet.js:198:4)
    at /Users/lyb/Downloads/wcp-front-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/RuleSet.js:110:20
    at Array.map (<anonymous>)
    at Function.normalizeRules (/Users/lyb/Downloads/wcp-front-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/RuleSet.js:109:17)
    at new RuleSet (/Users/lyb/Downloads/wcp-front-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/RuleSet.js:104:24)
    at new NormalModuleFactory (/Users/lyb/Downloads/wcp-front-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/NormalModuleFactory.js:115:18)
    at Compiler.createNormalModuleFactory (/Users/lyb/Downloads/wcp-front-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:636:31)
    at Compiler.newCompilationParams (/Users/lyb/Downloads/wcp-front-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:653:30)
    at Compiler.compile (/Users/lyb/Downloads/wcp-front-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:661:23)
    at /Users/lyb/Downloads/wcp-front-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/Watching.js:77:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/lyb/Downloads/wcp-front-vue/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:24:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/lyb/Downloads/wcp-front-vue/node_modules/tapable/lib/Hook.js:154:20)
    at Watching._go (/Users/lyb/Downloads/wcp-front-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/Watching.js:41:32)
    at /Users/lyb/Downloads/wcp-front-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/Watching.js:33:9
    at Compiler.readRecords (/Users/lyb/Downloads/wcp-front-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:529:11)
npm ERR! code 1
npm ERR! path /Users/lyb/Downloads/wcp-front-vue
npm ERR! command failed
npm ERR! command sh -c vue-cli-service serve

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/lyb/.npm/_logs/2021-03-10T08_03_23_083Z-debug.log

• 出现错误后小编只能求助度娘，度娘的解决方案如下：

  • 卸载webpack：npm uninstall webpack
  • 重新安装webpack:npm install webpack@4.0.0 --save-dev ，这个时候直接报错，报错信息如下：

  npm ERR! code ERESOLVE
  npm ERR! ERESOLVE unable to resolve dependency tree
  npm ERR! 
  npm ERR! Found: webpack@4.0.0
  npm ERR! node_modules/webpack
  npm ERR!   dev webpack@"4.0.0" from the root project
  npm ERR!   webpack@"^4.0.0" from @vue/cli-plugin-babel@4.5.8
  npm ERR!   node_modules/@vue/cli-plugin-babel
  npm ERR!     dev @vue/cli-plugin-babel@"^4.2.3" from the root project
  npm ERR!   4 more (terser-webpack-plugin, @vue/cli-plugin-eslint, ...)
  npm ERR! 
  npm ERR! Could not resolve dependency:
  npm ERR! peer webpack@"^5.1.0" from compression-webpack-plugin@7.1.2
  npm ERR! node_modules/compression-webpack-plugin
  npm ERR!   compression-webpack-plugin@"^7.1.2" from the root project
  npm ERR! 
  npm ERR! Fix the upstream dependency conflict, or retry
  npm ERR! this command with --force, or --legacy-peer-deps
  npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
  npm ERR! 
  npm ERR! See /Users/lyb/.npm/eresolve-report.txt for a full report.
  
  npm ERR! A complete log of this run can be found in:
  npm ERR!     /Users/lyb/.npm/_logs/2021-03-10T08_16_11_779Z-debug.log
  

  • 上面的报错信息大概意思就是说插件@vue/cli-plugin-babel@4.5.8依赖webpack@"4.0.0"版本，而插件compression-webpack-plugin@7.1.2依赖webpack@"^5.1.0"版本

  问题原因：因为两个插件依赖的webpack包版本不一致导致冲突

解决方案

• 卸载高版本的compression-webpack-plugin插件：npm uninstall compression-webpack-plugin

• 卸载webpack插件：npm uninstall webpack

• 安装低版本的compression-webpack-plugin插件：npm install compression-webpack-plugin@4.0.0

• 重新安装webpack插件：npm install webpack@4.0.0 --save-dev

经过以上步骤之后完美解决问题

总结

在使用脚手架的时候不要过度追求新版本，要考虑不同插件之间对依赖项的版本问题。