Storybook Webpack builder is the default builder for Storybook. This builder enables you to create a seamless development and testing experience for your components and provides an efficient way to develop UI components in isolation allowing you to leverage your existing Webpack configuration with Storybook.
By default, Storybook provides zero-config support for Webpack and automatically sets up a baseline configuration created to work with the most common use cases. However, you can extend your Storybook configuration file (i.e.,
.storybook/main.js|ts) and provide additional options to improve your Storybook's performance or customize it to your needs. Listed below are the available options and examples of how to use them.
|Enabled by default.|
Configures Webpack's code splitting feature
|Enables Webpack's experimental |
|Configures Webpack's filesystem caching feature|
Override the default configuration
Storybook's Webpack configuration is based on Webpack 5, allowing it to be extended to fit your project's needs. If you need to add a loader or a plugin, you can provide the
webpackFinal configuration element in your
.storybook/main.js|ts file. The configuration element should export a function that receives the baseline configuration as the first argument and Storybook's options object as the second argument. For example:
When Storybook starts, it automatically merges the configuration into its own. However, when providing the
webpackFinal configuration element, you're responsible for merging the configuration yourself. We recommend that you handle the changes to the
config object responsibly, preserving both the
Working with Webpack plugins
Another way to customize your Storybook configuration is to add a custom plugin or loader to help with code optimization, asset management, or other tasks. Nevertheless, since Storybook relies on the
HtmlWebpackPlugin to generate the preview page, we recommend that you append the changes to the
config.plugins array rather than overwriting it. For example:
Additionally, when working with Webpack loaders that don't explicitly include specific file extensions (i.e., via the
test property), you should
.ejs file extension for that loader.
Import a custom Webpack configuration
If you already have an existing Webpack configuration file that you need to reuse with Storybook, you can import it and merge it into the default configuration. For example:
Debug Webpack configuration
If you intend to debug the Webpack configuration used by Storybook, you can use the Storybook CLI to help you. If you're running in development mode, you can use the following command:
Additionally, if you're generating a static build of your Storybook, you can use the following command:
What about Webpack 4 support?
Support for Webpack 4 has been removed and is no longer being maintained. If you're upgrading your Storybook, it will automatically use Webpack 5 and attempt to migrate your configuration. However, if you're working with a custom Webpack configuration, you may need to update it to work with Webpack 5. The migration process is necessary to ensure that your project runs smoothly with the latest version of Storybook. You can follow the instructions provided on the Webpack website to update your configuration.
TypeScript modules are not resolved within Storybook
Storybook's default Webpack configuration provides support for most project setups without the need for any additional configuration. Nevertheless, depending on your project configuration, or the framework of choice, you may run into issues with TypeScript modules not being resolved within Storybook when aliased from your
tsconfig file. If you encounter this issue, you can use
tsconfig-paths-webpack-plugin while extending Storybook's Webpack config as follows:
Pre-bundled assets do not show in the Storybook UI
As Storybook relies on esbuild to build its internal manager, support for bundling assets with the
managerWebpack will no longer have an impact on the Storybook UI. We recommend removing existing
Learn more about builders
- Vite builder for bundling with Vite
- Webpack builder for bundling with Webpack
- Builder API for building a Storybook builder