webpack - 微前端：导入外部遥控器

Question

使用 Webpack 的Module Federation Plugin 进行微前端架构，如何从不同的存储库导入远程？

Answer 1

在主机上，配置主机如：

// webpack.config.js
plugins: [
    new ModuleFederationPlugin({
        remotes: {
            foo: 'foo@http://localhost:3002/remoteEntry.js',
        },
    })
]

// index.js
import('foo/Bar').then(({default: Bar}) => console.log(Bar))

在遥控器上：

output: {
    publicPath: 'http://localhost:3002/', // make sure you run on the specified port
},
plugins: [
    new ModuleFederationPlugin({
        name: 'foo',
        filename: 'remoteEntry.js',
        exposes: {
            './Bar': './src/Bar',
        },
    })
]

您当然会想要配置一些共享依赖项等。我建议通过https://github.com/module-federation/module-federation-examples上的示例

此外，一旦您开始共享一些常见的依赖项，您将希望在应用程序的根目录中使用异步边界。像这个https://github.com/webpack/webpack/blob/master/examples/module-federation/src/index.js