@storybook/builder-webpack4

What is @storybook/builder-webpack4?

The @storybook/builder-webpack4 npm package is a custom builder for Storybook that allows you to use Webpack 4 as your bundler for building stories. This is particularly useful for projects that are still using Webpack 4 and have not yet migrated to Webpack 5, which is used by default in the latest versions of Storybook. The package provides a set of configurations and optimizations tailored for Webpack 4 to ensure compatibility and performance when running Storybook.

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

Custom Webpack Configuration

Allows you to customize the Webpack configuration used by Storybook by modifying the existing config or returning a new one.

{"webpackFinal": (config) => {\n  // Modify or return the webpack config.\n  return config;\n}}

Storybook Addon Compatibility

Ensures compatibility with various Storybook addons while using Webpack 4 as the bundler.

{"addons": [\n  '@storybook/addon-actions',\n  '@storybook/addon-links',\n  '@storybook/addon-essentials'\n]}

Performance Optimizations

Provides performance optimizations specific to Webpack 4 for faster build and reload times in Storybook.

{"core": {\n  "builder": '@storybook/builder-webpack4'\n}}

Other packages similar to @storybook/builder-webpack4

@storybook/builder-webpack5

This package is the default builder for Storybook that uses Webpack 5. It is similar to @storybook/builder-webpack4 but for projects that are using the newer version of Webpack. It offers better performance and newer features compared to Webpack 4.

storybook-builder-vite

An alternative Storybook builder that uses Vite as the bundler instead of Webpack. Vite provides a faster development experience with features like Hot Module Replacement (HMR) and efficient bundling. It is a good choice for projects looking for performance improvements over Webpack.

README

Builder-Webpack4

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

builder-webpack4 is the default, so no configuration is necessary to use it. However, if you wan to explicitly configure your Storybook to run builder-webpack4, install it as a dev dependency and then update your .storybook/main.js configuration.

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