Socket
Socket
Sign inDemoInstall

@storybook/core-webpack

Package Overview
Dependencies
228
Maintainers
11
Versions
647
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @storybook/core-webpack

Storybook framework-agnostic API


Version published
Maintainers
11
Created

Package description

What is @storybook/core-webpack?

The @storybook/core-webpack package is a part of the Storybook ecosystem, specifically designed to customize and extend Storybook's Webpack configurations. It allows developers to modify the default Webpack configuration used by Storybook to better suit their project's needs, including adding loaders, plugins, and modifying existing configurations. This package is essential for projects that require a high degree of customization for their Storybook setup, enabling seamless integration with a wide range of web development tools and workflows.

What are @storybook/core-webpack's main functionalities?

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;
};

Other packages similar to @storybook/core-webpack

Readme

Source

Storybook Core-Common

Common utilities used across @storybook/core-server (manager UI configuration) and @storybook/builder-webpack{4,5} (preview configuration).

This is a lot of code extracted for convenience, not because it made sense.

Supporting multiple version of webpack and this duplicating a large portion of code that was never meant to be generic caused this.

At some point we'll refactor this, it's likely a lot of this code is dead or barely used.

Keywords

FAQs

Last updated on 05 May 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc