webpack 3.X升级 webpack 4.X

背景：

目前公司维护的一个大概两年前开的vue项目，启动老慢了，jenkins发布那更不用说，七八分钟吧也就

先看下本地启动和打包分别耗时

打包：

启动

 另外，jenkins上node居然是6.x版本！！！七八分钟常理之中了那就。

升级后：

启动

  打包

 

 jenkins发布运气好的时候2分多，一般3分多一点

这过程代码打包优化我做的不多，基本就是环境的升级，惊叹webpack4的魔力~ 

 过程

1、先升级webpack ,4.x需要 cli脚手架，一并安装 ，对应的 webpack-dev-server 需要一并升级 

cnpm i  --save-dev webpack@4
cnpm install --save-dev webpack-cli
cnpm i webpack-dev-server@3.10.3

 2、然后就可以启动了，会发现报很多错，其实大部分都是版本号不兼容，看哪个包报错就升级哪个

 列举几个

happypack、copy-webpack-plugin...

npm i happypack@5.0.0 --save-dev 

cnpm i copy-webpack-plugin@5.0.4 --save-dev

cnpm i vue-loader@15.9.1 --save-dev

cnpm i vue-style-loader@4.1.0 --save-dev

cnpm i css-loader@3.4.2 --save-dev 

另外我项目中升级后会有一些问题：

（1）css-loader 升级后不支持minimize

（2）webpack4不支持extract-text-webpack-plugin

（3）升级vue-loader之后会报错，需要配置VueLoaderPlugin    

// webpack-base.config
const VueLoaderPlugin = require('vue-loader/lib/plugin');
plugins:[  new VueLoaderPlugin() ]

  3、针对项目

（1）将webpack.base.config中的gzip压缩移到webpack.prod.config

  (2)  webpack.prod.config mode 设置为 production （webpack4配置参数）

（3）jenkins升级node版本 v10+，配置淘宝镜像 （有升级的包npm下载不下来）

     

npm install -g cnpm --registry=https://registry.npm.taobao.org

基本操作下来，速度明显提升了很多，体积大概减少了6/7M，就是升级包很多语法不兼容比较麻烦，总之，能升级就最好升级~