Builder implemented with webpack5 and webpack5-compatible loaders/plugins/config, used by @storybook/core-server to build the manager UI
—
Primary builder interface implementing webpack5-based builds for the Storybook manager UI with development server integration and production optimization.
Starts a development server with webpack dev middleware for hot reloading during development.
/**
* Start development server with webpack dev middleware
* @param options - Build options including configuration and router
* @returns Promise resolving to build result with stats and bail function
*/
function start(options: BuilderStartOptions): Promise<BuilderStartResult>;
interface BuilderStartOptions {
/** High-resolution start time for performance tracking */
startTime?: [number, number];
/** Storybook configuration options */
options: Options;
/** Express router for middleware attachment */
router: Router;
}
interface BuilderStartResult {
/** Function to stop the build process and cleanup */
bail: () => Promise<void>;
/** Webpack compilation statistics */
stats: Stats;
/** Total build time */
totalTime: [number, number];
}Usage Examples:
import { start } from "@storybook/manager-webpack5";
import express from "express";
const app = express();
const router = express.Router();
const result = await start({
startTime: process.hrtime(),
options: {
configDir: '.storybook',
outputDir: './storybook-static',
presets: presetCollection,
cache: cacheProvider,
managerCache: true,
},
router,
});
// The router now has webpack dev middleware attached
app.use(router);
// Stop the build if needed
await result.bail();Builds the manager for production with optimization and asset generation.
/**
* Build manager for production with optimization
* @param options - Build options for production compilation
* @returns Promise resolving to webpack Stats object
*/
function build(options: BuilderStartOptions): Promise<BuilderBuildResult>;
interface BuilderBuildResult extends Stats {
// Webpack Stats object with compilation results
}Usage Examples:
import { build } from "@storybook/manager-webpack5";
const stats = await build({
startTime: process.hrtime(),
options: {
configDir: '.storybook',
outputDir: './storybook-static',
presets: presetCollection,
},
});
if (stats.hasErrors()) {
console.error('Build failed with errors:', stats.toJson().errors);
} else {
console.log('Build completed successfully');
}Generates the complete webpack configuration for the manager build.
/**
* Generate webpack configuration for manager build
* @param options - Storybook configuration options
* @returns Promise resolving to webpack Configuration object
*/
function getConfig(options: Options): Promise<Configuration>;Usage Examples:
import { getConfig } from "@storybook/manager-webpack5";
import webpack from "webpack";
const config = await getConfig({
configDir: '.storybook',
outputDir: './storybook-static',
presets: presetCollection,
});
// Use the configuration with webpack directly
const compiler = webpack(config);Stops the build process and performs cleanup of resources.
/**
* Stop build process and cleanup resources
* @returns Promise that resolves when cleanup is complete
*/
function bail(): Promise<void>;Usage Examples:
import { bail, start } from "@storybook/manager-webpack5";
// Start a build
const buildPromise = start(options);
// Stop it if needed (e.g., on process signal)
process.on('SIGINT', async () => {
await bail();
process.exit(0);
});Provides access to the webpack instance with version validation.
interface ExecutorInterface {
/**
* Get webpack instance with version validation
* @param options - Storybook options for webpack resolution
* @returns Promise resolving to webpack function
*/
get(options: Options): Promise<typeof webpack>;
}
const executor: ExecutorInterface;Usage Examples:
import { executor } from "@storybook/manager-webpack5";
const webpackInstance = await executor.get(options);
const compiler = webpackInstance(config);Creates webpack Stats object from error string for consistent error reporting.
/**
* Create webpack Stats object from error string
* @param err - Error message string
* @returns Mock Stats object with error information
*/
function makeStatsFromError(err: string): Stats;Usage Examples:
import { makeStatsFromError } from "@storybook/manager-webpack5";
try {
// Build operation
} catch (error) {
const errorStats = makeStatsFromError(error.message);
console.error('Build error:', errorStats.toJson().errors);
}
// Create mock error stats for testing
const mockErrorStats = makeStatsFromError("Webpack compilation failed");
console.log('Has errors:', mockErrorStats.hasErrors()); // true
console.log('Error count:', mockErrorStats.toJson().errors.length); // 1Install with Tessl CLI
npx tessl i tessl/npm-storybook--manager-webpack5