A few additions for migration to webpack

* Fix issues on paths in build and dev files
* Skip yarn to reduce tooling requirements
* Minify CSS assets in production
* Reduce imports on fonts, hardcode font pieces more. There are problems
  with the font family names. Roboto mixin brings in everything as
  `Roboto-Slab-Bold`, which won't match local font name of 'Roboto Slab'
* Fix the development instance more:
  * Add file watching on reST files
  * Execute build docs command after webpack build

Things I'm still not sure about:

- [ ] The actual JS output, I haven't vetted this yet
- [ ] If woff2 and woff are enough for fonts. The NPM packages are missing other formats

package.json

@@ -4,13 +4,12 @@
   "version": "0.4.3",
   "private": true,
   "scripts": {
-    "start": "yarn webpack-dev-server --open --config webpack.dev.js",
-    "build": "yarn webpack --config webpack.prod.js"
+    "start": "webpack-dev-server --open --config webpack.dev.js",
+    "build": "webpack --config webpack.prod.js"
   },
   "dependencies": {
     "bourbon": "~4.3",
     "bourbon-neat": "~1.7",
-    "browserify": "^13.0.0",
     "css-loader": "^2.1.1",
     "file-loader": "^3.0.1",
     "font-awesome": "^4.7.0",
@@ -20,6 +19,7 @@
     "matchdep": "~1.0.1",
     "mini-css-extract-plugin": "^0.6.0",
     "node-sass": "^4.12.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
     "roboto-fontface": "^0.10.0",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
@@ -29,6 +29,8 @@
     "wyrm": "^1.0.9"
   },
   "devDependencies": {
-    "webpack-dev-server": "^3.3.1"
+    "webpack-dev-server": "^3.3.1",
+    "webpack-shell-plugin": "^0.5.0",
+    "webpack-watch-files-plugin": "^1.0.3"
   }
 }

src/sass/_theme_font_local.sass

@@ -1,6 +1,46 @@
-$lato-font-path: "~lato-font/fonts"
-$lato-variants: ('normal': 400, 'bold': 700)
-@import ~lato-font/scss/lato-font
+$lato-font-path: "~lato-font/fonts";
+$roboto-font-path: "~roboto-fontface/fonts/roboto-slab";
 
-$roboto-font-path: "~roboto-fontface/fonts"
-@import ~roboto-fontface/css/roboto-slab/sass/roboto-slab-fontface
+//  $font-full-path: '#{$roboto-font-path}/roboto-slab/Roboto-Slab';
+
+@font-face
+  font-family: 'Lato'
+  src: url('#{$lato-font-path}/lato-normal/lato-normal.woff2') format('woff2'), url('#{$lato-font-path}/lato-normal/lato-normal.woff') format('woff')
+  font-weight: 400
+  font-style: normal
+  font-display: $font-display
+
+@font-face
+  font-family: 'Lato'
+  src: url('#{$lato-font-path}/lato-bold/lato-bold.woff2') format('woff2'), url('#{$lato-font-path}/lato-bold/lato-bold.woff') format('woff')
+  font-weight: 700
+  font-style: normal
+  font-display: $font-display
+
+@font-face
+  font-family: 'Lato'
+  src: url('#{$lato-font-path}/lato-bold-italic/lato-bold-italic.woff2') format('woff2'), url('#{$lato-font-path}/lato-bold-italic/lato-bold-italic.woff') format('woff')
+  font-weight: 700
+  font-style: italic
+  font-display: $font-display
+
+@font-face
+  font-family: 'Lato'
+  src: url('#{$lato-font-path}/lato-normal-italic/lato-normal-italic.woff2') format('woff2'), url('#{$lato-font-path}/lato-normal-italic/lato-normal-italic.woff') format('woff')
+  font-weight: 400
+  font-style: italic
+  font-display: $font-display
+
+@font-face
+  font-family: 'Roboto Slab'
+  font-style: normal
+  font-weight: 400
+  src: url('#{$roboto-font-path}/Roboto-Slab-Regular.woff2') format('woff2'), url('#{$roboto-font-path}/Roboto-Slab-Regular.woff') format('woff')
+  font-display: $font-display
+
+@font-face
+  font-family: 'Roboto Slab'
+  font-style: normal
+  font-weight: 700
+  src: url('#{$roboto-font-path}/Roboto-Slab-Bold.woff2') format('woff2'), url('#{$roboto-font-path}/Roboto-Slab-Bold.woff') format('woff')
+  font-display: $font-display

webpack.common.js

@@ -17,9 +17,11 @@ module.exports = {
         test: /\.sass$/,
         use: [{
           loader: MiniCssExtractPlugin.loader
-        }, {
+        },
+        {
           loader: "css-loader"
-        }, {
+        },
+        {
           loader: "sass-loader?indentedSyntax",
           options: {
             includePaths: [
@@ -36,9 +38,9 @@ module.exports = {
         use: [{
           loader: 'file-loader',
           options: {
-            name: '[name].[ext]',
+            name: '[name].[ext]?[hash]',
             outputPath: 'fonts/',
-            publicPath: '/_static/fonts',
+            publicPath: '../fonts/',
           }
         }]
       }
@@ -50,5 +52,5 @@ module.exports = {
       // both options are optional
       filename: 'css/theme.css'
     })
-  ]
-};
+  ],
+};

webpack.dev.js

@@ -1,20 +1,33 @@
 const path = require('path');
 const merge = require('webpack-merge');
-const common = require('./webpack.common.js');
 const exec = require('child_process').exec;
+const FilewatcherPlugin = require('filewatcher-webpack-plugin');
+const WatchPlugin = require('webpack-watch-files-plugin').default;
+const ShellPlugin = require('webpack-shell-plugin');
+const common = require('./webpack.common.js');
 
 module.exports = merge(common, {
   mode: 'development',
   watch: true,
   devServer: {
-    contentBase: path.join(__dirname, 'docs/_build/html'),
+    contentBase: path.join(__dirname, 'docs/build/html'),
+    watchContentBase: true,
     compress: false,
     port: 7070,
-    after: function (app, server) {
-      exec('rm -rf docs/_build && sphinx-build docs docs/_build/html', (err, stdout, stderr) => {
-        if (stdout) process.stdout.write(stdout);
-        if (stderr) process.stderr.write(stderr);
-      });
-    }
-  }
-});
+    hot: false,
+    liveReload: true,
+    publicPath: '/_static/'
+  },
+  plugins: [
+    new WatchPlugin({
+      files: [
+        './docs/**/*.rst',
+        './docs/**/*.py',
+      ]
+    }),
+    new ShellPlugin({
+      onBuildEnd: ['make -C docs html'],
+      dev: false,
+    }),
+  ]
+});

webpack.prod.js

@@ -1,6 +1,11 @@
 const merge = require('webpack-merge');
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 const common = require('./webpack.common.js');
 
 module.exports = merge(common, {
-  mode: 'production'
-});
+  mode: 'production',
+  optimization: {
+    minimizer: [new TerserPlugin(), new OptimizeCssAssetsPlugin({})],
+  },
+});