升级vue-cli、qiankun应用—— 第一步、升级webpack5

故事由来

老大：突然兴起，那个我们现在那些vue-cli构建的项目能不能使用webpack5进行构建，后面可以应用联邦模块进行函数复用，父应用组件共享给子应用等。

我：。。。这个，应该可以吧

从何下手

毕竟之前用的是vue-cli构建的项目，我还是本着不大改的情况下先去了解下vue-cli支持webpack5嘛

很好，可以看出vue-cli@5.0开始支持了

那试试？

$ yarn add @vue/cli-plugin-babel@next @vue/cli-plugin-eslint@next @vue/cli-service eslint@next eslint-plugin-vue@next -D

很好，经过包的升级我们，我直接进行build 和 serve 发现毫无问题，nice啊。

如何验证是webpack5？

由于我们项目使用的qiankun进行的微前端开发，所以我将主和子应用都升级后。在启动子应用的时候出现了这样的错误

很好、总算有错了

去webpack5查询一波

nice、确实是webpack5

当然。。。我们直接看cil-service也可以知道

附上修改子应用的配置

...
output: {
    // 把子应用打包成 umd 库格式
    library: `${name}-[name]`,
    libraryTarget: 'umd',
    // - jsonpFunction: `webpackJsonp_${name}`,
    // + chunkLoadingGlobal: `webpackJsonp_${name}`,
    chunkLoadingGlobal: `webpackJsonp_${name}`,
},
...