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