vue2.x-webpack4.x 升级至vue2.x-webpack5.x 全过程

向往自由的码
789 阅读2分钟

概要内容

  • 升级webpack相关插件
  • loader配置调整
  • loader-utils去除，采用webpack5内置接口
  • 总结

1. 升级插件

  1. webpack 和 webpack-cli

    yarn add webpack@latest webpack-cli@latest

  2. 升级插件 和 loader

    yarn add html-webpack-plugin@latest mini-css-extract-plugin@latest css-loader@latest less-loader@latest sass-loader@latest svg-sprite-loader@latest

2. 配置调整

1. loader配置调整

  1. 由于webpack5 内置了资源模块，所以可以直接移除掉一下插件

    yarn remove fileloader url-loader

  2. 采用新配置替换掉原来的位置

    https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a2c47fa90cfb40a0908c41d1064b0dd3~tplv-k3u1fbpfcp-zoom-1.image

2. loader-utils去除，采用webpack5内置接口

  1. 移除loader-utils

    yarn remove loader-utils

  2. 替换接口

    https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0bff811ed01148a8ab5bd878d7fdb8ef~tplv-k3u1fbpfcp-zoom-1.image

3. 关闭@babel/preset-env中内置的pollyfill，使用core-js 3.x

  1. 关闭pollyfill

    https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d43cf2a1c61b4dc3a1c9f5e50799f0fe~tplv-k3u1fbpfcp-zoom-1.image

  2. 使用core-js

    https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/12964473e23240f8ab099b33c7eff422~tplv-k3u1fbpfcp-zoom-1.image

3. 遇到问题

1. Buffer is not defined

https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/82e19519c63541db9952e7a4eb60aa10~tplv-k3u1fbpfcp-zoom-1.image

2. 样式丢失问题

  • 现象：

    https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/814a39539f3347e9bc5d8a2ad843e480~tplv-k3u1fbpfcp-zoom-1.image

    此时出现一种无力感，猜想是loader问题，但是整个项目内容太多，很不好排查问题，所以想到一种解决办法，就是重新搞一个感觉的项目来测试，看看到底是哪个loader出了问题，经过艰苦的一轮测试后，发现是vue-loader问题，更新到15.x的版本就可以了，原因：16.x+ 是针对vue3 代码位置

3. 无法打包问题

  • 效果：

    https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8a412eefcc9e4292baf2722acd20eabc~tplv-k3u1fbpfcp-zoom-1.image

    这错真是报的一点头绪都没有，看下package.json打包命令

    "scripts": {
	"build": "cross-env node build/build.prod.js ENV_TYPE=1 platform=pc",
}

    最值得怀疑的就是cross-env 是不是版本不匹配，去github 看下文档

    https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b4eaa7445bc244079c17f806125918e9~tplv-k3u1fbpfcp-zoom-1.image

    查看本地环境node: v14.14.0 , cross-env: ^5.2.0 ， 走更新cross-env 版本，等更新完后npm run build ，仍然报上面相同的错误。

    看到错误与npm有关，灵机一动：我直接最直接执行命令，webpack --config build/webpack.prod.conf.js，看看能否获取到更多错误信息

    https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c2fd614d3f3541b5af95fd42c15cee8e~tplv-k3u1fbpfcp-zoom-1.image

    提示：devtools 配置已调整，请查看devtool 文档

    https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a7667323bad64de2a61f7cdcccf1f947~tplv-k3u1fbpfcp-zoom-1.image

    直接devtool设置为false，添加SourceMapDevToolPlugin，再次npm run build 打包成功~~~

    https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bb2b2456155242e5bc0eb93280edcb66~tplv-k3u1fbpfcp-zoom-1.image

总结

  • 复杂问题拆成简单问题，才能更快的解决问题（比如：上面碰到的loader问题、npm打包问题，都是把复杂问题化成简单问题，然后获取更多信息后解决掉最后的复杂问题）

参考文献

以上：如发现有问题，欢迎留言指出，我及时更正

avatar
文章
阅读
粉丝