Dynamic-container-path-webpack-plugin NPM

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',
}),