roadhog build dll时的一个bug(can’t resolve ‘fs’)的解决过程

过程:

  • 问题出现:引入npm install @svgr/webpack 插件后无法build dll,报错can’t resolve ‘fs’
  • 问题分析:webpack build的时候肯定是build不正确的pkg,这个pkg是node环境下使用的
  • 搜索:baidu之,一看就不靠谱,换google,发现其他包(出了roadhog)也有这个问题,解决放在是在webpack配置中加入node:{fs:’empty’},意义是解析到fs时给个空对象
  • 使用上述方法解决生产时问题

  • 继续分析问题的根源:不正确的包引入了,调试对应的webpack config,发现@svgr/webpack在build dll的entry中,大概率是这个不对
  • 在webpack config中filter掉这个entry,bug消失,问题成功定位
  • 接下来看这个entry如何生成,查看roadhog源码,buildDll.js,发现其配置中的entry是读取package.json的dependencies然后处理include和exclude之后内容,所以最终的解决方式是把package.json的dependencies中的@svgr/webpack移到devDependencies中
  • 启示:
    • npn install –save 和 npm install –save-dev的时候需要规范
    • roadhog这个属于坑,需要完善文档