ModuleFederationPlugin's remote property syntax - webpack-module-federation

Question

What does this ui: "ui#http://some.external.host/remoteEntry.js" syntax mean in ModuleFederationPlugin's remotes property.
I understand that ui item is being loaded from an external host, but what does ui# before host definition mean ?
new ModuleFederationPlugin({
name: "myApp",
filename: "myAppEntry.js",
remotes: {
ui: "ui#http://some.external.host/remoteEntry.js",
},
shared: {
...,
},
}),

Answer 1

You can break this line of the config ui: "ui#http://some.external.host/remoteEntry.js" into three parts: LocalModuleName: "RemoteModuleName#Host". Let's assume myApp and ui have the following webpack configs for module federation:
// Config for myApp
new ModuleFederationPlugin({
name: "myApp",
filename: "myAppEntry.js",
remotes: {
ui: "ui#http://some.external.host/remoteEntry.js",
},
shared: {...},
}),
// Config for ui
new ModuleFederationPlugin({
name: "ui",
filename: "remoteEntry.js",
exposes: {
"./Button": "./src/Button",
},
shared: {...},
}),
LocalModuleName is the name under which you can import exposed features from the remote app in the local code, e.g.:
const RemoteButton = React.lazy(() => import("ui/Button"));
But you could also change the name to remoteUI: "ui#http://some.external.host/remoteEntry.js" and the import would have to look like this:
const RemoteButton = React.lazy(() => import("remoteUI/Button"));
This could be useful if two different remotes used the same name in their config.
RemoteModuleName refers to the name used in the remote configuration. This is necessary, so ModuleFederation can properly initialize the modules.
Host is the URL under which you find the remote container script.