qiankun vue子应用升级webpack5问题记录

升级的方式是使用最新版本的 vue-cli 脚手架，重新创建一个新项目，然后复制 @vue/cli-xxx , vue 相关依赖最新版本到子应用项目 -> 核对babel, eslint相关配置的变化 -> 重新安装依赖，处理出现的相各种异常情况 -> 启动项目检查功能是否正常。

本次升级主要是为了使用 webpack5。

以下是记录的遇到的各种问题（不只包含webpack5的问题）。

configuration.output has an unknown property 'jsonpFunction'.

qiankun子应用需要按照官方文档进行webpack配置。

module.exports = {
  output: {
    library: `${packageName}-[name]`,
    libraryTarget: 'umd',
    jsonpFunction: `webpackJsonp_${packageName}`,
  }
};

以上示例中的 jsonpFunction 配置在 webpack5 中已经被删除，替换为 chunkLoadingGlobal,它们的作用都是提供一个唯一的名称。

module.exports = {
  output: {
    library: `${name}-[name]`,
    libraryTarget: 'umd',
    chunkLoadingGlobal: `webpackJsonp_${name}` // 替换配置
  }
};

options has an unknown property 'overlay'. | options has an unknown property 'disableHostCheck'.

webpack5 中 devServer.overlay 调整为 devServer.client.overlay。

webpack5 中 devServer.disableHostCheck 移除，使用 devServer.allowedHosts 替换。

ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.options has an unknown property 'plugins'.

webpack5 中 postcss-loader 配置调整，增加一层 postcssOptions。

eslint 相关错误

更新了 eslint 依赖包版本，eslint规则发生变化，会出现一些错误提示。按照提示进行修改或者调整规则。

Cannot GET /cooperation/board

主应用载入子应用资源时，找不到子应用资源。

在分析原因的过程中，并没有在 webpack5 的配置中找到原因，考虑到使用的是 vue-cli 脚手架，然后脚手架使用的 webpack5 , 所以搜索了 vue-cli的改动记录。

在这个PR中找到了原因。 https://github.com/vuejs/vue-cli/pull/6162

this PR will restrict request headers of historyApiFallback only work with [ 'text/html', 'application/xhtml+xml']

qiankun加载子应用时发起的fetch请求，且请求头里面没有 text/html 等header。所以historyApiFallback 配置对它无效。而本项目又是 history 模式路由，所以带路由 /xxx/xxx 过来请求，就会 404.

修改方案为自己传入historyApiFallback 配置.

    historyApiFallback: {
      index: '/xxx/index.html' // xxx为路径，和打包output配置有关
    },

Invalid options in vue.config.js: "css.requireModuleExtension" is not allowed

此问题为 vue-cli 升级导致的。

有个微应用使用了 css modules 方案，配置了 在 vue.config.js 中配置了 css.requireModuleExtension ，而该字段在 V5 版本中已经移除。https://github.com/vuejs/vue-cli/issues/6607 。用以下 css-loader配置来替代。

module.exports = {
  css: {
    loaderOptions: {
      css: {
        modules: {
          auto: () => true
        }
      }
    }
  }
}

less版本升级导致除法写法未转换

此问题是 less 版本升级导致。

有个微应用 less版本由 3.x 升级到 4.x 后，发现样式有问题。 后定位发现 padding: @m-gap / 2 @m-gap; 转换为了 padding: 16px / 2 16px，除法未做计算。

其原因是 https://less.bootcss.com/usage/#lessjs-options-math , 4.x 中修改了math的默认配置。 (@m-gap / 2) 或者 (@m-gap ./ 2) 才会默认转换。