如何快速把 Vue 项目升级到 webpack3

Posted 大转转FE

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何快速把 Vue 项目升级到 webpack3相关的知识,希望对你有一定的参考价值。

       由于 webpack3升级后,新增了 Scope Hositing(作用域提升) 功能,据说是对 js的性能提升很大。因此,我们做了一个测试对比,就是 webpack3和 webpack1/2 的性能对比,如下:

测试目标

       以下数据是2天随机时段3部手机各2组数据,每组数据都是30次取平均值,为了测试js的解析能力,排除了网络请求的影响

  • 平台:M5 Note Build/MRA58K

  • 系统:android 6.0

时间 before after
2017-08-10 13:00 920 511
2017-08-11 11:10 915 543

平均提升:42.55%

  • 平台:MI 3C Build/KTU84P

  • 系统:Android 4.4.4

时间 before after
2017-08-13 15:00 648 365
2017-08-14 17:10 648 377

平均提升:42.74%

  • 平台:SM901 Build/MXB48T

  • 系统:Android 6.0.1

时间 before after
2017-08-13 18:00 593 393
2017-08-14 15:50 575 392

平均提升:32.75%

       以上数据,提升比例虽然有所差距,但是,最后的结果,都表明......你应该毫不犹豫的升级你的 webpack了。

       问题来了,如何能快速且平滑的升级你的 webpack呢?这是我们今天的重点,前面都是铺垫,哈哈

升级webpack3

       今天只以 vue项目来举例, vue-cli升级 w3简直不要太快哦,而且也有项目上线成功了,并且线上测试与本地测试结果基本一致。如果使用的是 react项目,用的又是脚手架的话,那么恭喜你,跟 vue-cli一样快,可参考 vue-cli的升级方式,如果你自己写的 w2的话加一个配置(可以体验跟 vue-cli一样的升级体验哦),然后升级相应扩展:

 
   
   
 
  1. new webpack.optimize.ModuleConcatenationPlugin()

       如果是自己写的 w1的话,对不起,你只能去哭着对比 w3和 w1的语法兼容修改配置文件了,网上有详细的语法对比,这里就不详述了

步骤

  • 下载最新的的 vue-cli,初始化一个新项目 tow3

  • 把你的 src 目录下的业务代码拷贝到新建的 tow3 项目中 src 路径替换了

  • 把 config/index.js 更细成你自己项目的,这里需要注意的是, webpack3此文件的配置和 webpack12都不太一样,所以仔细比对,只修改一样的配置项

  • 在 build/webpack.prod.conf.js 配置里文件里的加上如下配置,这是 webpack3升级的最核心功能(加在这个文件时因为我生产环境不需要),如果本身打包策略做了优化,那么就需要对造 webpack3的最新语法进行修改迁移了

 
   
   
 
  1.    plugins: [

  2.        new webpack.optimize.ModuleConcatenationPlugin()

  3.    ]

  • npm run dev & npm run build 缺什么包就装什么包,如图 

       然后,就是辣么简单,ok了

       壮士,请留步。。。其实还有

       每个人安装过程中都可能遇到不同的错,甚至是不显示错误信息,让人蛋疼又心碎,辣么如何进行科学的报错呢?其实很简单,如下

错误调试

       在 build/webpack.dev.conf.js 里有自带错误调试的插件

 
   
   
 
  1.    new webpack.HotModuleReplacementPlugin(),  

  2.    new FriendlyErrorsPlugin(

       但它并不能满足我们,我升级过程中就发现,很多bug只出现了个 error,不出现错误信息,这让我如何调试啊,臣妾完全做不到啊

       我们只需要修改一行配置:

 
   
   
 
  1.    new webpack.HotModuleReplacementPlugin(),

  2.    new FriendlyErrorsPlugin({

  3.      onErrors: function (severity, errors) {

  4.        console.log(errors);

  5.      }

  6.    })

       常见错误也就是 npm包版本不匹配,升级最新的包就行,推荐工具 npm-check,批量检查更新,简直不要太好用

       不过凡事都有例外,错误也一样,升级过程中遇到了如下错误: 


       翻墙搜了半天,发现是 "vue":"^2.3.4" 版本对应的 vue-loader版本不对,最好是 >vue-loader@^7.0.0&&<vue-loader@^12.0.0

       所以,剩下很大一部分错误就是框架和编译器的版本对应问题的锅了,多翻墙,多google,让一切难题变得不难。

       哈哈,有了这些就算再狡猾的妖精,也逃不过老孙的金箍棒了。

       好了,请开始你的表演吧。

最后

       赠送一份 package.json的配置,此配置乃最终兼容版,eslint好烦,我把它注释了,目前已上线,运行良好

 
   
   
 
  1. {

  2.  "name": "w3",

  3.  "version": "1.0.0",

  4.  "description": "w3",

  5.  "author": "yuanxiaolong",

  6.  "private": true,

  7.  "scripts": {

  8.    "dev": "node build/dev-server.js",

  9.    "start": "node build/dev-server.js",

  10.    "build": "node build/build.js",

  11.    "lint": "eslint --ext .js,.vue src"

  12.  },

  13.  "dependencies": {

  14.    "vue": "^2.0.0",

  15.    "vue-resource": "0.8.0",

  16.    "vue-router": "^2.0.0",

  17.    "vuex": "^2.0.0"

  18.  },

  19.  "devDependencies": {

  20.    "autoprefixer": "^7.1.2",

  21.    "babel-core": "^6.25.0",

  22.    "babel-loader": "^7.1.1",

  23.    "babel-plugin-component": "^0.10.0",

  24.    "babel-plugin-transform-class-constructor-call": "^6.24.1",

  25.    "babel-plugin-transform-object-assign": "^6.22.0",

  26.    "babel-plugin-transform-runtime": "^6.23.0",

  27.    "babel-preset-es2015": "^6.24.1",

  28.    "babel-preset-stage-2": "^6.24.1",

  29.    "babel-register": "^6.24.1",

  30.    "chalk": "^2.1.0",

  31.    "connect-history-api-fallback": "^1.3.0",

  32.    "copy-webpack-plugin": "^4.0.1",

  33.    "css-loader": "^0.28.0",

  34.    "cssnano": "^3.10.0",

  35.    "eventsource-polyfill": "^0.9.6",

  36.    "express": "^4.14.1",

  37.    "extract-text-webpack-plugin": "^3.0.0",

  38.    "file-loader": "^0.11.1",

  39.    "friendly-errors-webpack-plugin": "^1.1.3",

  40.    "html-webpack-inline-source-plugin": "0.0.9",

  41.    "html-webpack-plugin": "^2.30.1",

  42.    "http-proxy-middleware": "^0.17.3",

  43.    "less": "^2.7.2",

  44.    "less-loader": "^4.0.5",

  45.    "opn": "^5.1.0",

  46.    "optimize-css-assets-webpack-plugin": "^2.0.0",

  47.    "ora": "^1.3.0",

  48.    "path": "^0.12.7",

  49.    "rimraf": "^2.6.1",

  50.    "semver": "^5.3.0",

  51.    "shelljs": "^0.7.8",

  52.    "uglifyjs-webpack-plugin": "^1.0.0-beta.2",

  53.    "url-loader": "^0.5.8",

  54.    "vue-loader": "^12.2.2",

  55.    "vue-style-loader": "^3.0.1",

  56.    "vue-template-compiler": "^2.4.2",

  57.    "webpack": "^3.5.3",

  58.    "webpack-bundle-analyzer": "^2.2.1",

  59.    "webpack-dev-middleware": "^1.12.0",

  60.    "webpack-hot-middleware": "^2.18.2",

  61.    "webpack-merge": "^4.1.0"

  62.  },

  63.  "engines": {

  64.    "node": ">= 4.0.0",

  65.    "npm": ">= 3.0.0"

  66.  },

  67.  "browserslist": [

  68.    "last 11 ios versions"

  69.  ]

  70. }



——————————————————

长按二维码,关注大转转FE


以上是关于如何快速把 Vue 项目升级到 webpack3的主要内容,如果未能解决你的问题,请参考以下文章

vue webpack3 升级webpack4

老vue项目webpack3升级到webpack5全过程记录

旧版vue-cli脚手架Webpack3项目如何升级Webpack4

webpack3新特性介绍

webpack3新特性简介

webpack3新特性简介