Customise Storybook’s Webpack configuration

Storybook is a great tool, and probably works great with no configuration at all for brand new projects, or those based on Create React App, but if you’re working on a slightly older or more esoteric codebase, you’ll probably find you need to hack around the Webpack configuration.

It’s simple enough to completely replace the config with your own by dropping in your webpack.config.js, but I found that the docs didn’t quite work for me when I wanted to just add a single loader, keeping the rest of the default settings (The third parameter referenced by the docs seems to be undefined).

Here’s what I ended up with:

(Put that into ./storybook/webpack.config.js)

Once you have generated the default configuration object, you can perform any modifications required and then return it, and it should be good to go!