使用webpack-5的libraryTarget：window时出现问题

如何解决使用webpack-5的libraryTarget：window时出现问题

我正在使用单一spa创建我的应用程序。 加载微前端应用程序时，我没有使用SystemJS，如下所示：

export const runScript = async (url: string) => {
  return new Promise((resolve,reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.onload = resolve;
    script.onerror = reject;

    const firstScript = document.getElementsByTagName('script')[0];
    (firstScript as any).parentNode.insertBefore(script,firstScript);
  });
};

const loadApp = async (appPath: string) => {
  try {
    await runScript(`/${appPath}/index.js`);
    console.log(appPath,'=',(window as any)[appPath]);
  } catch {
    console.log("load child app's javascript file error。");
  }
  return (window as any)[appPath];
};

singleSpa.registerapplication({
  name: 'app1',app: () => loadApp('app1'),activeWhen: '/app1,customProps: {
  },});

因此，我在app1的webpack配置中使用了libraryTarget:'window' 。

devServer: {
  //...
  libraryTarget:'window'
},

当我使用webpack4时，效果很好。

但是当我将webpack更新为webpack-5时，似乎出现了问题，由webpack生成的输出代码无法为window对象设置正确的值。

webpack-4： works fine at webpack-4

webpack-5： nothing in the object

这是webpack-5的问题吗？

解决方法

我个人将webpack5用于单个spa角组件。我有umd作为libraryTarget

 "customWebpackConfig": {
     "path": "./extra-webpack.config.js","libraryName": "mylib","libraryTarget": "umd"
 }

https://github.com/milobella/application-web/blob/master/spa-menu/angular.json#L36-L37

加载脚本时，我的应用程序位于window下 https://github.com/milobella/application-web/blob/master/portal/src/main.ts#L9