微前端qiankun-从webpack4升级到webpack5配置

最近在对微前端qiankun项目进行webpack4升级，从webpack4升级到webpack5。

子项目升级到webpack5后单独运行正常，接入到主工程后，主工程就开始各种报错了。我把遇到的问题和如何配置进行一下总结。

1、第一个问题是子项目跨域问题：

主应用 http://localhost:3000 ， 微应用 http://localhost:5001 这个在子项目的webpack.config.js配置中给本地服务增加允许跨域配置：

module.exports = {
  devServer: {
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
  },
};

2、Uncaught ChunkLoadError:Loading chunk failed

解决完跨域页面仍然是挂的，报如下错误：

翻阅了很多文章后发现导致这个问题的原因是我们微应用使用了react的懒加载loadable组件，导致在进入到主应用页面后按需加载的页面依赖js前缀地址还是主应用的

【解决方案】使用 webpack 运行时 publicPath 配置

qiankun官方说明如下：qiankun.umijs.org/zh/faq#a-%E…

runtime publicPath 主要解决的是微应用动态载入的 脚本、样式、图片 等地址不正确的问题。

【具体配置】 在子项目中创建ts文件 src/public-path.ts

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

export {}

ts类型声明

declare interface Window {
  __INJECTED_PUBLIC_PATH_BY_QIANKUN__: any;
}
declare let __webpack_public_path__;

在src/index.tsx中import该文件即可

import './public-path';

export async function bootstrap() {
  console.log('react app bootstraped');
}

export async function mount(props) {
  ReactDOM.render(<App />, props.container ? props.container.querySelector('#root') : document.getElementById('root'));
}

3、webpack打包output配置

const packageName = require('./package.json').name;

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

4、部署

部署node启动服务时也需要配置允许跨域： node/server.js

app.all("*",function(req,res,next){
  res.header("Access-Control-Allow-Origin","*");
  next();  
})