Webpack 模块联合错误：无法读取未定义的属性（读取“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",
      }
    })
  ],
...

这是复制仓库

这个配置有什么问题吗？

此外，是否可以设置依赖项应用程序来导出包含所有公开模块的单个 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 不喜欢你这样做。

Answer 2

我看到了几件事。

1. 我认为

   remotes

   属性作为返回主机应用程序的链接进入依赖应用程序。
2. 同样，我认为您需要在主机应用程序的配置中使用

   filename

   来进行远程访问。
3. 对我来说，将依赖的应用程序直接放在

   src

   目录中而不是在

   src/app

   中，这看起来很奇怪。

Answer 3

我最近也开始从事微前端工作。我的就是这样工作的

项目目录：

项目目录：

基于您所做的事情。事情看起来不错，问题可能是因为项目目录名称。我在这里可能是错的。但是当我工作时，只有在我将文件夹名称命名为 Test（这也是我公开的组件的名称）之后，它才开始集成。虽然看起来很可笑。

shell 的 Webpack 配置：

plugins: [
    new ModuleFederationPlugin({
      name: "shell",
      filename: "remoteEntry.js",
      remotes: {
        Test : 'Test@http://localhost:8081/remoteEntry.js'
      },
      exposes: {},
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
        "@coreui/react": {
          singleton: true,
          requiredVersion: deps["@coreui/react"],
        },
        "@coreui/coreui": {
          singleton: true,
          requiredVersion: deps["@coreui/coreui"],
        },
      },
    }),
    new HtmlWebPackPlugin({
      template: "./src/index.html",
    }),
    new Dotenv()
  ],

对于儿童应用程序：

plugins: [
    new ModuleFederationPlugin({
      name: "Test",
      filename: "remoteEntry.js",
      remotes: {},
      exposes: {
        './Test' : './src/Test'
      },
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
        "@coreui/react": {
          singleton: true,
          requiredVersion: deps["@coreui/react"],
        },
        "@coreui/coreui": {
          singleton: true,
          requiredVersion: deps["@coreui/coreui"],
        },
      },
    }),
    new HtmlWebPackPlugin({
      template: "./src/index.html",
    }),
    new Dotenv()
  ],