How to use the @storybook/react/dist/server/config/defaults/webpack.config.js function in @storybook/react

module.exports = (storybookBaseConfig, configType) => {
  // configType has a value of 'DEVELOPMENT' or 'PRODUCTION'
  // You can change the configuration based on that.
  // 'PRODUCTION' is used when building the static version of storybook.

  const config = genDefaultConfig(storybookBaseConfig, configType);

  // Make whatever fine-grained changes you need
  config.plugins.push(
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
      chunks: ['preview'],
      minChunks: function (module) {
        // this assumes your vendor imports exist in the node_modules directory
        return module.context && module.context.indexOf("node_modules") !== -1;
      },
    })
  );

  // Return the altered config
  return config;
};

function getWebpackConfig(baseConfig, env) {
  /* eslint-disable strict */

  'use strict'

  if (!sanityContext) {
    throw new Error('Sanity context has not been set for Storybook!')
  }

  const wpConfig = Object.assign({}, sanityContext, {commonChunkPlugin: false})
  const sanityWpConfig = sanityServer.getWebpackDevConfig(wpConfig)
  const config = Object.assign({}, genDefaultConfig(baseConfig, env))
  const context = Object.assign({}, sanityContext, {webpack})
  config.plugins = config.plugins.concat(wpIntegration.getPlugins(context))
  config.module.rules = (config.module.rules || []).concat(wpIntegration.getLoaders(context))
  config.module.rules = config.module.rules.filter(skipCssLoader)
  config.module.rules.unshift(sanityWpConfig.module.rules.find(isCssLoader))

  const jsonLoaderAt = config.module.rules.findIndex(rule =>
    (rule.loader || '').includes('json-loader')
  )

  const jsonHackLoader = {
    test: /\.json$/,
    resourceQuery: /sanityPart=/,
    loader: require.resolve('./jsonHackLoader.js')
  }

module.exports = (baseConfig, env) => {
  const config = genDefaultConfig(baseConfig, env);
  // Extend it as you need.
  // For example, add typescript loader:
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('awesome-typescript-loader')
  });
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

module.exports = (baseConfig, env) => {
    const config = genDefaultConfig(baseConfig, env);
    // Extend it as you need.
    // For example, add typescript loader:
    config.module.rules.push(
        {
            test: /\.(ts|tsx)$/,
            loader: 'ts-loader',
        },
        {
            test: /\.scss$/,
            loaders: ['style-loader', 'css-loader', 'sass-loader'],
            include: path.resolve(__dirname, '../'),
        },
        {
            test: /\.css$/,
            loader: 'style-loader!css-loader',
            include: __dirname,

module.exports = (baseConfig, env) => {
  const config = genDefaultConfig(baseConfig, env);
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('ts-loader')
  });

  config.module.rules.push({
    test: /\.scss$/,
    exclude: path.join(context, 'node_modules'),
    loader: ExtractTextPlugin.extract([
        'css-loader',
        'sass-loader'
    ])
  });

  config.plugins.push(
    new ExtractTextPlugin('react-inline-suggest.css')

module.exports = (baseConfig, env) => {
    const config = genDefaultConfig(baseConfig, env)

    config.module.rules.push({
        test: /\.(ts|tsx)$/,
        include: path.resolve(__dirname, '../typescript/'),
        loaders: ['ts-loader']
    })

    config.resolve.extensions.push('.ts', '.tsx')

    config.devtool = 'eval'

    return config
}

module.exports = (baseConfig, env) => {
	const config = genDefaultConfig(baseConfig, env);

	config.entry.manager.unshift('babel-polyfill');
	config.entry.preview.unshift('babel-polyfill');

	config.module.rules[3].exclude = path.join(__dirname, '../app/images/icons');

	config.module.rules.push({
		test: /\.scss$/,
		use: ['style-loader', 'css-loader', 'sass-loader'],
		include: [path.join(__dirname, '../app/styles')],
	});
	config.module.rules.push({
		test: /\.svg$/,
		use: [
			{
				loader: 'svg-sprite-loader',

module.exports = (baseConfig, env) => {
    const config = genDefaultConfig(baseConfig, env)

    config.module.rules.push({
        test: /\.(ts|tsx)$/,
        include: path.resolve(__dirname, '../typescript/'),
        loaders: ['ts-loader']
    })

    config.resolve.extensions.push('.ts', '.tsx')

    config.devtool = 'eval'

    return config
}

module.exports = (baseConfig, env) => {
    const config = genDefaultConfig(baseConfig, env);
    config.module.rules = cnfg.module.rules;
    return config;
};