Splitted webpack config into base and dev. Re-use it in .storybook webpack config.

.storybook/webpack.config.js

@@ -1,34 +1 @@
-/* global module, __dirname, require */
-var webpack = require("webpack");
-const path = require("path");
-
-module.exports = {
-  module: {
-    loaders: [
-      {
-        test: /\.((png)|(eot)|(woff)|(woff2)|(ttf)|(svg)|(gif))(\?v=\d+\.\d+\.\d+)?$/,
-        loader: 'url-loader?limit=100000'
-      },
-      { test: /\.json$/, loader: 'json-loader' },
-      {
-        test: /\.css$/,
-        loader: 'style!css?modules&importLoaders=1!postcss'
-      },
-      {
-        loader: 'babel',
-        test: /\.js?$/,
-        exclude: /(node_modules|bower_components)/,
-        query: {
-          cacheDirectory: true,
-          presets: ['react', 'es2015'],
-          plugins: ['transform-class-properties', 'transform-object-assign', 'transform-object-rest-spread']
-        }
-      }
-    ]
-  },
-
-  postcss: [
-    require("postcss-import")({addDependencyTo: webpack}),
-    require("postcss-cssnext")()
-  ],
-};
+module.exports = require('../webpack.base.js');

package.json

@@ -4,7 +4,7 @@
   "description": "Netlify CMS lets content editors work on structured content stored in git",
   "main": "index.js",
   "scripts": {
-    "start": "webpack-dev-server --config webpack.config.js",
+    "start": "webpack-dev-server --config webpack.dev.js",
     "test": "NODE_ENV=test mocha --recursive --compilers js:babel-register --require ./test/setup.js",
     "test:watch": "npm test -- --watch",
     "build": "webpack --config webpack.config.js",
@@ -75,6 +75,7 @@
     "url-loader": "^0.5.7",
     "webpack": "^1.13.2",
     "webpack-dev-server": "^1.15.1",
+    "webpack-merge": "^0.14.1",
     "webpack-postcss-tools": "^1.1.1",
     "whatwg-fetch": "^1.0.0"
   },

webpack.base.js

@@ -1,9 +1,4 @@
-/* global module, __dirname, require */
-var webpack = require('webpack');
-var path = require('path');
-
-const HOST = 'localhost';
-const PORT = '8080';
+const webpack = require('webpack');
 
 module.exports = {
   module: {
@@ -47,35 +42,4 @@ module.exports = {
     require('postcss-import')({ addDependencyTo: webpack }),
     require('postcss-cssnext')
   ],
-
-  plugins: [
-    new webpack.optimize.OccurenceOrderPlugin(),
-    new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoErrorsPlugin(),
-    new webpack.ProvidePlugin({
-      'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
-    })
-  ],
-
-  context: path.join(__dirname, 'src'),
-  entry: {
-    cms: [
-      'webpack/hot/dev-server',
-      `webpack-dev-server/client?http://${HOST}:${PORT}/`,
-      'react-hot-loader/patch',
-      './index'
-    ],
-  },
-  output: {
-    path: path.join(__dirname, 'dist'),
-    filename: '[name].js',
-    publicPath: `http://${HOST}:${PORT}/`,
-  },
-  externals: [/^vendor\/.+\.js$/],
-  devServer: {
-    hot: true,
-    contentBase: 'example/',
-    historyApiFallback: true,
-    devTool: 'cheap-module-source-map'
-  },
 };

webpack.dev.js

@@ -0,0 +1,37 @@
+/* global module, __dirname, require */
+const path = require('path');
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const HOST = 'localhost';
+const PORT = '8080';
+
+module.exports = merge.smart(require('./webpack.base.js'), {
+  entry: {
+    cms: [
+      'webpack/hot/dev-server',
+      `webpack-dev-server/client?http://${HOST}:${PORT}/`,
+      'react-hot-loader/patch',
+      './index'
+    ],
+  },
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: '[name].js',
+    publicPath: `http://${HOST}:${PORT}/`,
+  },
+  context: path.join(__dirname, 'src'),
+  plugins: [
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin(),
+    new webpack.ProvidePlugin({
+      'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
+    })
+  ],
+  devServer: {
+    hot: true,
+    contentBase: 'example/',
+    historyApiFallback: true,
+    devTool: 'cheap-module-source-map'
+  },
+});