or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

builder-functions.mdcaching.mdindex.mdprebuilt-manager.mdwebpack-config.md
tile.json

tessl/npm-storybook--manager-webpack5

Builder implemented with webpack5 and webpack5-compatible loaders/plugins/config, used by @storybook/core-server to build the manager UI

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@storybook/manager-webpack5@6.5.x

To install, run

npx @tessl/cli install tessl/npm-storybook--manager-webpack5@6.5.0

index.mddocs/

Storybook Manager Webpack5

Storybook Manager Webpack5 is a modern webpack5-based builder for the Storybook manager UI, serving as a high-performance alternative to the default webpack4 builder. It provides comprehensive webpack5 configuration, development server integration, intelligent caching, and support for Storybook composition features.

Package Information

  • Package Name: @storybook/manager-webpack5
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @storybook/manager-webpack5

Core Imports

import { 
  start, 
  build, 
  getConfig, 
  bail,
  WEBPACK_VERSION,
  executor 
} from "@storybook/manager-webpack5";

For CommonJS:

const { 
  start, 
  build, 
  getConfig, 
  bail,
  WEBPACK_VERSION,
  executor 
} = require("@storybook/manager-webpack5");

For preset usage:

// In .storybook/main.js
module.exports = {
  core: {
    builder: 'webpack5',
  },
};

For sub-module imports:

// Manager preset functions (for advanced webpack configuration)
const { managerWebpack, managerEntries } = require("@storybook/manager-webpack5/manager-preset");

// Prebuilt manager utilities (for optimization scenarios)
const { getPrebuiltDir, DEFAULT_ADDONS, IGNORED_ADDONS } = require("@storybook/manager-webpack5/prebuilt-manager");

Note: Sub-module imports provide access to internal utilities. Most users should use the main module exports. Sub-modules are primarily used by Storybook core and advanced integrations.

Basic Usage

import { start, build, getConfig } from "@storybook/manager-webpack5";
import type { Options } from "@storybook/core-common";

// Development mode with hot reloading
const options: Options = {
  configDir: '.storybook',
  outputDir: './storybook-static',
  // ... other options
};

// Start development server
const devResult = await start({
  options,
  startTime: process.hrtime(),
  router: expressRouter,
});

// Production build
const buildResult = await build({
  options,
  startTime: process.hrtime(),
});

// Get webpack configuration
const webpackConfig = await getConfig(options);

Architecture

Storybook Manager Webpack5 is built around several key components:

  • Builder Interface: Implements the Storybook Builder interface with start, build, and getConfig methods
  • Webpack5 Integration: Full webpack5 configuration with modern loaders, plugins, and optimization
  • Generator-based Processing: Uses async generators for interruptible build processes
  • Caching System: Intelligent caching for manager configurations and builds to improve performance
  • Development Server: Webpack dev middleware integration for hot reloading during development
  • Composition Support: Auto-discovery and configuration of Storybook composition references
  • Prebuilt Manager: Support for using prebuilt manager bundles when possible

Capabilities

Core Builder Functions

Primary builder interface implementing webpack5-based builds for the Storybook manager UI.

function start(options: BuilderStartOptions): Promise<BuilderStartResult>;
function build(options: BuilderStartOptions): Promise<BuilderBuildResult>;
function getConfig(options: Options): Promise<Configuration>;
function bail(): Promise<void>;

interface BuilderStartOptions {
  startTime?: [number, number];
  options: Options;
  router: Router;
}

interface BuilderStartResult {
  bail: () => Promise<void>;
  stats: Stats;
  totalTime: [number, number];
}

interface BuilderBuildResult extends Stats {}

Core Builder Functions

Webpack Configuration

Webpack5 configuration generation with manager-specific settings, plugin configuration, and entry point management.

function getManagerWebpackConfig(options: Options): Promise<Configuration>;
function getAutoRefs(options: Options, disabledRefs?: string[]): Promise<Ref[]>;

interface Options {
  configDir: string;
  outputDir: string;
  presets: PresetCollection;
  cache?: CacheProvider;
  managerCache?: boolean;
  smokeTest?: boolean;
  // ... other options
}

interface Ref {
  id: string;
  url: string;
  title: string;
  version?: string;
  type?: 'server-checked' | 'unknown';
}

Webpack Configuration

Caching System

Intelligent caching system for manager builds and configurations to improve build performance.

function useManagerCache(
  cacheKey: string,
  options: Options,
  managerConfig: Configuration
): Promise<boolean>;

function clearManagerCache(cacheKey: string, options: Options): Promise<boolean>;

Caching System

Prebuilt Manager

Support for using prebuilt manager bundles when the Storybook configuration meets certain criteria.

function getPrebuiltDir(options: Options): Promise<string | false>;

const DEFAULT_ADDONS: string[];
const IGNORED_ADDONS: string[];

Prebuilt Manager

Constants

const WEBPACK_VERSION: string; // "5"
const corePresets: string[]; // [require.resolve('./presets/manager-preset')]
const overridePresets: string[]; // []

Types

type WebpackBuilder = Builder<Configuration, Stats>;
type BuilderStartOptions = Partial<Parameters<WebpackBuilder['start']>['0']>;
type BuilderStartResult = Unpromise<ReturnType<WebpackBuilder['start']>>;
type BuilderBuildOptions = Partial<Parameters<WebpackBuilder['build']>['0']>;
type BuilderBuildResult = Unpromise<ReturnType<WebpackBuilder['build']>>;

interface ExecutorInterface {
  /** 
   * Get webpack instance with version validation
   * Ensures webpack5 compatibility and provides webpack function
   */
  get(options: Options): Promise<typeof webpack>;
}

const executor: ExecutorInterface;