Bundle styles using ExtractTextPlugin

This fixes an issue with the distribution bundle where Chrome would
incorrectly resolve font locations and hence could not load them.

Author: martijnvermaat

index.html

@@ -14,6 +14,7 @@
   <div id="content">
     <h1>If you can see this, something is broken (or JS is not enabled)!!.</h1>
   </div>
+  <link rel="stylesheet" href="/dist/styles.css">
   <script type="text/javascript" src="/dist/main.js"></script>
 </body>
 </html>

package.json

@@ -31,6 +31,7 @@
     "eslint": "~1.10.3",
     "eslint-loader": "~1.1.1",
     "eslint-plugin-react": "~3.11.3",
+    "extract-text-webpack-plugin": "~1.0.1",
     "file-loader": "~0.8.5",
     "json-loader": "~0.5.1",
     "less": "~2.6.0",

webpack.config.js

@@ -3,6 +3,7 @@
 
 var path = require('path');
 var webpack = require('webpack');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 
 // Detect if we're running webpack dev server or building a distribution.
@@ -11,7 +12,8 @@ var devServer = path.basename(require.main.filename) === 'webpack-dev-server.js'
 
 var config = {
   plugins: [
-    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
+    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+    new ExtractTextPlugin('styles.css')
   ],
 
   entry: './scripts/init.jsx',
@@ -41,10 +43,10 @@ var config = {
       loader: 'babel-loader?stage=1&optional=runtime'
     }, {
       test: /\.css$/,
-      loader: 'style-loader!css-loader'
+      loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
     }, {
       test: /\.less$/,
-      loader: 'style-loader!css-loader!less-loader'
+      loader: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader')
     }, {
       test: /\.(png|jpg)$/,
       loader: 'url-loader?limit=8192'