MF Live Reload Plugin

Installation

1. Download this package as a dev dependency

> npm i -D mf-live-reload

2. Add the plugin to your webpack plugin configuration

const { ModuleFederationPlugin } = require("webpack").container;

// import the plugin
const { MFLiveReloadPlugin } = require("../plugin/index");

module.exports = {
  ...webpack configs
  plugins: [
    // configure the plugin
    new MFLiveReloadPlugin({
      port: 8081,
      container: "dashboard",
      standalone: false,
    }),
    new ModuleFederationPlugin({
      ...module federation configs
    }),
  ],
};

3. Start your webpack development server and if everything goes according to plan, you should see this output in your console.

> MF - starting server
> MF - connecting to containers

API

The API for this plugin consists of three configs:

1. port: this is the port that your application is hosted on
2. conatiner: this is the name of your Module Federation container
3. standalone: use this plugin without the MF Dev Tools chrome extension. This config option defaults to true, so if you would like to use the MF Dev Tools chrome extension, you will need to set standalone: false in the MFLiveReloadPlugin config.

Trouble-shooting

Sometimes a browser refesh may be necessary to open a socket connection to the MF Live Reload dev server.