Webpack 模块联合

Question

我正在尝试配置一个简单的模块联合，如下所示。

webpack.config1

new ModuleFederationPlugin({
        name: "Picture",
        filename: "entryPoint.js",
        exposes: {
          "./Gallery": "./mySrc/components/Gallery.js",
        },
      }),

index.js

import("Picture/Gallery").then((comp) => {
  console.log(comp);
});

Gallery.js

export default 3;

webpack.config2

new ModuleFederationPlugin({
    name: "Consumer",
    filename: "entryPoint.js",
    remotes: {
      Picture: "Gallery@http://localhost:3000/entryPoint.js",
    },
  }),

我收到这条消息：

entryPoint.js":1 Uncaught (in promise) ScriptExternalLoadError: Loading script failed. (missing: http://localhost:3000/entryPoint.js) while loading "./Gallery" from webpack/container/reference/Picture at Object.webpack/container/reference/Picture (entryPoint.js":1) at webpack_require (bootstrap:24) at handleFunction (remotes loading:33) at remotes loading:52 at Array.forEach () at Object.webpack_require.f.remotes (remotes loading:15) at ensure chunk:6 at Array.reduce () at Function.webpack_require.e (ensure chunk:5) at Function.fn.e (hot module replacement:81)

Answer 1

您在 webpack.config2 中的导入似乎有误。在 webpack.config1 中，您在名称 Picture 下定义了您的应用程序。所以 webpack.config2 应该是这样的：

new ModuleFederationPlugin({
  name: "Consumer",
  filename: "entryPoint.js",
  remotes: {
    Picture: "Picture@http://localhost:3000/entryPoint.js",
  },
}),

Answer 2

最近的angular-cli/webpack,

稍作修改

new ModuleFederationPlugin({
  name: "Consumer",
  filename: "entryPoint.js",
  remotes: {
    Picture: "http://localhost:3000/entryPoint.js",
  },
}),

js元信息前不需要给图片URL.

Webpack 模块联合

Webpack module federation

webpack

webpack-5

webpack-module-federation