vue-cli4升级到vue-cli5过程记录

1，前言
2，升级vue-cli
3，升级的部分变化

1，前言

本文主要分享vue-cli从4.x升级到5.x的过程，以及更新后vue.config.js的变化，因为vue-cli 5已经使用上webpack5。

2，升级vue-cli

首先打开命令提示符终端，输入npm uninstall @vue/cli -g，卸载掉4.x的版本，如果是Mac系统，则是sudo npm uninstall @vue/cli -g
然后输入npm install -g @vue/cli@latest，安装最新版本的vue-cli，Mac是sudo npm install -g @vue/cli@latest
这时候，输入vue -V，可以看到终端提示的vue-cli版本号：
```
L:\github>vue -V
@vue/cli 5.0.4
```
这时候，使用vue create xxx，就可以创建一个项目了，过程如下图所示：

3，升级的部分变化

因为vue-cli 5已经使用上webpack5，之前vue.config.js文件的一些webpack的配置是有一些调整的。

css选项下的loaderOptions选项，由之前的pretendData变为了additionalData

css: {
  loaderOptions: {
    sass: {
      // pretendData: '@use "@/themes/element-variables.scss" as *;'
      additionalData: '@use "@/themes/element-variables.scss" as *;'
    }
  }
}

devServer配置中的hotOnly改为hot，默认false，不开启可以不写。
devtool更加严格，可填写的值：传送门

optimize插件变化

plugins: [
  // new webpack.optimize.LimitChunkCountPlugin({
  //  maxChunks: 5, // 重复模块进行合并的最大数量
  //  minChunkSize: 100 // 最小大小
  // })
  // 变成这样
  new webpack.optimize.LimitChunkCountPlugin({
    maxChunks: 5
  }),
  new webpack.optimize.MinChunkSizePlugin({
    minChunkSize: 10000
  })
]