Merge pull request #4927 from storybooks/core/remove-basic-config

Core - Simplify custom webpack config

app/angular/src/server/options.js

@@ -2,7 +2,6 @@ import packageJson from '../../package.json';
 
 export default {
   packageJson,
-  defaultConfigName: 'angular-cli',
   frameworkPresets: [
     require.resolve('./framework-preset-angular.js'),
     require.resolve('./framework-preset-angular-cli.js'),

app/ember/src/server/options.js

@@ -2,6 +2,5 @@ import packageJson from '../../package.json';
 
 export default {
   packageJson,
-  defaultConfigName: 'ember-cli',
   frameworkPresets: [require.resolve('./framework-preset-babel-ember.js')],
 };

app/react/src/server/options.js

@@ -2,7 +2,6 @@ import packageJson from '../../package.json';
 
 export default {
   packageJson,
-  defaultConfigName: 'create-react-app',
   frameworkPresets: [
     require.resolve('./framework-preset-react.js'),
     require.resolve('./framework-preset-cra.js'),

examples/angular-cli/.storybook/webpack.config.ts

@@ -1,7 +1,9 @@
 const path = require('path');
 
-module.exports = (baseConfig: any) => {
-  baseConfig.module.rules.push({
+module.exports = {
+  module: {
+    rules: [
+      {
         test: [/\.stories\.tsx?$/, /index\.ts$/],
         loaders: [
           {
@@ -13,7 +15,7 @@ module.exports = (baseConfig: any) => {
         ],
         include: [path.resolve(__dirname, '../src')],
         enforce: 'pre',
-  });
-
-  return baseConfig;
+      },
+    ],
+  },
 };

examples/ember-cli/.storybook/webpack.config.js

@@ -1,12 +1,14 @@
 const path = require('path');
 
-module.exports = (storybookBaseConfig, configType, defaultConfig) => {
-  defaultConfig.module.rules.push({
+module.exports = {
+  module: {
+    rules: [
+      {
         test: [/\.stories\.js$/, /index\.js$/],
         loaders: [require.resolve('@storybook/addon-storysource/loader')],
         include: [path.resolve(__dirname, '../')],
         enforce: 'pre',
-  });
-
-  return defaultConfig;
+      },
+    ],
+  },
 };

examples/html-kitchen-sink/.storybook/webpack.config.js

@@ -1,12 +1,14 @@
 const path = require('path');
 
-module.exports = (storybookBaseConfig, configType, defaultConfig) => {
-  defaultConfig.module.rules.push({
+module.exports = {
+  module: {
+    rules: [
+      {
         test: [/\.stories\.js$/, /index\.js$/],
         loaders: [require.resolve('@storybook/addon-storysource/loader')],
         include: [path.resolve(__dirname, '../stories')],
         enforce: 'pre',
-  });
-
-  return defaultConfig;
+      },
+    ],
+  },
 };

examples/marko-cli/.storybook/webpack.config.js

@@ -1,12 +1,14 @@
 const path = require('path');
 
-module.exports = (storybookBaseConfig, configType, defaultConfig) => {
-  defaultConfig.module.rules.push({
+module.exports = {
+  module: {
+    rules: [
+      {
         test: [/\.stories\.js$/],
         loaders: [require.resolve('@storybook/addon-storysource/loader')],
         include: [path.resolve(__dirname, '../src')],
         enforce: 'pre',
-  });
-
-  return defaultConfig;
+      },
+    ],
+  },
 };

examples/mithril-kitchen-sink/.storybook/webpack.config.js

@@ -1,12 +1,14 @@
 const path = require('path');
 
-module.exports = (storybookBaseConfig, configType, defaultConfig) => {
-  defaultConfig.module.rules.push({
+module.exports = {
+  module: {
+    rules: [
+      {
         test: [/\.stories\.js$/],
         loaders: [require.resolve('@storybook/addon-storysource/loader')],
         include: [path.resolve(__dirname, '../src')],
         enforce: 'pre',
-  });
-
-  return defaultConfig;
+      },
+    ],
+  },
 };

examples/official-storybook/webpack.config.js

@@ -1,12 +1,12 @@
 const path = require('path');
 const { DefinePlugin, ContextReplacementPlugin } = require('webpack');
 
-module.exports = async (baseConfig, env, defaultConfig) => ({
-  ...defaultConfig,
+module.exports = async ({ config }) => ({
+  ...config,
   module: {
-    ...defaultConfig.module,
+    ...config.module,
     rules: [
-      ...defaultConfig.module.rules,
+      ...config.module.rules,
       {
         test: /\.stories\.jsx?$/,
         use: require.resolve('@storybook/addon-storysource/loader'),
@@ -19,7 +19,7 @@ module.exports = async (baseConfig, env, defaultConfig) => ({
       },
       {
         test: /\.js/,
-        use: defaultConfig.module.rules[0].use,
+        use: config.module.rules[0].use,
         include: [
           path.resolve(__dirname, '../../lib/ui/src'),
           path.resolve(__dirname, '../../lib/components/src'),
@@ -27,13 +27,8 @@ module.exports = async (baseConfig, env, defaultConfig) => ({
       },
     ],
   },
-  resolve: {
-    ...defaultConfig.resolve,
-    // https://github.com/graphql/graphql-js#using-in-a-browser
-    extensions: ['.mjs', ...defaultConfig.resolve.extensions],
-  },
   plugins: [
-    ...defaultConfig.plugins,
+    ...config.plugins,
     // graphql sources check process variable
     new DefinePlugin({
       process: JSON.stringify(true),

examples/polymer-cli/.storybook/webpack.config.js

@@ -1,16 +1,16 @@
 const path = require('path');
 const webpack = require('webpack');
 
-module.exports = (storybookBaseConfig, configType, defaultConfig) => {
-  defaultConfig.module.rules.push({
+module.exports = {
+  module: {
+    rules: [
+      {
         test: [/\.stories\.js$/, /index\.js$/],
         loaders: [require.resolve('@storybook/addon-storysource/loader')],
         include: [path.resolve(__dirname, '../src')],
         enforce: 'pre',
-  });
-
-  // TEMP fix: https://github.com/plotly/plotly.js/issues/2466#issuecomment-372924684
-  defaultConfig.plugins.push(new webpack.IgnorePlugin(/vertx/));
-
-  return defaultConfig;
+      },
+    ],
+  },
+  plugins: [new webpack.IgnorePlugin(/vertx/)],
 };

examples/riot-kitchen-sink/.storybook/webpack.config.js

@@ -1,17 +1,18 @@
 const path = require('path');
 
-module.exports = (storybookBaseConfig, configType, defaultConfig) => {
-  defaultConfig.module.rules.push({
+module.exports = {
+  module: {
+    rules: [
+      {
         test: [/\.stories\.js$/, /index\.js$/],
         loaders: [require.resolve('@storybook/addon-storysource/loader')],
         include: [path.resolve(__dirname, '../src')],
         enforce: 'pre',
-  });
-
-  defaultConfig.module.rules.push({
+      },
+      {
         test: /\.txt$/,
         use: 'raw-loader',
-  });
-
-  return defaultConfig;
+      },
+    ],
+  },
 };

examples/svelte-kitchen-sink/.storybook/webpack.config.js

@@ -1,12 +1,14 @@
 const path = require('path');
 
-module.exports = (storybookBaseConfig, configType, defaultConfig) => {
-  defaultConfig.module.rules.push({
+module.exports = {
+  module: {
+    rules: [
+      {
         test: [/\.stories\.js$/, /index\.js$/],
         loaders: [require.resolve('@storybook/addon-storysource/loader')],
         include: [path.resolve(__dirname, '../src')],
         enforce: 'pre',
-  });
-
-  return defaultConfig;
+      },
+    ],
+  },
 };

examples/vue-kitchen-sink/.storybook/webpack.config.js

@@ -1,12 +1,14 @@
 const path = require('path');
 
-module.exports = (storybookBaseConfig, configType, defaultConfig) => {
-  defaultConfig.module.rules.push({
+module.exports = {
+  module: {
+    rules: [
+      {
         test: [/\.stories\.js$/, /index\.js$/],
         loaders: [require.resolve('@storybook/addon-storysource/loader')],
         include: [path.resolve(__dirname, '../src')],
         enforce: 'pre',
-  });
-
-  return defaultConfig;
+      },
+    ],
+  },
 };

lib/core/src/server/preview/custom-webpack-preset.js

@@ -3,40 +3,31 @@ import loadCustomWebpackConfig from '../utils/load-custom-webpack-config';
 import mergeConfigs from '../utils/merge-webpack-config';
 import { createDefaultWebpackConfig } from './base-webpack.config';
 
-function logConfigName(defaultConfigName) {
-  if (!defaultConfigName) {
-    logger.info('=> Using default webpack setup.');
-  } else {
-    logger.info(`=> Using default webpack setup based on "${defaultConfigName}".`);
-  }
-}
-
 async function createFinalDefaultConfig(presets, config, options) {
   const defaultConfig = createDefaultWebpackConfig(config);
   return presets.apply('webpackFinal', defaultConfig, options);
 }
 
 export async function webpack(config, options) {
-  const { configDir, configType, defaultConfigName, presets } = options;
+  const { configDir, configType, presets } = options;
 
-  const finalConfig = await presets.apply('webpackFinal', config, options);
+  const finalDefaultConfig = await createFinalDefaultConfig(presets, config, options);
 
   // Check whether user has a custom webpack config file and
   // return the (extended) base configuration if it's not available.
   const customConfig = loadCustomWebpackConfig(configDir);
 
   if (customConfig === null) {
-    logConfigName(defaultConfigName);
-    return createFinalDefaultConfig(presets, config, options);
+    logger.info('=> Using default webpack setup.');
+    return finalDefaultConfig;
   }
 
   if (typeof customConfig === 'function') {
     logger.info('=> Loading custom webpack config (full-control mode).');
-    const finalDefaultConfig = await createFinalDefaultConfig(presets, config, options);
-    return customConfig(finalConfig, configType, finalDefaultConfig);
+    return customConfig({ config: finalDefaultConfig, mode: configType });
   }
 
   logger.info('=> Loading custom webpack config (extending mode).');
 
-  return mergeConfigs(finalConfig, customConfig);
+  return mergeConfigs(finalDefaultConfig, customConfig);
 }