Zephyr Cloud Docs
Zephyr Cloud →
Zephyr Cloud →

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
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

Related Documentation

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: