如何快速把 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()
    2.

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

步骤

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

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

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

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

 
   
   
 
    
  
    
    
  
  1.     plugins: [
    2. 
  
    
    
  
  2.         new webpack.optimize.ModuleConcatenationPlugin()
    3. 
  
    
    
  
  3.     ]
    4.

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

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

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

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

错误调试

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

 
   
   
 
    
  
    
    
  
  1.     new webpack.HotModuleReplacementPlugin(),   
    2. 
  
    
    
  
  2.     new FriendlyErrorsPlugin(
    3.

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

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

 
   
   
 
    
  
    
    
  
  1.     new webpack.HotModuleReplacementPlugin(), 
    2. 
  
    
    
  
  2.     new FriendlyErrorsPlugin({
    3. 
  
    
    
  
  3.       onErrors: function (severity, errors) {
    4. 
  
    
    
  
  4.         console.log(errors);
    5. 
  
    
    
  
  5.       }
    6. 
  
    
    
  
  6.     })
    7.

       常见错误也就是 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. 
  
    
    
  
  2.   "name": "w3",
    3. 
  
    
    
  
  3.   "version": "1.0.0",
    4. 
  
    
    
  
  4.   "description": "w3",
    5. 
  
    
    
  
  5.   "author": "yuanxiaolong",
    6. 
  
    
    
  
  6.   "private": true,
    7. 
  
    
    
  
  7.   "scripts": {
    8. 
  
    
    
  
  8.     "dev": "node build/dev-server.js",
    9. 
  
    
    
  
  9.     "start": "node build/dev-server.js",
    10. 
  
    
    
  
  10.     "build": "node build/build.js",
    11. 
  
    
    
  
  11.     "lint": "eslint --ext .js,.vue src"
    12. 
  
    
    
  
  12.   },
    13. 
  
    
    
  
  13.   "dependencies": {
    14. 
  
    
    
  
  14.     "vue": "^2.0.0",
    15. 
  
    
    
  
  15.     "vue-resource": "0.8.0",
    16. 
  
    
    
  
  16.     "vue-router": "^2.0.0",
    17. 
  
    
    
  
  17.     "vuex": "^2.0.0"
    18. 
  
    
    
  
  18.   },
    19. 
  
    
    
  
  19.   "devDependencies": {
    20. 
  
    
    
  
  20.     "autoprefixer": "^7.1.2",
    21. 
  
    
    
  
  21.     "babel-core": "^6.25.0",
    22. 
  
    
    
  
  22.     "babel-loader": "^7.1.1",
    23. 
  
    
    
  
  23.     "babel-plugin-component": "^0.10.0",
    24. 
  
    
    
  
  24.     "babel-plugin-transform-class-constructor-call": "^6.24.1",
    25. 
  
    
    
  
  25.     "babel-plugin-transform-object-assign": "^6.22.0",
    26. 
  
    
    
  
  26.     "babel-plugin-transform-runtime": "^6.23.0",
    27. 
  
    
    
  
  27.     "babel-preset-es2015": "^6.24.1",
    28. 
  
    
    
  
  28.     "babel-preset-stage-2": "^6.24.1",
    29. 
  
    
    
  
  29.     "babel-register": "^6.24.1",
    30. 
  
    
    
  
  30.     "chalk": "^2.1.0",
    31. 
  
    
    
  
  31.     "connect-history-api-fallback": "^1.3.0",
    32. 
  
    
    
  
  32.     "copy-webpack-plugin": "^4.0.1",
    33. 
  
    
    
  
  33.     "css-loader": "^0.28.0",
    34. 
  
    
    
  
  34.     "cssnano": "^3.10.0",
    35. 
  
    
    
  
  35.     "eventsource-polyfill": "^0.9.6",
    36. 
  
    
    
  
  36.     "express": "^4.14.1",
    37. 
  
    
    
  
  37.     "extract-text-webpack-plugin": "^3.0.0",
    38. 
  
    
    
  
  38.     "file-loader": "^0.11.1",
    39. 
  
    
    
  
  39.     "friendly-errors-webpack-plugin": "^1.1.3",
    40. 
  
    
    
  
  40.     "html-webpack-inline-source-plugin": "0.0.9",
    41. 
  
    
    
  
  41.     "html-webpack-plugin": "^2.30.1",
    42. 
  
    
    
  
  42.     "http-proxy-middleware": "^0.17.3",
    43. 
  
    
    
  
  43.     "less": "^2.7.2",
    44. 
  
    
    
  
  44.     "less-loader": "^4.0.5",
    45. 
  
    
    
  
  45.     "opn": "^5.1.0",
    46. 
  
    
    
  
  46.     "optimize-css-assets-webpack-plugin": "^2.0.0",
    47. 
  
    
    
  
  47.     "ora": "^1.3.0",
    48. 
  
    
    
  
  48.     "path": "^0.12.7",
    49. 
  
    
    
  
  49.     "rimraf": "^2.6.1",
    50. 
  
    
    
  
  50.     "semver": "^5.3.0",
    51. 
  
    
    
  
  51.     "shelljs": "^0.7.8",
    52. 
  
    
    
  
  52.     "uglifyjs-webpack-plugin": "^1.0.0-beta.2",
    53. 
  
    
    
  
  53.     "url-loader": "^0.5.8",
    54. 
  
    
    
  
  54.     "vue-loader": "^12.2.2",
    55. 
  
    
    
  
  55.     "vue-style-loader": "^3.0.1",
    56. 
  
    
    
  
  56.     "vue-template-compiler": "^2.4.2",
    57. 
  
    
    
  
  57.     "webpack": "^3.5.3",
    58. 
  
    
    
  
  58.     "webpack-bundle-analyzer": "^2.2.1",
    59. 
  
    
    
  
  59.     "webpack-dev-middleware": "^1.12.0",
    60. 
  
    
    
  
  60.     "webpack-hot-middleware": "^2.18.2",
    61. 
  
    
    
  
  61.     "webpack-merge": "^4.1.0"
    62. 
  
    
    
  
  62.   },
    63. 
  
    
    
  
  63.   "engines": {
    64. 
  
    
    
  
  64.     "node": ">= 4.0.0",
    65. 
  
    
    
  
  65.     "npm": ">= 3.0.0"
    66. 
  
    
    
  
  66.   },
    67. 
  
    
    
  
  67.   "browserslist": [
    68. 
  
    
    
  
  68.     "last 11 ios versions"
    69. 
  
    
    
  
  69.   ]
    70. 
  
    
    
  
  70. }
    71.



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

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

▼


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

vue webpack3 升级webpack4

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

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

webpack3新特性介绍

webpack3新特性简介

webpack3新特性简介