Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow full control over webpack config. #160

Merged
merged 1 commit into from
May 5, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions dist/server/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,12 @@ exports.default = function (baseConfig, configDir) {
}

var customConfig = require(customConfigPath);

if (typeof customConfig === 'function') {
logger.info('=> Loading custom webpack config (full-control mode).');
return customConfig(config);
}

logger.info('=> Loading custom webpack config.');

return (0, _extends3.default)({}, customConfig, config, {
Expand Down
5 changes: 5 additions & 0 deletions docs/configure_storybook.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ You can configure React Storybook in different ways. We'll discuss them here.
* [Add Custom CSS Loaders](#add-custom-css-loaders)
* [Customizing The UI](#customizing-the-ui)
* [Other Configurations](#other-configurations)
* [Full Control](#full-control)
* [Load Custom HTML Head Content](#load-custom-html-head-content)


Expand Down Expand Up @@ -193,6 +194,10 @@ module.exports = {

We allow you to use almost all [Webpack configurations](https://webpack.github.io/docs/configuration.html). So, you can customize as you wish.

### Full Control

For very custom configuration needs, or if you'd like to take full control over the webpack config, [see this guide](/docs/webpack_full_control_mode.md).

## Custom Babel Config

Storybook will first search for a `.babelrc` inside the storybook config directory, and then at your project's root. If it doesn't find either of these files, it will use its default configuration instead.
Expand Down
38 changes: 38 additions & 0 deletions docs/webpack_full_control_mode.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
# Taking Full Control of the Webpack Config

There are so many configuration options. We give a sane config by default, but sometimes you just need to take the wheel.

> Beware: You will be in full control of the webpack config and could easily break storybook. We have the important bits listed below.

## Full Control Mode

You'll need to add a `webpack.config.js` file to your config folder (`.storybook/` by default.

In the `webpack.config.js`, return a **Function** instead of an object. The function will receive our base config. You can make modifications to it or create a brand new one. The function just needs to return a valid webpack config.

Example:

```js
// .storybook/webpack.config.js

// Export a function. Accept the base config as the only param.
module.exports = (storybookBaseConfig) => {
// Make whatever fine-grained changes you need
storybookBaseConfig.module = { ... }

// Return the altered config
return storybookBaseConfig;
};
```

Pretty straightforward :)

## Important Parts

The following sections of the config could break storybook if deleted:

- `config.entry`
- `config.output`
- `config.plugins[new webpack.HotModuleReplacementPlugin()]`

You've been warned.
6 changes: 6 additions & 0 deletions src/server/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,12 @@ export default function (baseConfig, configDir) {
}

const customConfig = require(customConfigPath);

if (typeof customConfig === 'function') {
logger.info('=> Loading custom webpack config (full-control mode).');
return customConfig(config);
}

logger.info('=> Loading custom webpack config.');

return {
Expand Down