Fixed that darn CSS extraction thingy

build

@@ -18,15 +18,20 @@ set -o errexit
 
 # Build static assets
 
+echo ""
 if  [ "${1:-dev}" == "dev" ]; then
-  echo "Bundling development build and inserting it into HTML template"
+  echo "================================================================"
+  echo " Bundling development build and inserting it into HTML template"
+  echo "================================================================"
+  echo ""
   webpack --config='webpack.config.dev.js' --progress --profile --colors
 elif [ "${1:-dev}" == "prod" ]; then
-  echo "Testing production. Minifying + bundling production build and inserting it into HTML template"
-  webpack --config='webpack.config.testprod.js' --progress --profile --colors
-elif [ "${1:-dev}" == "deploy" ]; then
-  echo "Building for deployment. Minifying + bundling production build and inserting it into HTML template"
-  webpack --config='webpack.config.deploy.js' --progress --profile --colors
+  echo "=========================================================="
+  echo " Building for production. Minifying + bundling production"
+  echo "         build and inserting it into HTML template"
+  echo "=========================================================="
+  echo ""
+  webpack --config='webpack.config.prod.js' --progress --profile --colors
 else
   echo "Incorrect flags passed"
   exit 1
@@ -36,17 +41,23 @@ build_status=$?
 
 if [ $build_status == 0 ]; then
 
-  echo "Building static assets."
   # I haven't figured out how to both generate correct paths in the webpack HTML
   # template, and have the resulting index.html be put in the right folders.
   # Yes, this is an ugly hack around my incompetence, but it works - Job
   mv ./python/loom_viewer/index.html ./python/loom_viewer/static/index.html
 
   cd python
-  echo "Installing loom python package"
+  echo ""
+  echo "================================"
+  echo " Installing loom python package"
+  echo "================================"
+  echo ""
   python setup.py install --force
   cd ..
 else
-  echo "Minification not finished properly, aborting build"
+  echo ""
+  echo ""
+  echo " Minification not finished properly, aborting build"
+  echo ""
   exit $build_status
 fi

client/components/heatmap/heatmap.js

@@ -1,4 +1,6 @@
 import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 

client/loom.js

@@ -14,7 +14,7 @@ import 'react-virtualized-select/styles.css';
 import 'rc-slider/assets/index.css';
 
 // Modified for crisp zoom
-import './css/leaflet_crisp.css';
+// import './css/leaflet_crisp.css';
 // Required for react-bootstrap
 import './css/bootstrap.css';
 import './css/bootstrap-theme.css';

deploy

@@ -1,11 +1,20 @@
 #! /bin/bash
 
-./build deploy
+echo ""
+echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
+echo "!! Don't forget to update _version.py before deploying !!"
+echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
+echo ""
+./build prod
 build_status=$?
 if [ $build_status == 0 ]; then
   cd python
-  echo "Don't forget to update _version.py before deploying!'"
-  echo "Submitting to PyPi"
+  echo ""
+  echo "============================================================"
+  echo "                   Submitting to PyPi"
+  echo " (Did you remember to update _version.py before deploying?)"
+  echo "============================================================"
+  echo ""
   python setup.py sdist upload -r pypi
   cd ..
   echo ""

webpack.config.dev.js

@@ -1,9 +1,8 @@
 const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-
-// webpack needs the trailing slash for output.publicPath
-const PUBLIC_PATH = 'http://localhost:8003/';
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const CssoWebpackPlugin = require('csso-webpack-plugin').default;
 
 module.exports = {
 	entry: {
@@ -13,31 +12,32 @@ module.exports = {
 		path: path.join(__dirname, './python/loom_viewer'),
 		filename: '[name].[hash].js',
 		sourceMapFilename: '[name].[hash].map',
-		publicPath: PUBLIC_PATH,
 	},
 	module: {
-		loaders: [
+		rules: [
 			{
 				test: /\.css$/,
-				use: [
-					'style-loader',
-					'css-loader',
-				],
+				use: ExtractTextPlugin.extract({
+					fallback: 'style-loader',
+					use: 'css-loader',
+				}),
 			},
 			{
 				test: /\.(png|jpg|gif)$/,
 				loader: 'file-loader',
 				options: {
-					publicPath: PUBLIC_PATH,
-					name: 'static/images/[name]-[hash].[ext]',
+					name: '[name]-[hash].[ext]',
+					outputPath: 'static/',
+					publicPath: '/',
 				},
 			},
 			{
 				test: /\.(svg|eot|ttf|woff|woff2)$/,
 				loader: 'file-loader',
 				options: {
-					publicPath: PUBLIC_PATH,
-					name: 'static/fonts/[name]-[hash].[ext]',
+					name: '[name]-[hash].[ext]',
+					outputPath: 'static/',
+					publicPath: '/',
 				},
 			},
 			{
@@ -53,6 +53,8 @@ module.exports = {
 			'process.env.NODE_ENV': JSON.stringify('debug'),
 		}),
 		new webpack.optimize.ModuleConcatenationPlugin(),
+		new ExtractTextPlugin('/static/styles-[contenthash].css'),
+		new CssoWebpackPlugin(),
 		new HtmlWebpackPlugin({
 			template: path.join(__dirname + '/client/index.html'),
 			filename: 'index.html',

webpack.config.deploy.js → webpack.config.prod.js

@@ -1,8 +1,8 @@
 const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-
-const PUBLIC_PATH = 'http://loom.linnarssonlab.org/';
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const CssoWebpackPlugin = require('csso-webpack-plugin').default;
 
 const uglifySettings = {
 	mangle: {
@@ -50,42 +50,30 @@ module.exports = {
 		sourceMapFilename: '[name].[hash].map',
 	},
 	module: {
-		loaders: [
+		rules: [
 			{
 				test: /\.css$/,
-				use: [
-					{
-						loader: 'style-loader',
-						options: {
-							publicPath: PUBLIC_PATH,
-							minimize: true,
-							sourceMap: false,
-						},
-					},
-					{
-						loader: 'css-loader',
-						options: {
-							publicPath: PUBLIC_PATH,
-							minimize: true,
-							sourceMap: false,
-						},
-					},
-				],
+				use: ExtractTextPlugin.extract({
+					fallback: 'style-loader',
+					use: 'css-loader',
+				}),
 			},
 			{
 				test: /\.(png|jpg|gif)$/,
 				loader: 'file-loader',
 				options: {
-					publicPath: PUBLIC_PATH,
-					name: 'static/images/[name]-[hash].[ext]',
+					name: '[name]-[hash].[ext]',
+					outputPath: 'static/',
+					publicPath: '/',
 				},
 			},
 			{
 				test: /\.(svg|eot|ttf|woff|woff2)$/,
 				loader: 'file-loader',
 				options: {
-					publicPath: PUBLIC_PATH,
-					name: 'static/fonts/[name]-[hash].[ext]',
+					name: '[name]-[hash].[ext]',
+					outputPath: 'static/',
+					publicPath: '/',
 				},
 			},
 			{
@@ -102,6 +90,8 @@ module.exports = {
 		}),
 		new webpack.optimize.ModuleConcatenationPlugin(),
 		new webpack.optimize.UglifyJsPlugin(uglifySettings),
+		new ExtractTextPlugin('/static/styles-[contenthash].css'),
+		new CssoWebpackPlugin(),
 		new HtmlWebpackPlugin({
 			template: path.join(__dirname + '/client/index.html'),
 			filename: 'index.html',