dynamic-container-path-webpack-plugin

KO | EN

gitlite — search

#javascript #hacktoberfest #react #typescript #go #android #linux #docker #windows #awesome-list #security #pytorch #ios #open-source

dynamic-container-path-webpack-plugin

(★ 10)

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

dynamic-container-path-webpack-plugin Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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

dynamic-container-path-webpack-plugin

dynamic-container-path-webpack-plugin Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

dynamic-container-path-webpack-plugin

dynamic-container-path-webpack-plugin Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README