@storybook/manager-webpack5

What is @storybook/manager-webpack5?

@storybook/manager-webpack5 is a package that allows you to customize the Storybook manager UI using Webpack 5. It provides the ability to configure and extend the Storybook manager, which is the interface where you browse and interact with your stories.

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

Custom Webpack Configuration

This feature allows you to customize the Webpack configuration for the Storybook manager. In this example, an alias is created for the 'src/components' directory.

{"module.exports":{"managerWebpack":{"config":{"resolve":{"alias":{"@components":"src/components"}}}}}}

Adding Custom Addons

You can add custom addons to enhance the functionality of the Storybook manager. This example shows how to add the 'addon-links' and 'addon-essentials' addons.

{"module.exports":{"addons":["@storybook/addon-links","@storybook/addon-essentials"]}}

Custom Manager UI

This feature allows you to customize the manager UI by modifying the Webpack configuration. In this example, CSS files are handled using 'style-loader' and 'css-loader'.

{"module.exports":{"managerWebpack":{"config":{"module":{"rules":[{"test":"/\\.css$/","use":["style-loader","css-loader"]}]}}}}}

Other packages similar to @storybook/manager-webpack5

@storybook/addon-essentials

@storybook/addon-essentials is a collection of essential addons for Storybook, including controls, actions, viewport, backgrounds, and more. It provides a comprehensive set of tools to enhance the Storybook experience, but it does not offer the same level of customization for the manager UI as @storybook/manager-webpack5.

@storybook/addon-links

@storybook/addon-links allows you to create links between stories in Storybook. It is useful for navigating between different components and states, but it does not provide the ability to customize the Webpack configuration for the manager UI like @storybook/manager-webpack5.

webpack

Webpack is a module bundler for JavaScript applications. While it is not specific to Storybook, it can be used to customize the Webpack configuration for both the Storybook manager and preview. However, it requires more manual setup compared to the specialized @storybook/manager-webpack5 package.

README

Manager-Webpack5

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

webpack4 is the default. To configure your Storybook to run webpack5, install @storybook/manager-webpack5 and @storybook/builder-webpack5 as dev dependencies then update your .storybook/main.js configuration.

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