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) 纔會默認轉換。