升级 webpack5

新建的项目升级脚手架vue-cli到5.X版本，创建后的项就是使用的webpack5

npm install -g @vue/cli@next
OR
yarn global add @vue/cli@next

升级后可以通过下面的命令查看：

vue -V（大写的V）

创建脚手架的时候会报错报错，内容如下:

~/.vuerc may be outdated. Please delete it and re-run vue-cli in manual mode

解决办法找到本地用户的目录C盘 找到一个.vuerc 的文件删掉就可以了

 旧项目升级webpack5

在项目根目录执行下面的命令：

vue upgrade --next

如图所是所有相关的脚手架的包都会升级到5.X版本，如图所示：

 相关依赖升级后启动打包的时候会抱一些错误：

错误1、

ERROR  ValidationError: Progress Plugin Invalid Options

        options should NOT have additional properties
        options should NOT have additional properties
        options should NOT have additional properties
        options should pass "instanceof" keyword validation
        options should match exactly one schema in oneOf

该错误是由于vue-cli5新添加依赖"register-service-worker"导致的，安装这个依赖并且需要根目录添加文件registerServiceWorker.js，内容如下：

/* eslint-disable no-console */

import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready () {
      console.log(
        'App is being served from cache by a service worker.\n' +
        'For more details, visit https://goo.gl/AFskqB'
      )
    },
    registered () {
      console.log('Service worker has been registered.')
    },
    cached () {
      console.log('Content has been cached for offline use.')
    },
    updatefound () {
      console.log('New content is downloading.')
    },
    updated () {
      console.log('New content is available; please refresh.')
    },
    offline () {
      console.log('No internet connection found. App is running in offline mode.')
    },
    error (error) {
      console.error('Error during service worker registration:', error)
    }
  })
}

错误2

ERROR in ./src/views/test/index.vue
Module build failed (from ./node_modules/@vue/vue-loader-v15/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined

vue-template-compiler版本低导致的，升级到最新就行了

错误3

ERROR  ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
         - options has an unknown property 'overlay'. These properties are valid:
ddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, static?, watchFiles?, webSocketServer? }

配置中的属性配置错误，没啥用注释了，或者查看一下官网更换新的配置。上面中报错的这个属性应该配置成如下的代码：

devServer: {
    client: {
      reconnect: false,
    },
  },
//多了一层client

错误4

升级后相应的使用到了loader，plugin等也需要升级根据错误提示哪个报错升级哪个（还不如新建一个脚手架往里拽）

还有一种方式升级webpack5就是将项目不当作一个vue项目去掉所有的vue-cli相关的依赖包，然后通过安装和运行webpack以及各种相关的loader，plugin等对项目进行打包，这个还没折腾出来。