Pass default webpack config as third argument in Full Control Mode

app/angular/src/server/config.js

@@ -2,6 +2,7 @@
 import fs from 'fs';
 import path from 'path';
 import { logger } from '@storybook/node-logger';
+import { createDefaultWebpackConfig } from '@storybook/core/server';
 import loadBabelConfig from './babel_config';
 import loadTsConfig from './ts_config';
 import {
@@ -47,22 +48,28 @@ export default function(configType, baseConfig, configDir) {
     logger.info('=> Loading angular-cli config.');
   }
 
+  const defaultConfig = applyAngularCliWebpackConfig(
+    createDefaultWebpackConfig(config),
+    cliWebpackConfigOptions
+  );
+
   // Check whether user has a custom webpack config file and
   // return the (extended) base configuration if it's not available.
   const customConfigPath = path.resolve(configDir, 'webpack.config.js');
 
   if (!fs.existsSync(customConfigPath)) {
     logger.info('=> Using default webpack setup based on "angular-cli".');
-    const configPath = path.resolve(__dirname, './config/defaults/webpack.config.js');
-    const customConfig = require(configPath);
-
-    return applyAngularCliWebpackConfig(customConfig(config), cliWebpackConfigOptions);
+    return defaultConfig;
   }
   const customConfig = require(customConfigPath);
 
   if (typeof customConfig === 'function') {
     logger.info('=> Loading custom webpack config (full-control mode).');
-    return customConfig(applyAngularCliWebpackConfig(config, cliWebpackConfigOptions), configType);
+    return customConfig(
+      applyAngularCliWebpackConfig(config, cliWebpackConfigOptions),
+      configType,
+      defaultConfig
+    );
   }
   logger.info('=> Loading custom webpack config (extending mode).');
 

app/angular/src/server/config/defaults/webpack.config.js

@@ -1,5 +1,7 @@
+import deprecate from 'util-deprecate';
 import { createDefaultWebpackConfig } from '@storybook/core/server';
-import { includePaths } from '../utils';
 
-module.exports = storybookBaseConfig =>
-  createDefaultWebpackConfig(storybookBaseConfig, includePaths);
+module.exports = deprecate(
+  createDefaultWebpackConfig,
+  "importing default webpack config generator from '@storybook/angular/dist/server/config/defaults/webpack.config.js' is deprecated. Use third argument of your exported function instead. See https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode--default"
+);

app/polymer/src/server/config.js

@@ -3,6 +3,7 @@ import fs from 'fs';
 import path from 'path';
 import findCacheDir from 'find-cache-dir';
 import { logger } from '@storybook/node-logger';
+import { createDefaultWebpackConfig } from '@storybook/core/server';
 import loadBabelConfig from './babel_config';
 
 // `baseConfig` is a webpack configuration bundled with storybook.
@@ -41,22 +42,21 @@ export default function(configType, baseConfig, configDir) {
     config.entry.manager.splice(1, 0, storybookDefaultAddonsPath);
   }
 
+  const defaultConfig = createDefaultWebpackConfig(config);
+
   // Check whether user has a custom webpack config file and
   // return the (extended) base configuration if it's not available.
   const customConfigPath = path.resolve(configDir, 'webpack.config.js');
 
   if (!fs.existsSync(customConfigPath)) {
     logger.info('=> Using default webpack setup based on "polymer-cli".');
-    const configPath = path.resolve(__dirname, './config/defaults/webpack.config.js');
-    const customConfig = require(configPath);
-
-    return customConfig(config);
+    return defaultConfig;
   }
   const customConfig = require(customConfigPath);
 
   if (typeof customConfig === 'function') {
     logger.info('=> Loading custom webpack config (full-control mode).');
-    return customConfig(config, configType);
+    return customConfig(config, configType, defaultConfig);
   }
   logger.info('=> Loading custom webpack config (extending mode).');
   return {

app/polymer/src/server/config/defaults/webpack.config.js

@@ -1,5 +1,7 @@
+import deprecate from 'util-deprecate';
 import { createDefaultWebpackConfig } from '@storybook/core/server';
-import { includePaths } from '../utils';
 
-module.exports = storybookBaseConfig =>
-  createDefaultWebpackConfig(storybookBaseConfig, includePaths);
+module.exports = deprecate(
+  createDefaultWebpackConfig,
+  "importing default webpack config generator from '@storybook/polymer/dist/server/config/defaults/webpack.config.js' is deprecated. Use third argument of your exported function instead. See https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode--default"
+);

app/react-native/src/server/config.js

@@ -2,6 +2,7 @@ import fs from 'fs';
 import path from 'path';
 import JSON5 from 'json5';
 import findCacheDir from 'find-cache-dir';
+import { createDefaultWebpackConfig } from '@storybook/core/server';
 
 // avoid ESLint errors
 const logger = console;
@@ -80,13 +81,13 @@ export default function(configType, baseConfig, projectDir, configDir) {
         ? path.resolve(babelConfigDir, babelConfig.extends)
         : path.resolve(babelConfig.extends);
     }
-    config.module.loaders[0].query = babelConfig;
+    config.module.rules[0].query = babelConfig;
   }
 
   // This is a feature of `babel-loader` for webpack (not Babel itself).
   // It enables a cache directory for faster-rebuilds
   // `find-cache-dir` will create the cache directory under the node_modules directory.
-  config.module.loaders[0].query.cacheDirectory = findCacheDir({
+  config.module.rules[0].query.cacheDirectory = findCacheDir({
     name: 'react-storybook',
   });
 
@@ -101,19 +102,21 @@ export default function(configType, baseConfig, projectDir, configDir) {
     config.entry.manager.unshift(storybookDefaultAddonsPath);
   }
 
+  const defaultConfig = createDefaultWebpackConfig(config);
+
   // Check whether user has a custom webpack config file and
   // return the (extended) base configuration if it's not available.
-  let customConfigPath = path.resolve(configDir, 'webpack.config.js');
+  const customConfigPath = path.resolve(configDir, 'webpack.config.js');
   if (!fs.existsSync(customConfigPath)) {
     logger.info('=> Using default webpack setup based on "Create React App".');
-    customConfigPath = path.resolve(__dirname, './config/defaults/webpack.config.js');
+    return defaultConfig;
   }
 
   const customConfig = require(customConfigPath); // eslint-disable-line
 
   if (typeof customConfig === 'function') {
     logger.info('=> Loading custom webpack config (full-control mode).');
-    return customConfig(config, configType);
+    return customConfig(config, configType, defaultConfig);
   }
 
   logger.info('=> Loading custom webpack config.');
@@ -129,9 +132,9 @@ export default function(configType, baseConfig, projectDir, configDir) {
     plugins: [...config.plugins, ...(customConfig.plugins || [])],
     module: {
       ...config.module,
-      // We need to use our and custom loaders.
+      // We need to use our and custom rules.
       ...customConfig.module,
-      loaders: [...config.module.loaders, ...(customConfig.module.loaders || [])],
+      rules: [...config.module.rules, ...(customConfig.module.rules || [])],
     },
   };
 }

app/react-native/src/server/config/defaults/webpack.config.js

@@ -1,63 +1,7 @@
-import autoprefixer from 'autoprefixer';
-import { includePaths } from '../utils';
+import deprecate from 'util-deprecate';
+import { createDefaultWebpackConfig } from '@storybook/core/server';
 
-// Add a default custom config which is similar to what React Create App does.
-module.exports = storybookBaseConfig => {
-  const newConfig = { ...storybookBaseConfig };
-
-  newConfig.module.loaders = [
-    ...newConfig.module.loaders,
-    {
-      test: /\.css?$/,
-      include: includePaths,
-      use: [
-        require.resolve('style-loader'),
-        require.resolve('css-loader'),
-        {
-          loader: require.resolve('postcss-loader'),
-          options: {
-            plugins: () => [
-              autoprefixer({
-                browsers: ['>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9'],
-              }),
-            ],
-          },
-        },
-      ],
-    },
-    {
-      test: /\.json$/,
-      include: includePaths,
-      loader: require.resolve('json-loader'),
-    },
-    {
-      test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
-      include: includePaths,
-      loader: require.resolve('file-loader'),
-      query: {
-        name: 'static/media/[name].[hash:8].[ext]',
-      },
-    },
-    {
-      test: /\.(mp4|webm)(\?.*)?$/,
-      include: includePaths,
-      loader: require.resolve('url-loader'),
-      query: {
-        limit: 10000,
-        name: 'static/media/[name].[hash:8].[ext]',
-      },
-    },
-  ];
-
-  newConfig.resolve = {
-    ...newConfig.resolve,
-    alias: {
-      ...((newConfig.resolve && newConfig.resolve.alias) || {}),
-      // This is to support NPM2
-      'babel-runtime/regenerator': require.resolve('babel-runtime/regenerator'),
-    },
-  };
-
-  // Return the altered config
-  return newConfig;
-};
+module.exports = deprecate(
+  createDefaultWebpackConfig,
+  "importing default webpack config generator from '@storybook/react-native/dist/server/config/defaults/webpack.config.js' is deprecated. Use third argument of your exported function instead. See https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode--default"
+);

app/react-native/src/server/config/webpack.config.js

@@ -27,7 +27,7 @@ const getConfig = options => ({
     new CaseSensitivePathsPlugin(),
   ],
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.jsx?$/,
         loader: require.resolve('babel-loader'),

app/react-native/src/server/config/webpack.config.prod.js

@@ -47,7 +47,7 @@ const getConfig = options => {
       }),
     ],
     module: {
-      loaders: [
+      rules: [
         {
           test: /\.jsx?$/,
           loader: require.resolve('babel-loader'),

app/react/src/server/config.js

@@ -3,6 +3,7 @@ import fs from 'fs';
 import path from 'path';
 import findCacheDir from 'find-cache-dir';
 import { logger } from '@storybook/node-logger';
+import { createDefaultWebpackConfig } from '@storybook/core/server';
 import loadBabelConfig from './babel_config';
 
 // `baseConfig` is a webpack configuration bundled with storybook.
@@ -41,22 +42,21 @@ export default function(configType, baseConfig, configDir) {
     config.entry.manager.splice(1, 0, storybookDefaultAddonsPath);
   }
 
+  const defaultConfig = createDefaultWebpackConfig(config);
+
   // Check whether user has a custom webpack config file and
   // return the (extended) base configuration if it's not available.
   const customConfigPath = path.resolve(configDir, 'webpack.config.js');
 
   if (!fs.existsSync(customConfigPath)) {
     logger.info('=> Using default webpack setup based on "Create React App".');
-    const configPath = path.resolve(__dirname, './config/defaults/webpack.config.js');
-    const customConfig = require(configPath);
-
-    return customConfig(config);
+    return defaultConfig;
   }
   const customConfig = require(customConfigPath);
 
   if (typeof customConfig === 'function') {
     logger.info('=> Loading custom webpack config (full-control mode).');
-    return customConfig(config, configType);
+    return customConfig(config, configType, defaultConfig);
   }
   logger.info('=> Loading custom webpack config (extending mode).');
   return {

app/react/src/server/config/defaults/webpack.config.js

@@ -1,5 +1,7 @@
+import deprecate from 'util-deprecate';
 import { createDefaultWebpackConfig } from '@storybook/core/server';
-import { includePaths } from '../utils';
 
-module.exports = storybookBaseConfig =>
-  createDefaultWebpackConfig(storybookBaseConfig, includePaths);
+module.exports = deprecate(
+  createDefaultWebpackConfig,
+  "importing default webpack config generator from '@storybook/react/dist/server/config/defaults/webpack.config.js' is deprecated. Use third argument of your exported function instead. See https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode--default"
+);

app/vue/src/server/config.js

@@ -2,6 +2,7 @@
 import fs from 'fs';
 import path from 'path';
 import findCacheDir from 'find-cache-dir';
+import { createDefaultWebpackConfig } from '@storybook/core/server';
 import loadBabelConfig from './babel_config';
 
 // avoid ESLint errors
@@ -43,22 +44,21 @@ export default function(configType, baseConfig, configDir) {
     config.entry.manager.splice(1, 0, storybookDefaultAddonsPath);
   }
 
+  const defaultConfig = createDefaultWebpackConfig(config);
+
   // Check whether user has a custom webpack config file and
   // return the (extended) base configuration if it's not available.
   const customConfigPath = path.resolve(configDir, 'webpack.config.js');
 
   if (!fs.existsSync(customConfigPath)) {
     logger.info('=> Using default webpack setup based on "vue-cli".');
-    const configPath = path.resolve(__dirname, './config/defaults/webpack.config.js');
-    const customConfig = require(configPath);
-
-    return customConfig(config);
+    return defaultConfig;
   }
   const customConfig = require(customConfigPath);
 
   if (typeof customConfig === 'function') {
     logger.info('=> Loading custom webpack config (full-control mode).');
-    return customConfig(config, configType);
+    return customConfig(config, configType, defaultConfig);
   }
   logger.info('=> Loading custom webpack config (extending mode).');
   return {

app/vue/src/server/config/defaults/webpack.config.js

@@ -1,5 +1,7 @@
+import deprecate from 'util-deprecate';
 import { createDefaultWebpackConfig } from '@storybook/core/server';
-import { includePaths } from '../utils';
 
-module.exports = storybookBaseConfig =>
-  createDefaultWebpackConfig(storybookBaseConfig, includePaths);
+module.exports = deprecate(
+  createDefaultWebpackConfig,
+  "importing default webpack config generator from '@storybook/vue/dist/server/config/defaults/webpack.config.js' is deprecated. Use third argument of your exported function instead. See https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode--default"
+);

docs/src/pages/configurations/custom-webpack-config/index.md

@@ -95,28 +95,21 @@ You may want to keep Storybook's [default config](/configurations/default-config
 If so, this is how you do it using the Full Control Mode.
 Add following content to the `webpack.config.js` in your Storybook config directory.
 
-> We plan to expose our default webpack-config as it's own package in the future.
-
 ```js
 const path = require('path');
 
-// load the default config generator.
-const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');
-
-module.exports = (baseConfig, env) => {
-  const config = genDefaultConfig(baseConfig, env);
-
-  // Extend it as you need.
+module.exports = (baseConfig, env, defaultConfig) => {
+  // Extend defaultConfig as you need.
 
   // For example, add typescript loader:
-  config.module.rules.push({
+  defaultConfig.module.rules.push({
     test: /\.(ts|tsx)$/,
     include: path.resolve(__dirname, '../src'),
     loader: require.resolve('ts-loader')
   });
-  config.resolve.extensions.push('.ts', '.tsx');
+  defaultConfig.resolve.extensions.push('.ts', '.tsx');
 
-  return config;
+  return defaultConfig;
 };
 ```