extract css into a separate file

package.json

@@ -21,6 +21,7 @@
     "css-loader": "0.23.1",
     "eslint": "3.2.2",
     "eslint-config-kentcdodds": "^9.0.0",
+    "extract-text-webpack-plugin": "2.0.0-beta.3",
     "ghooks": "1.3.2",
     "html-webpack-plugin": "2.22.0",
     "http-server": "0.9.0",

webpack.config.babel.js

@@ -4,6 +4,7 @@ const webpack = require('webpack')
 const ProgressBarPlugin = require('progress-bar-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const webpackValidator = require('webpack-validator')
 const {getIfUtils, removeEmpty} = require('webpack-config-utils')
 
@@ -24,11 +25,18 @@ module.exports = env => {
     module: {
       loaders: [
         {test: /\.js$/, loaders: ['babel'], exclude: /node_modules/},
-        {test: /\.css$/, loaders: ['style', 'css']},
+        {
+          test: /\.css$/,
+          loader: ExtractTextPlugin.extract({
+            fallbackLoader: 'style',
+            loader: 'css',
+          })
+        },
       ],
     },
     plugins: removeEmpty([
       new ProgressBarPlugin(),
+      new ExtractTextPlugin(ifProd('styles.[name].[chunkhash].css', 'styles.[name].css')),
       ifProd(new InlineManifestWebpackPlugin()),
       ifProd(new webpack.optimize.CommonsChunkPlugin({
         names: ['vendor', 'manifest'],