webpack4 升级 webpack5

背景

      项目用的 webpack4 打包的，因为趋于稳定所以没有更新基础依赖，但是最近 build 镜像时发现错误 

npm ERR! notarget No matching version found for @webassemblyjs/helper-numbers@1.11.3.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2022-07-25T01_12_24_906Z-debug-0.log

      粗看这个错误的原因是找不到 npm 包 webassemblyjs 1.11.3 这个包。开始找对应的 issue https://github.com/xtuc/webassemblyjs/issues/1132。固定 webassemblyjs 依赖后又遇到了一个问题 https://github.com/fb55/htmlparser2/issues/1237。这些问题导致不得不把 webpack4 升级到 webpack5

升级

pr 地址 https://github.com/longhorn/longhorn-ui/pull/522 ，升级的过程还是比较顺利的唯一就两个坑

1. HtmlWebpackPlugin 需要单独配置下 scriptLoading 和 inject，因为inject 现在默认是 header，scriptLoading 默认是 defer（因为的样式依赖于一些 antd

的样式所以我需要它同步加载进来）
2. 我写 less 引入的方式太过老旧需要单独配置以下 loader.

 

总结

PR 仅供参考，因为我这个项目比较简单需求的配置也比较少。部分配置也是在文档里找的 https://webpack.docschina.org/loaders/。
如果我这个 PR 对你有帮助请赏个小星星 https://github.com/longhorn/longhorn-ui