Skip to content

Instantly share code, notes, and snippets.

@marr
Created May 24, 2018 22:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save marr/ce6b5ffdf54335eedc806cf9bccf4376 to your computer and use it in GitHub Desktop.
Save marr/ce6b5ffdf54335eedc806cf9bccf4376 to your computer and use it in GitHub Desktop.
const path = require('path');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');
/*
* Storybook Webpack FULL CONTROL MODE
*
* extend carefully, please read the docs!
* https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode
*
* @param {object} config - the default Storybook webpack config object
* @param {string} env - 'PRODUCTION' for static builds, 'DEVELOPMENT' otherwise
*
* @return {object} config - the modified config object
*/
/* eslint-disable no-param-reassign */
module.exports = (config, env) => {
// add loaders for CSS
config.module.rules.push({
test: /\.css$/,
use: [{loader: 'style-loader', options: {hmr: true}}, 'css-loader', 'postcss-loader'],
exclude: path.resolve('../node_modules'),
});
// add loaders for Images
config.module.rules.push(
{
test: /\.(gif|jpg|png)$/,
loader: 'url-loader',
options: {limit: '8000', name: 'assets/[hash].[ext]'},
},
{
test: /_story\.js$/,
loaders: [require.resolve('@storybook/addon-storysource/loader')],
enforce: 'pre',
},
{
test: /\.svg$/,
loader: 'svg-url-loader',
options: {limit: '8000', name: 'assets/[hash].[ext]'},
}
);
// automatically open the browser
if (env === 'DEVELOPMENT') {
config.plugins.push(new OpenBrowserPlugin({url: 'http://localhost:9001/'}));
}
return config;
};
/* eslint-enable no-param-reassign */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment