@leanjs/webpack

Installation

If you use a monorepo (recommended) execute the following command at the root of your repository:

yarn add -D -W @leanjs/webpack webpack

If your app is not in a monorepo, then run the following command instead of the above:

yarn add -D @leanjs/webpack webpack

RemoteWebpackPlugin

This plugin is an abstractions built on top of the following Webpack plugins:

• ModuleFederationPlugin from webpack/lib/container/ModuleFederationPlugin
• HtmlWebpackPlugin from html-webpack-plugin
• VirtualModulesPlugin from webpack-virtual-modules

Basic usage

const { RemoteWebpackPlugin } = require("@leanjs/webpack");

module.exports = {
  plugins: [new RemoteWebpackPlugin()],
};

Configuration

RemoteWebpackPlugin(config: RemoteWebpackOptions) accepts the following arguments

interface RemoteWebpackOptions {
  /**
   * Add shared dependencies manually. Not required in a monorepo.
   * If this Webpack config is in a monorepo, this plugin will automatically
   * generate the shared dependencies based on the dependency graph
   */
  shared?: SharedDependencies;
  shared?: Record<string, string | SharedDependencies>;
}

interface SharedDependencies {
  /**
   * Include the provided and fallback module directly instead of async.
   * This allows to use this shared module in initial load too.
   * All possible shared modules need to be eager too.
   */
  eager?: boolean;

  /**
   * Version requirement from module in share scope.
   */
  requiredVersion?: string | false;

  /**
   * Allow only a single version of the shared module in share scope
   * (disabled by default).
   */
  singleton?: boolean;

  /**
   * Do not accept shared module if version is not valid
   * (defaults to yes, if local fallback module is available
   * and shared module is not a singleton, otherwise,
   * has no effect if there is no required version specified)
   */
  strictVersion?: boolean;

  /**
   * Version of the provided module.
   * Will replace lower matching versions, but not higher.
   */
  version?: string | false;
}

HostWebpackPlugin

This plugin is an abstractions built on top of the following Webpack plugins:

• ModuleFederationPlugin from webpack/lib/container/ModuleFederationPlugin

Basic usage

const { HostWebpackPlugin } = require("@leanjs/webpack");

module.exports = {
  plugins: [new HostWebpackPlugin()],
};

Configuration

HostWebpackPlugin(config: HostWebpackOptions) accepts the following arguments

interface HostWebpackOptions {
  /**
   * Add shared dependencies manually. Not required in a monorepo.
   * If this Webpack config is in a monorepo, this plugin will automatically
   * generate the shared dependencies based on the dependency graph
   */
  shared?: SharedDependencies;
  /**
   * Define what dependencies are automatically shared.
   * You can disable auto sharing passing false to it.
   */
  autoShared?: AutoShared | boolean;
  /**
   * Applies to all shared dependencies that don't have `eager` defined.
   */
  eager?: boolean;
  /**
   * Which packages are managed by Module Federation.
   * By default none of the packages.
   */
  remotes?: {
    packages: string[];
  };
}

interface AutoShared {
  excludePackages?: string[];
  excludeDirPattern?: string;
}

interface SharedDependencies {
  /**
   * Include the provided and fallback module directly instead of async.
   * This allows to use this shared module in initial load too.
   * All possible shared modules need to be eager too.
   */
  eager?: boolean;

  /**
   * Version requirement from module in share scope.
   */
  requiredVersion?: string | false;

  /**
   * Allow only a single version of the shared module in share scope
   * (disabled by default).
   */
  singleton?: boolean;

  /**
   * Do not accept shared module if version is not valid
   * (defaults to yes, if local fallback module is available
   * and shared module is not a singleton, otherwise,
   * has no effect if there is no required version specified)
   */
  strictVersion?: boolean;

  /**
   * Version of the provided module.
   * Will replace lower matching versions, but not higher.
   */
  version?: string | false;
}