diff --git a/dist/server/config.js b/dist/server/config.js index 6eea19167849..77de55333d87 100644 --- a/dist/server/config.js +++ b/dist/server/config.js @@ -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, { diff --git a/docs/configure_storybook.md b/docs/configure_storybook.md index 9d2dec2dcad9..bd155dcc7556 100644 --- a/docs/configure_storybook.md +++ b/docs/configure_storybook.md @@ -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) @@ -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. diff --git a/docs/webpack_full_control_mode.md b/docs/webpack_full_control_mode.md new file mode 100644 index 000000000000..dd2d472cb811 --- /dev/null +++ b/docs/webpack_full_control_mode.md @@ -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. \ No newline at end of file diff --git a/src/server/config.js b/src/server/config.js index cbe5e5f86a17..569d2aa3e483 100644 --- a/src/server/config.js +++ b/src/server/config.js @@ -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 {