@storybook/core-webpack

Customizing Webpack Config

This feature allows developers to customize the Webpack configuration used by Storybook. The code sample demonstrates how to merge a custom Webpack configuration with Storybook's default configuration, specifically adding support for SCSS files.

const { merge } = require('webpack-merge');
module.exports = ({ config }) => {
  return merge(config, {
    // Custom Webpack configuration
    module: {
      rules: [{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }]
    }
  });
};

Adding Webpack Plugins

Developers can extend Storybook's Webpack configuration by adding additional Webpack plugins. The code sample shows how to add a custom plugin to the configuration.

const SomeWebpackPlugin = require('some-webpack-plugin');
module.exports = ({ config }) => {
  config.plugins.push(new SomeWebpackPlugin());
  return config;
};

Modifying Existing Loaders

This functionality allows for the modification of existing loaders in the Webpack configuration. The code sample illustrates how to find and modify a specific loader to add an additional 'some-loader' for handling files.

module.exports = ({ config }) => {
  const rules = config.module.rules;
  const someRuleIndex = rules.findIndex(rule => rule.test.toString() === '/\.somefile$/');
  if (someRuleIndex !== -1) {
    rules[someRuleIndex].use.push('some-loader');
  }
  return config;
};