Webpack

Storybook displays your components in a custom web application built using Webpack. Webpack is a complex tool, but our default configuration is intended to cover most use cases. Addons are also available that extend the configuration for other everyday use cases.

You can customize Storybook's Webpack setup by providing a webpackFinal field in .storybook/main.js file.

The value should be an async function that receives a Webpack config and eventually returns a Webpack config.

Default configuration

By default, Storybook's Webpack configuration will allow you to:

Import images and other static files

You can import images and other local files and have them built into the Storybook:

// This will include './static/image.png' in the bundle. 
// And return a path to be included in a src attribute
import imageFile from './static/image.png';

Import JSON as JavaScript

You can import .json files and have them expanded to a JavaScript object:

// This will automatically be parsed to the contents of `data.json`
import data from './data.json';

If you want to know the exact details of the Webpack config, the best way is to run either of the following commands:

For development mode:

npm run storybook -- --debug-webpack

For production mode:

npm run build-storybook -- --debug-webpack

Code splitting

Starting with Storybook 6.4, code splitting is supported through a configuration flag. Update your Storybook configuration and add the storyStoreV7 flag:

module.exports = {
  stories: [],
  addons: ['@storybook/addon-essentials'],
  features: {
    storyStoreV7: true,
  },
};

When you start your Storybook, you'll see an improvement in loading times. Read more about it in the announcement post and the configuration documentation.

Webpack 5

Storybook builds your project with Webpack 4 by default. If your project uses Webpack 5, you can opt into the Webpack 5 builder by installing the required dependencies (i.e., @storybook/builder-webpack5, @storybook/manager-webpack5) and update your Storybook configuration as follows:

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

Once you are using Webpack 5, you can further opt into some features to optimize your build:

Lazy Compilation

Storybook supports Webpack's experimental lazy compilation feature, via the lazyCompilation builder flag:

module.exports = {
  core: {
    builder: {
      name: 'webpack5',
      options: {
        lazyCompilation: true,
      },
    },
  },
};

This feature applies in development mode, and will mean your Storybook will start up faster, at the cost of slightly slower browsing time when you change stories.

Filesystem Caching

Storybook supports Webpack's filesystem caching feature, via the fsCache builder flag:

module.exports = {
  core: {
    builder: {
      name: 'webpack5',
      options: {
        fsCache: true,
      },
    },
  },
};

This feature will mean build output is cached between runs of Storybook, speeding up subsequent startup times.

Extending Storybook’s Webpack config

To extend the above configuration, use the webpackFinal field of .storybook/main.js.

The value should export a function, which will receive the default config as its first argument. The second argument is an options object from Storybook, and this will have information about where config came from, whether we're in production or development mode, etc.

For example, if you wanted to add Sass support, you can adjust your configuration as such:

const path = require('path');
 
// Export a function. Accept the base config as the only param.
module.exports = {
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.
 
    // Make whatever fine-grained changes you need
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });
 
    // Return the altered config
    return config;
  },
};

Storybook uses the config returned from the above function to render your components in Storybook's "preview" iframe. Note that Storybook has an entirely separate Webpack config for its UI (also referred to as the "manager"), so the customizations you make only apply to the rendering of your stories, i.e., you can completely replace config.module.rules if you want.

Nevertheless, edit config with care. Make sure to preserve the following config options:

• entry
• output

Furthermore, config requires the HtmlWebpackplugin to generate the preview page, so rather than overwriting config.plugins you should probably append to it (or overwrite it with care), see the following issue for examples on how to handle this:

module.exports = {
  webpackFinal: async (config) => {
    config.plugins.push(...);
    return config;
  },
}

Finally, if your custom Webpack config uses a loader that does not explicitly include specific file extensions via the test property, in that case, it is necessary to exclude the .ejs file extension from that loader.

If you're using a non-standard Storybook config directory, you should put main.js there instead of .storybook and update the include path to ensure it resolves to your project root.

Using your existing config

Suppose you have an existing Webpack config for your project and want to reuse this app's configuration. In that case, you can import your main Webpack config into Storybook's .storybook/main.js and merge both:

The following code snippet shows how you can replace the loaders from Storybook with the ones from your app's webpack.config.js:

// your app's webpack.config.js
const custom = require('../webpack.config.js');
 
module.exports = {
  webpackFinal: async (config) => {
    return { ...config, module: { ...config.module, rules: custom.module.rules } };
  },
};

TypeScript Module Resolution

When working with TypeScript projects, the default Webpack configuration may fail to resolve module aliases defined in your tsconfig file. To work around this issue you may use tsconfig-paths-webpack-plugin while extending Storybook's Webpack config like:

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 
module.exports = {
  webpackFinal: async (config) => {
    config.resolve.plugins = [
      ...(config.resolve.plugins || []),
      new TsconfigPathsPlugin({
        extensions: config.resolve.extensions,
      }),
    ];
    return config;
  },
};

Learn more about builders

• Vite builder for bundling with Vite
• Webpack builder for bundling with Webpack
• Builder API for building a Storybook builder