Remove default webpack config for all config types.

Now we only use the Create React App based config
if there's no custom webpack config.
This will fix issues like #347.

dist/server/build.js

@@ -25,7 +25,7 @@ var _package = require('../../package.json');
 
 var _package2 = _interopRequireDefault(_package);
 
-var _webpackConfig = require('./webpack.config.prod');
+var _webpackConfig = require('./config/webpack.config.prod');
 
 var _webpackConfig2 = _interopRequireDefault(_webpackConfig);
 

dist/server/config.js

@@ -60,7 +60,8 @@ exports.default = function (configType, baseConfig, configDir) {
   // return the (extended) base configuration if it's not available.
   var customConfigPath = _path2.default.resolve(configDir, 'webpack.config.js');
   if (!_fs2.default.existsSync(customConfigPath)) {
-    return config;
+    logger.info('=> Using default webpack setup based on "Create React App".');
+    customConfigPath = _path2.default.resolve(__dirname, './config/defaults/webpack.config.js');
   }
 
   var customConfig = require(customConfigPath);

dist/server/config/defaults/webpack.config.js

@@ -0,0 +1,49 @@
+'use strict';
+
+var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
+
+var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
+
+var _autoprefixer = require('autoprefixer');
+
+var _autoprefixer2 = _interopRequireDefault(_autoprefixer);
+
+var _paths = require('../paths');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Add a default custom config which is similar to what React Create App does.
+module.exports = function (storybookBaseConfig, configType) {
+  var newConfig = storybookBaseConfig;
+  newConfig.module.loaders = [].concat((0, _toConsumableArray3.default)(newConfig.module.loaders), [{
+    test: /\.css?$/,
+    include: _paths.includePaths,
+    loader: 'style!css!postcss'
+  }, {
+    test: /\.json$/,
+    include: _paths.includePaths,
+    loader: 'json'
+  }, {
+    test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
+    include: _paths.includePaths,
+    loader: 'file',
+    query: {
+      name: 'static/media/[name].[ext]'
+    }
+  }, {
+    test: /\.(mp4|webm)(\?.*)?$/,
+    include: _paths.includePaths,
+    loader: 'url',
+    query: {
+      limit: 10000,
+      name: 'static/media/[name].[ext]'
+    }
+  }]);
+
+  newConfig.postcss = function () {
+    return [_autoprefixer2.default];
+  };
+
+  // Return the altered config
+  return newConfig;
+};

dist/server/paths.js → dist/server/config/paths.js

@@ -11,4 +11,4 @@ var _path2 = _interopRequireDefault(_path);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var includePaths = exports.includePaths = [_path2.default.resolve('./'), __dirname, _path2.default.resolve(__dirname, '../../src')];
+var includePaths = exports.includePaths = [_path2.default.resolve('./'), __dirname, _path2.default.resolve(__dirname, '../../../src')];

dist/server/webpack.config.js → dist/server/config/webpack.config.js

@@ -14,10 +14,6 @@ var _webpack2 = _interopRequireDefault(_webpack);
 
 var _paths = require('./paths');
 
-var _autoprefixer = require('autoprefixer');
-
-var _autoprefixer2 = _interopRequireDefault(_autoprefixer);
-
 var _caseSensitivePathsWebpackPlugin = require('case-sensitive-paths-webpack-plugin');
 
 var _caseSensitivePathsWebpackPlugin2 = _interopRequireDefault(_caseSensitivePathsWebpackPlugin);
@@ -27,7 +23,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var config = {
   devtool: '#cheap-module-eval-source-map',
   entry: {
-    manager: [_path2.default.resolve(__dirname, '../client/manager')],
+    manager: [_path2.default.resolve(__dirname, '../../client/manager')],
     preview: [_path2.default.resolve(__dirname, './error_enhancements'), 'webpack-hot-middleware/client?noInfo=true']
   },
   output: {
@@ -42,33 +38,7 @@ var config = {
       loader: 'babel',
       query: require('./babel.js'),
       include: _paths.includePaths
-    }, {
-      test: /\.css?$/,
-      include: _paths.includePaths,
-      loader: 'style!css!postcss'
-    }, {
-      test: /\.json$/,
-      include: _paths.includePaths,
-      loader: 'json'
-    }, {
-      test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
-      include: _paths.includePaths,
-      loader: 'file',
-      query: {
-        name: 'static/media/[name].[ext]'
-      }
-    }, {
-      test: /\.(mp4|webm)(\?.*)?$/,
-      include: _paths.includePaths,
-      loader: 'url',
-      query: {
-        limit: 10000,
-        name: 'static/media/[name].[ext]'
-      }
     }]
-  },
-  postcss: function postcss() {
-    return [_autoprefixer2.default];
   }
 };
 

dist/server/webpack.config.prod.js → dist/server/config/webpack.config.prod.js

@@ -14,15 +14,11 @@ var _webpack2 = _interopRequireDefault(_webpack);
 
 var _paths = require('./paths');
 
-var _autoprefixer = require('autoprefixer');
-
-var _autoprefixer2 = _interopRequireDefault(_autoprefixer);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var entries = {
   preview: [],
-  manager: [_path2.default.resolve(__dirname, '../client/manager')]
+  manager: [_path2.default.resolve(__dirname, '../../client/manager')]
 };
 
 var config = {
@@ -52,34 +48,7 @@ var config = {
       loader: 'babel',
       query: require('./babel.prod.js'),
       include: _paths.includePaths
-    }, {
-      test: /\.css$/,
-      include: _paths.includePaths,
-      loader: 'style!css!postcss'
-    }, {
-      test: /\.json$/,
-      include: _paths.includePaths,
-      loader: 'json'
-    }, {
-      test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
-      include: _paths.includePaths,
-      loader: 'file',
-      query: {
-        name: 'static/media/[name].[ext]'
-      }
-    }, {
-      test: /\.(mp4|webm)(\?.*)?$/,
-      include: _paths.includePaths,
-      loader: 'url',
-      query: {
-        limit: 10000,
-        name: 'static/media/[name].[ext]'
-      }
     }]
-  },
-
-  postcss: function postcss() {
-    return [_autoprefixer2.default];
   }
 };
 

dist/server/middleware.js

@@ -52,7 +52,7 @@ var _webpackHotMiddleware = require('webpack-hot-middleware');
 
 var _webpackHotMiddleware2 = _interopRequireDefault(_webpackHotMiddleware);
 
-var _webpack3 = require('./webpack.config');
+var _webpack3 = require('./config/webpack.config');
 
 var _webpack4 = _interopRequireDefault(_webpack3);
 

src/server/build.js

@@ -8,7 +8,7 @@ import path from 'path';
 import fs from 'fs';
 import shelljs from 'shelljs';
 import packageJson from '../../package.json';
-import baseConfig from './webpack.config.prod';
+import baseConfig from './config/webpack.config.prod';
 import loadConfig from './config';
 import getIndexHtml from './index.html';
 import getIframeHtml from './iframe.html';

src/server/config.js

@@ -96,9 +96,10 @@ export default function (configType, baseConfig, configDir) {
 
   // 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');
+  let customConfigPath = path.resolve(configDir, 'webpack.config.js');
   if (!fs.existsSync(customConfigPath)) {
-    return config;
+    logger.info('=> Using default webpack setup based on "Create React App".');
+    customConfigPath = path.resolve(__dirname, './config/defaults/webpack.config.js');
   }
 
   const customConfig = require(customConfigPath);

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

@@ -0,0 +1,44 @@
+import autoprefixer from 'autoprefixer';
+import { includePaths } from '../paths';
+
+// Add a default custom config which is similar to what React Create App does.
+module.exports = (storybookBaseConfig, configType) => {
+  const newConfig = storybookBaseConfig;
+  newConfig.module.loaders = [
+    ...newConfig.module.loaders,
+    {
+      test: /\.css?$/,
+      include: includePaths,
+      loader: 'style!css!postcss',
+    },
+    {
+      test: /\.json$/,
+      include: includePaths,
+      loader: 'json',
+    },
+    {
+      test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
+      include: includePaths,
+      loader: 'file',
+      query: {
+        name: 'static/media/[name].[ext]',
+      },
+    },
+    {
+      test: /\.(mp4|webm)(\?.*)?$/,
+      include: includePaths,
+      loader: 'url',
+      query: {
+        limit: 10000,
+        name: 'static/media/[name].[ext]',
+      },
+    },
+  ];
+
+  newConfig.postcss = () => {
+    return [autoprefixer];
+  };
+
+  // Return the altered config
+  return newConfig;
+};

src/server/paths.js → src/server/config/paths.js

@@ -2,5 +2,5 @@ import path from 'path';
 
 export const includePaths = [
   path.resolve('./'),
-  __dirname, path.resolve(__dirname, '../../src'),
+  __dirname, path.resolve(__dirname, '../../../src'),
 ];

src/server/webpack.config.js → src/server/config/webpack.config.js

@@ -1,14 +1,13 @@
 import path from 'path';
 import webpack from 'webpack';
 import { includePaths } from './paths';
-import autoprefixer from 'autoprefixer';
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
 
 const config = {
   devtool: '#cheap-module-eval-source-map',
   entry: {
     manager: [
-      path.resolve(__dirname, '../client/manager'),
+      path.resolve(__dirname, '../../client/manager'),
     ],
     preview: [
       path.resolve(__dirname, './error_enhancements'),
@@ -33,38 +32,8 @@ const config = {
         query: require('./babel.js'),
         include: includePaths,
       },
-      {
-        test: /\.css?$/,
-        include: includePaths,
-        loader: 'style!css!postcss',
-      },
-      {
-        test: /\.json$/,
-        include: includePaths,
-        loader: 'json',
-      },
-      {
-        test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
-        include: includePaths,
-        loader: 'file',
-        query: {
-          name: 'static/media/[name].[ext]',
-        },
-      },
-      {
-        test: /\.(mp4|webm)(\?.*)?$/,
-        include: includePaths,
-        loader: 'url',
-        query: {
-          limit: 10000,
-          name: 'static/media/[name].[ext]',
-        },
-      },
     ],
   },
-  postcss() {
-    return [autoprefixer];
-  },
 };
 
 export default config;

src/server/webpack.config.prod.js → src/server/config/webpack.config.prod.js

@@ -1,12 +1,11 @@
 import path from 'path';
 import webpack from 'webpack';
 import { includePaths } from './paths';
-import autoprefixer from 'autoprefixer';
 
 const entries = {
   preview: [],
   manager: [
-    path.resolve(__dirname, '../client/manager'),
+    path.resolve(__dirname, '../../client/manager'),
   ],
 };
 
@@ -44,39 +43,8 @@ const config = {
         query: require('./babel.prod.js'),
         include: includePaths,
       },
-      {
-        test: /\.css$/,
-        include: includePaths,
-        loader: 'style!css!postcss',
-      },
-      {
-        test: /\.json$/,
-        include: includePaths,
-        loader: 'json',
-      },
-      {
-        test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
-        include: includePaths,
-        loader: 'file',
-        query: {
-          name: 'static/media/[name].[ext]',
-        },
-      },
-      {
-        test: /\.(mp4|webm)(\?.*)?$/,
-        include: includePaths,
-        loader: 'url',
-        query: {
-          limit: 10000,
-          name: 'static/media/[name].[ext]',
-        },
-      },
     ],
   },
-
-  postcss() {
-    return [autoprefixer];
-  },
 };
 
 export default config;

src/server/middleware.js

@@ -2,7 +2,7 @@ import { Router } from 'express';
 import webpack from 'webpack';
 import webpackDevMiddleware from 'webpack-dev-middleware';
 import webpackHotMiddleware from 'webpack-hot-middleware';
-import baseConfig from './webpack.config';
+import baseConfig from './config/webpack.config';
 import loadConfig from './config';
 import getIndexHtml from './index.html';
 import getIframeHtml from './iframe.html';