dynamic-container-path-webpack-plugin
A
publicPath
mutator webpack plugin for module federation.
About plugin
Change publicPath
at run time rather than build time for dynamic module federated containers.
This should be used in conjunction with module federation's exposed methods for initializing remote containers dynamically instead of using the remotes
parameter for static paths.
Install
npm i -D dynamic-container-path-webpack-plugin
Usage
webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;
const DynamicContainerPathPlugin = require('dynamic-container-path-webpack-plugin');
const setPublicPath = require('dynamic-container-path-webpack-plugin/set-path');
module.exports = {
entry: {
Host: ['./app.js'],
},
output: {
// this will be changed later by 'DynamicContainerPathPlugin' at runtime
publicPath: '/',
},
plugins: [
new ModuleFederationPlugin({
// ...
}),
new DynamicContainerPathPlugin({
iife: setPublicPath,
entry: 'Host',
}),
],
};
Options
iife
- Type:
function
An immediately invoked function expression to get publicPath
at runtime.
entry
- Type:
string
The entry point name of the application.
Note: You have access to the entry and chunk via your iife:
function determinePublicPath(entry, chunk) {
if (chunk !== "Host") {
return `/something/${entry}/`;
}
return "/";
}
new DynamicContainerPathPlugin({
iife: determinePublicPath,
entry: 'Host',
}),
Getting Started
See Tutorial - A Guide to Module Federation for Enterprise for more information and to learn how this webpack plugin works.
License
MIT