Micro-Frontend Architecture
- Introduces in Webpack 5
- We can share bundles across 2 standalone applications that run separately
- Hello World App running on 9001
output: {
filename: '[name].[contenthash].js',
path: path.resolve(__dirname, './dist'),
// update public path
publicPath: 'http://localhost:9001/',
},
// ...
plugins: [
new ModuleFederationPlugin({
name: 'HelloWorldApp',
filename: 'remoteEntry.js',
exposes: {
'./HelloWorldButton':
'./src/components/hello-world-button/hello-world-button.js',
},
}),
],
plugins: [
new ModuleFederationPlugin({
name: 'KiwiApp',
remotes: {
HelloWorldApp: 'HelloWorldApp@http://localhost:9001/remoteEntry.js',
},
}),
],