svg-sprite-loader和webpack5

记录一次依赖版本不统一导致的问题

• 新建的项目使用的是vuecli@5

• 里面使用的webpack也是5.xx版本以上

• 从旧项目拷来了svg-sprite-loader，packjson版本，4.3.2版本

• 然后安装依赖

• icons组件如图显示

• 之后运行报错了（提示我 Error: Cannot find module 'webpack/lib/RuleSet'）

• 一脸懵逼

• 开始百度（结果都是卸载vueCli@5，安装vuecli@4），无法解决我项目问题

• 然后查看github，webpack的releases，查看RuleSet

• 发现webpack5，已经重写了RuleSet，改为RuleSetCompiler

• 想通过webpack的issue解决问题的途径已经走不通了

• 转向svg-sprite-loader的github，在issue搜索RuleSet Webpack 5: Cannot find module 'webpack/lib/RuleSet' · Issue #437 · JetBrains/svg-sprite-loader (github.com)

• 找到了解决方案，svg-sprite-loader已经在5.2.1版本解决了bug

• 看了下自己的版本，在4.3.2，蠢哭自己，赶紧更新，问题解决

总结

百度只能帮你解决简单问题，github才是世界的尽头。

彩蛋

1. 这个问题，可以通过复制webpack4中的lib/RuleSet.js到webpack5的webpack的lib里面解决，但是，不适合团队，所以拉闸。
2. 看了svg-sprite-loader的解决webpack5和webpack4的方案。（只能说被迫升级）