https://github.com/waldronmatt/dynamic-container-path-webpack-plugin

Change 'publicPath' at run time rather than build time for dynamic module federated containers.
https://github.com/waldronmatt/dynamic-container-path-webpack-plugin

containers dynamic module-federation plugin publicpath webpack

Last synced: about 1 month ago
JSON representation

Change 'publicPath' at run time rather than build time for dynamic module federated containers.

• Host: GitHub
• URL: https://github.com/waldronmatt/dynamic-container-path-webpack-plugin
• Owner: waldronmatt
• License: mit
• Created: 2021-04-10T19:27:42.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-04-06T23:05:22.000Z (over 2 years ago)
• Last Synced: 2024-10-07T17:48:21.627Z (3 months ago)
• Topics: containers, dynamic, module-federation, plugin, publicpath, webpack
• Language: JavaScript
• Homepage:
• Size: 25.4 KB
• Stars: 10
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

  



# 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](https://webpack.js.org/concepts/module-federation/#dynamic-remote-containers) instead of using the `remotes` parameter for static paths.

## Install

```bash

npm i -D dynamic-container-path-webpack-plugin

```

## Usage

`webpack.config.js`

```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**:

```js

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](https://dev.to/waldronmatt/tutorial-a-guide-to-module-federation-for-enterprise-n5) for more information and to learn how this webpack plugin works.

## License

MIT