From 720e4718b50e8e85705adf0ac0c6d202deb579b3 Mon Sep 17 00:00:00 2001
From: "Kent C. Dodds" <kent@doddsfamily.us>
Date: Mon, 1 Aug 2016 06:22:09 -0600
Subject: [PATCH] extract css into a separate file

---
 package.json            |  1 +
 webpack.config.babel.js | 10 +++++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index fb5f33d..2c26739 100644
--- a/package.json
+++ b/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",
diff --git a/webpack.config.babel.js b/webpack.config.babel.js
index e454354..b54be36 100644
--- a/webpack.config.babel.js
+++ b/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'],