ModuleFederationPlugin

​ModuleFederationPlugin​ 允许一个构建在运行时提供或使用其他独立构建的模块。

const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      // options' typings in typescript
      runtime: string | false,
    }),
  ],
};

Options

runtime

用指定的名称创建一个新的运行时块。

webpack.config.js

const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      runtime: 'my-runtime-name',
    }),
  ],
};

Specify package versions

有三种方法可以指定共享库的版本。

Array syntax

该语法允许您仅使用包名共享库。这种方法对原型设计很好，但它不允许您扩展到大型生产环境，因为 ​react​ 和 ​react-dom​ 等库将需要额外的需求。

const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      // adds lodash as shared module
      // version is inferred from package.json
      // there is no version check for the required version
      // so it will always use the higher version found
      shared: ['lodash'],
    }),
  ],
};

Object syntax

此语法为您提供了对每个共享库的更多控制，您可以将包名定义为密钥，将版本(semver)定义为值。

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      shared: {
        // adds lodash as shared module
        // version is inferred from package.json
        // it will use the highest lodash version that is >= 4.17 and < 5
        lodash: '^4.17.0',
      },
    }),
  ],
};

Object syntax with sharing hints

此语法允许您为每个共享包提供额外的提示，其中将包名称定义为键，并将值定义为包含修改共享行为提示的对象。

const deps = require('./package.json').dependencies;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      shared: {
        // adds react as shared module
        react: {
          requiredVersion: deps.react,
          singleton: true,
        },
      },
    }),
  ],
};

Sharing hints

eager

​boolean​

这个提示将允许webpack直接包含提供的和回退模块，而不是通过异步请求获取库。换句话说，这允许在初始块中使用这个共享模块。此外，请注意，当启用此提示时，所有提供的模块和回退模块将始终被下载。

import

​false | string​

应该放在共享作用域中的所提供的模块。如果在共享范围内没有找到共享模块或版本无效，则此提供的模块还充当回退模块。(此提示的值默认为属性名。)

packageName

​string​

用于从描述文件确定所需版本的包名。只有当不能从请求中自动确定包名时才需要这样做。

requiredVersion

​false | string​

所需的软件包版本。

shareKey

​string​

请求的共享模块在这个键下从共享作用域查找。

shareScope

​string​

共享作用域的名称。

singleton

​boolean​

这个提示只允许在共享作用域中使用一个版本的共享模块(默认禁用)。一些库使用全局内部状态(例如react, react-dom)。因此，一次只运行一个库实例是至关重要的。

strictVersion

​boolean​

这个提示允许webpack在版本不合法的情况下拒绝共享模块(当本地回退模块可用且共享模块不是单例时默认为true，否则为false，如果没有指定所需的版本则不起作用)。

version

​false | string​

所提供模块的版本。它允许webpack替换低匹配版本，但不能替换高匹配版本。

Additional examples

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      // adds vue as shared module
      // version is inferred from package.json
      // it will always use the shared version, but print a warning when the shared vue is < 2.6.5 or >= 3
      shared: {
        vue: {
          requiredVersion: '^2.6.5',
          singleton: true,
        },
      },
    }),
  ],
};

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      // adds vue as shared module
      // there is no local version provided
      // it will emit a warning if the shared vue is < 2.6.5 or >= 3
      shared: {
        vue: {
          import: false,
          requiredVersion: '^2.6.5',
        },
      },
    }),
  ],
};

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      // adds vue as shared module
      // there is no local version provided
      // it will throw an error when the shared vue is < 2.6.5 or >= 3
      shared: {
        vue: {
          import: false,
          requiredVersion: '^2.6.5',
          strictVersion: true,
        },
      },
    }),
  ],
};

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      shared: {
        'my-vue': {
          // can be referenced by import "my-vue"
          import: 'vue', // the "vue" package will be used as a provided and fallback module
          shareKey: 'shared-vue', // under this name the shared module will be placed in the share scope
          shareScope: 'default', // share scope with this name will be used
          singleton: true, // only a single version of the shared module is allowed
          strictVersion: true, // don't use shared version when version isn't valid. Singleton or modules without fallback will throw, otherwise fallback is used
          version: '1.2.3', // the version of the shared module
          requiredVersion: '^1.0.0', // the required version of the shared module
        },
      },
    }),
  ],
};

Further Reading

• Module Federation