Vue 项目升级到 webpack4.x 小纪【附代码】

栏目: 编程工具 · 发布时间: 6年前

内容简介:自 webpack 4.x 发布以来,就独得码农恩宠。我公司的项目是基于 webpack 3.x 版本的 vue 项目, 当时是用 vue-cli 工具构建的项目,项目开发完成后发现打包性能低下,而且项目是多页面的,需要将 打包文件分离,webpack 原有的现将自己的升级过程记录如下,希望能给需要升级 vue 项目的朋友一点参考价值。

自 webpack 4.x 发布以来,就独得 码农 恩宠。我公司的项目是基于 webpack 3.x 版本的 vue 项目, 当时是用 vue-cli 工具构建的项目,项目开发完成后发现打包性能低下,而且项目是多页面的,需要将 打包文件分离,webpack 原有的 CommonsChunkPlugin 插件难以满足需要,想用 SplitChunksPlugin 替换它,于是开始了折磨人的升级过程。

现将自己的升级过程记录如下,希望能给需要升级 vue 项目的朋友一点参考价值。

升级后的代码

第一步:用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 包

由于要升级的包很多,一个个操作起来麻烦,所以建议用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

主要修改 build/webpack.xxx.conf.js 文件

第四步:vue-loader 配置升级

参考官方升级文档从 v14 迁移

主要修改 build/vue-loader.conf.jsbuild/webpack.xxx.conf.js 文件

注意:

  • 去除掉 build/webpack.prod.conf.js 中的 OptimizeCSSPlugin 插件

以上所述就是小编给大家介绍的《Vue 项目升级到 webpack4.x 小纪【附代码】》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

有限与无限的游戏

有限与无限的游戏

[美]詹姆斯·卡斯 / 马小悟、余倩 / 电子工业出版社 / 2013-10 / 35.00元

在这本书中,詹姆斯·卡斯向我们展示了世界上两种类型的「游戏」:「有限的游戏」和「无限的游戏」。 有限的游戏,其目的在于赢得胜利;无限的游戏,却旨在让游戏永远进行下去。有限的游戏在边界内玩,无限的游戏玩的就是边界。有限的游戏具有一个确定的开始和结束,拥有特定的赢家,规则的存在就是为了保证游戏会结束。无限的游戏既没有确定的开始和结束,也没有赢家,它的目的在于将更多的人带入到游戏本身中来,从而延续......一起来看看 《有限与无限的游戏》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具