Load CSS as a separate file

This prevents FOUC when loading at the cost of an extra request.

binderhub/templates/index.html

@@ -3,6 +3,7 @@
 {% block head %}
 <meta id="base-url" data-url="{{base_url}}">
 <script src="{{static_url("dist/bundle.js")}}"></script>
+<link href="{{static_url("dist/styles.css")}}" rel="stylesheet"></link>
 {{ super() }}
 <script>
  {% if submit %} window.submitBuild = true; {% endif %}

package.json

@@ -5,6 +5,7 @@
   "devDependencies": {
     "bootstrap": "^3.3.7",
     "css-loader": "^0.28.7",
+    "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^1.1.6",
     "jquery": "^3.2.1",
     "style-loader": "^0.19.1",

webpack.config.js

@@ -1,4 +1,5 @@
-var webpack = require('webpack');
+const webpack = require('webpack');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
 
 module.exports = {
     context: __dirname + "/binderhub/static/",
@@ -12,7 +13,10 @@ module.exports = {
         rules: [
             {
                 test: /\.css$/,
-                use: [ 'style-loader', 'css-loader' ]
+                use: ExtractTextPlugin.extract({
+                    fallback: "style-loader",
+                    use: "css-loader"
+                })
             },
             {
                 test: /\.(eot|woff|ttf|woff2|svg)$/,
@@ -25,6 +29,7 @@ module.exports = {
         new webpack.ProvidePlugin({
             $: 'jquery',
             jQuery: 'jquery',
-        })
+        }),
+        new ExtractTextPlugin("styles.css"),
     ]
 }