自 webpack 4.x 发布以来, 就独得码农恩宠. 我公司的项目是基于 webpack 3.x 版本的 vue 项目, 当时是用 vue-cli 工具构建的项目, 项目开发完成后发现打包性能低下, 而且项目是多页面的, 需要将 打包文件分离, webpack 原有的 CommonsChunkPlugin 插件难以满足需要, 想用 SplitChunksPlugin 替换它, 于是开始了折磨人的升级过程.
现将自己的升级过程记录如下, 希望能给需要升级 vue 项目的朋友一点参考价值.
升级后的代码 https://github.com/linghuam/test/tree/master/vue-webpack4-v2
第一步: 用 https://www.npmjs.com/package/vue-cli 工具创建一个简单的 vue webpack 项目
vue init webpack vue-webpack4-v2
复制代码
打开 package.json 文件, 查看 webpack 版本信息, 发现 webpack 还是 3.x 版本
- "webpack": "^3.6.0",
- "webpack-bundle-analyzer": "^2.9.0",
- "webpack-dev-server": "^2.9.1",
- "webpack-merge": "^4.1.0"
复制代码
第二步: 升级 npm 包
由于要升级的包很多, 一个个操作起来麻烦, 所以建议用 https://www.npmjs.com/package/npm-check 工具来检查和更新包版本.
由于手动更新太麻烦, 可以运行 npm-check -u 命令批量更新 npm 包
需新增的包:
- "webpack-cli": "^3.1.0"
- "mini-CSS-extract-plugin": "^0.4.1"
需删除的包 (webpack 配置中引用该包的插件也要删除):
- "extract-text-webpack-plugin": "^3.0.0"
- "uglifyjs-webpack-plugin": "^1.1.1"
- "optimize-css-assets-webpack-plugin": "^5.0.0"
注意:
"eslint": "^5.3.0" 版本号不宜太高, 改成 "^4.0.0"
第三步: webpack 配置升级
参考官方升级文档 To v4 from v3 https://webpack.js.org/migrate/4/
主要修改
build/webpack.xxx.conf.js
文件
第四步: vue-loader 配置升级
参考官方升级文档 从 v14 迁移 https://vue-loader.vuejs.org/zh/migrating.html#值得注意的不兼容变更
主要修改
build/vue-loader.conf.js
和
build/webpack.xxx.conf.js
文件
注意:
去除掉
build/webpack.prod.conf.js
中的 OptimizeCSSPlugin 插件
总结
经过上面四步, 基本上能将项目成功运行了, 但自己能力有限, 有些配置的原理也似懂非懂, 但成长的过程就是要敢于不断的 失败和尝试, 这样才能一步步从陌生到熟悉. 正所谓 "路漫漫其修远兮, 吾将上下而求索".
参考
Vue 项目升级到 Webpack 4.x 初步踩坑总结 https://blog.csdn.net/harsima/article/details/80819747
Vue Cli 3.0 已发布, 采用 webpack 4.x, 再也不用自己升级了 https://cli.vuejs.org/
来源: https://juejin.im/post/5b72b312518825611f2e2a89