@storybook/builder-webpack5

What is @storybook/builder-webpack5?

The @storybook/builder-webpack5 npm package is a builder for Storybook that uses Webpack 5 as its core bundling engine. It allows developers to configure Storybook to use Webpack 5 for building and serving their UI component stories. This package is particularly useful for projects that have already migrated to Webpack 5, ensuring compatibility and taking advantage of the latest features offered by Webpack.

What are @storybook/builder-webpack5's main functionalities?

Custom Webpack Configuration

Allows users to provide a custom Webpack configuration to be used by Storybook. This can include custom loaders, plugins, and other Webpack-specific settings.

{
  "stories": ["./src/**/*.stories.@(js|jsx|ts|tsx)"]
  "addons": ["@storybook/addon-links", "@storybook/addon-essentials"],
  "core": {
    "builder": "@storybook/builder-webpack5"
  },
  "webpackFinal": (config) => {
    // Custom webpack configuration
    return config;
  }
}

Performance Optimizations

Enables performance optimizations such as lazy compilation to improve the development experience by speeding up build and reload times.

{
  "core": {
    "builder": {
      "name": "@storybook/builder-webpack5",
      "options": {
        "lazyCompilation": true
      }
    }
  }
}

Other packages similar to @storybook/builder-webpack5

@storybook/builder-webpack4

This package is similar to @storybook/builder-webpack5 but is designed to work with Webpack 4. It provides the same type of functionality for integrating Storybook with Webpack 4-based projects.

storybook-addon-next

This addon integrates Storybook with Next.js, providing a similar level of integration between Storybook and the Next.js build system as @storybook/builder-webpack5 does with Webpack 5.

README

Builder-Webpack5

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

To configure your Storybook to run builder-webpack5, install it as a dev dependency and then update your .storybook/main.js configuration:

module.exports = {
  core: {
    builder: 'webpack5',
  },
};