Storybook has its own Webpack setup and a dev server.The webpack config , and the default can depend on which framework you’re using and whether you’ve used a generator like Create React App or Angular CLI etc.

This is what the config for storybook looks like when using CRA in dev-mode:

To effectively customise the webpack config, you might need to get the full default config it's using.

• Create a .storybook/webpack.config.js file.
• Edit its contents:

module.exports = async ({ config }) => console.dir(config, { depth: null }) || config;

• Then run storybook:

The console should log the entire config, for you to inspect.

If your file exports a function, it puts Storybook into full-control-mode.

Storybook will call the function with an object containing config and mode fields. config is Storybook’s default configuration, and mode allows you to create different configurations for dev and production environments.

For example, here’s a webpack.config.js to add support using full-control mode:

const path = require('path');
// Export a function. Accept the base config as the only param.
module.exports = async ({ config, mode }) => {
  // `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION'
  // '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'],
  });
  // 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 a completely separate webpack config for its own UI (also referred to as the “manager”), so the customizations you make only applies 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
• outputFurthermore, 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 Issue #6020 for examples:

If your file exports an object, it puts Storybook into extend-mode. This mode is deprecated and will be removed in a future version.

Extend-mode merges the exported object with Storybook’s which supports a bunch of common file types. The merge operation appends webpack arrays like rules and plugins and merges objects like optimization.

For example, to add support to Storybook, install style-loader, css-loader, sass-loader, and and add the following snippet to .storybook/webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        include: path.resolve(__dirname, '../'),
      },
    ],
  },
};

If you’re using a non-standard Storybook config directory, you should put webpack.config.js there instead of .storybook and update the include path to make sure that it resolves to your project root.

You can add any kind of webpack configuration options with the above config, whether they are plugins, loaders, or aliases. But you won’t be able to change the following config options:

• entry
• output

• Create a new file with common webpack options and use it in both inside the main webpack config and inside Storybook’s webpack.config.js.Examplemerging the loaders from your app’s with storybook’s