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

Readme

Source

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',
  },
};

Keywords

storybook

FAQs

What is @storybook/builder-webpack4?

Is @storybook/builder-webpack4 popular?

Is @storybook/builder-webpack4 well maintained?

Last updated on 13 Jun 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install