Zephyr Cloud Docs

    Webpack

    Deploy your Webpack applications to Zephyr Cloud with full Module Federation support. The Zephyr Webpack plugin integrates seamlessly with Webpack's ecosystem, creating optimized deployments with zero configuration.

    Prerequisites
    Quick Setup with Codemod
    npm
    yarn
    pnpm
    bun
    npx with-zephyr

    This detects your bundler and configures Zephyr automatically. Learn more →

    For manual setup, continue below.

    Installation

    Install the plugin in your project:

    npm
    yarn
    pnpm
    bun
    deno
    npm add --dev zephyr-webpack-plugin

    Quick Start

    To add Zephyr to a webpack application make sure to wrap the entire webpack configuration with the withZephyr function.

    // webpack.config.ts
import { Configuration } from 'webpack';
import { withZephyr } from 'zephyr-webpack-plugin';
import path from 'path';

const config: Configuration = {
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
  },
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
};

export default withZephyr()(config);

    Module Federation

    Zephyr has first party support for Module Federation. You don't need to do any additional configuration to enable Module Federation in Zephyr.

    Zephyr will hook into the bundling process and modify the remote resolution to point to the Zephyr Cloud deployments.

    Host Application

    // webpack.config.ts
import { Configuration } from 'webpack';
import { withZephyr } from 'zephyr-webpack-plugin';
import ModuleFederationPlugin from '@module-federation/enhanced/webpack';

const config: Configuration = {
  entry: './src/index.tsx',
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        mfe1: 'mfe1@http://localhost:3001/remoteEntry.js',
        mfe2: 'mfe2@http://localhost:3002/remoteEntry.js',
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true },
      },
    }),
  ],
};

export default withZephyr()(config);

    Remote Application

    // webpack.config.ts
import { Configuration } from 'webpack';
import { withZephyr } from 'zephyr-webpack-plugin';
import ModuleFederationPlugin from '@module-federation/enhanced/webpack';

const config: Configuration = {
  entry: './src/index.tsx',
  plugins: [
    new ModuleFederationPlugin({
      name: 'mfe1',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/components/Button',
        './Header': './src/components/Header',
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true },
      },
    }),
  ],
};

export default withZephyr()(config);

    Next Steps

    Module Federation:

    Integration Guides:

    Other Bundlers:

    • Rspack - Faster Rust-based alternative to Webpack
    • Vite - Lightning-fast development with native ESM
    • Rsbuild - Rspack-based build tool

    Features: