javascript - Webpack 模块联合错误 : Cannot read properties of undefined (reading 'call' )

Question

我正在尝试创建最基本的 webpack 模块联邦概念证明示例。
主机应用程序中的 Webpack 配置:

...
  plugins: [
    new ModuleFederationPlugin({
      name: "hostApp",
      remotes: {
        libApp: `libApp@http://localhost:3000/libApp`,
      },
    }),
  ],
...

依赖应用程序中的 Webpack 配置:

...
  plugins: [
    new ModuleFederationPlugin({
      name: "libApp",
      filename: "libApp.js",
      exposes: {
        "./moduleA": "./src/moduleA",
        "./moduleB": "./src/moduleB",
      }
    })
  ],
...

Here is the reproduction repo
这个配置有什么问题？
此外，是否可以设置依赖应用程序来导出包含所有公开模块的单个 js 文件(作为单个 webpack 模块)？

Answer 1

您可以在 hostApp 中创建一个新文件“bootstrap.js”来解决此问题。

// src/bootstrap.js
console.log('host app test')

import moduleA from 'libApp/moduleA'
import moduleB from 'libApp/moduleB'

const el = document.getElementById('hostAppContainer')

el.innerHTML = 'changedContent: ' + moduleA + moduleB

然后将您的 index.js 更改为

// src/index.js

import("./bootstrap");

这是由于尝试在初始入口点进行模块联合造成的，而 webpack 不喜欢你这样做。