01前端/webpack - Module Federation

  • 更新时间：2022-05-07 05:57
  • 创建时间：2022-05-07 05:55

Module Federation allows a JavaScript application to dynamically load code from another application and in the process, share dependencies.

e.g.: Let application A use the Component1 of application B. Module Federation can make the Component1 like an independent resource and application A and application B use the same one.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// A
new ModuleFederationPlugin({
  name: "appA",
  remotes: {
    appB: "appB",
  },
  shared: ["react", "react-dom"],
});

// B
new ModuleFederationPlugin({
  name: "appB",
  filename: "remoteEntry.js",
  exposes: {
    Component1: "./src/Component1",
  },
  shared: ["react", "react-dom"],
});

See: