Upgrade to Webpack 4 - fix CSS import order

Signed-off-by: David Mehren <dmehren1@gmail.com>

2 files changed, 36 insertions, 19 deletions

diff --git a/package.json b/package.json
index ac0882b7..485796aa 100644
--- a/package.json
+++ b/package.json
@@ -178,7 +178,7 @@
     "less": "^2.7.1",
     "less-loader": "^4.1.0",
     "mini-css-extract-plugin": "^0.4.1",
-    "optimize-css-assets-webpack-plugin": "^4.0.3",
+    "optimize-css-assets-webpack-plugin": "^5.0.0",
     "script-loader": "^0.7.2",
     "standard": "^9.0.1",
     "string-loader": "^0.0.1",
@@ -186,7 +186,7 @@
     "uglifyjs-webpack-plugin": "^1.2.7",
     "url-loader": "^1.0.1",
     "webpack": "^4.14.0",
-    "webpack-cli": "^3.0.8",
+    "webpack-cli": "^3.1.0",
     "webpack-parallel-uglify-plugin": "^1.1.0"
   },
   "standard": {
diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js
index 7417cb1b..971a960e 100644
--- a/webpackBaseConfig.js
+++ b/webpackBaseConfig.js
@@ -25,13 +25,15 @@ module.exports = {
       template: 'public/views/includes/header.ejs',
       chunks: ['font', 'index-styles', 'index'],
       filename: path.join(__dirname, 'public/views/build/index-header.ejs'),
-      inject: false
+      inject: false,
+      chunksSortMode: 'manual'
     }),
     new HtmlWebpackPlugin({
       template: 'public/views/includes/header.ejs',
       chunks: ['font-pack', 'index-styles-pack', 'index-styles', 'index'],
       filename: path.join(__dirname, 'public/views/build/index-pack-header.ejs'),
-      inject: false
+      inject: false,
+      chunksSortMode: 'manual'
     }),
     new HtmlWebpackPlugin({
       template: 'public/views/includes/scripts.ejs',
@@ -43,19 +45,22 @@ module.exports = {
       template: 'public/views/includes/scripts.ejs',
       chunks: ['common', 'index-pack'],
       filename: path.join(__dirname, 'public/views/build/index-pack-scripts.ejs'),
-      inject: false
+      inject: false,
+      chunksSortMode: 'manual'
     }),
     new HtmlWebpackPlugin({
       template: 'public/views/includes/header.ejs',
       chunks: ['font', 'cover'],
       filename: path.join(__dirname, 'public/views/build/cover-header.ejs'),
-      inject: false
+      inject: false,
+      chunksSortMode: 'manual'
     }),
     new HtmlWebpackPlugin({
       template: 'public/views/includes/header.ejs',
       chunks: ['font-pack', 'cover-styles-pack', 'cover'],
       filename: path.join(__dirname, 'public/views/build/cover-pack-header.ejs'),
-      inject: false
+      inject: false,
+      chunksSortMode: 'manual'
     }),
     new HtmlWebpackPlugin({
       template: 'public/views/includes/scripts.ejs',
@@ -67,19 +72,22 @@ module.exports = {
       template: 'public/views/includes/scripts.ejs',
       chunks: ['common', 'cover-pack'],
       filename: path.join(__dirname, 'public/views/build/cover-pack-scripts.ejs'),
-      inject: false
+      inject: false,
+      chunksSortMode: 'manual'
     }),
     new HtmlWebpackPlugin({
       template: 'public/views/includes/header.ejs',
       chunks: ['font', 'pretty-styles', 'pretty'],
       filename: path.join(__dirname, 'public/views/build/pretty-header.ejs'),
-      inject: false
+      inject: false,
+      chunksSortMode: 'manual'
     }),
     new HtmlWebpackPlugin({
       template: 'public/views/includes/header.ejs',
       chunks: ['font-pack', 'pretty-styles-pack', 'pretty-styles', 'pretty'],
       filename: path.join(__dirname, 'public/views/build/pretty-pack-header.ejs'),
-      inject: false
+      inject: false,
+      chunksSortMode: 'manual'
     }),
     new HtmlWebpackPlugin({
       template: 'public/views/includes/scripts.ejs',
@@ -91,19 +99,22 @@ module.exports = {
       template: 'public/views/includes/scripts.ejs',
       chunks: ['common', 'pretty-pack'],
       filename: path.join(__dirname, 'public/views/build/pretty-pack-scripts.ejs'),
-      inject: false
+      inject: false,
+      chunksSortMode: 'manual'
     }),
     new HtmlWebpackPlugin({
       template: 'public/views/includes/header.ejs',
       chunks: ['font', 'slide-styles', 'slide'],
       filename: path.join(__dirname, 'public/views/build/slide-header.ejs'),
-      inject: false
+      inject: false,
+      chunksSortMode: 'manual'
     }),
     new HtmlWebpackPlugin({
       template: 'public/views/includes/header.ejs',
       chunks: ['font-pack', 'slide-styles-pack', 'slide-styles', 'slide'],
       filename: path.join(__dirname, 'public/views/build/slide-pack-header.ejs'),
-      inject: false
+      inject: false,
+      chunksSortMode: 'manual'
     }),
     new HtmlWebpackPlugin({
       template: 'public/views/includes/scripts.ejs',
@@ -420,7 +431,8 @@ module.exports = {
       test: require.resolve('js-sequence-diagrams'),
       use: [{
         loader: 'imports-loader',
-        options: {_: 'lodash', Raphael: 'raphael', eve: 'eve'}}]
+        options: {_: 'lodash', Raphael: 'raphael', eve: 'eve'}
+      }]
     }, {
       test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
       use: [{loader: 'file-loader'}]
@@ -431,27 +443,32 @@ module.exports = {
       test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
       use: [{
         loader: 'url-loader',
-        options: {prefix: 'font/', limit: '5000'}}]
+        options: {prefix: 'font/', limit: '5000'}
+      }]
     }, {
       test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
       use: [{
         loader: 'url-loader',
-        options: {limit: '5000', mimetype: 'application/octet-stream'}}]
+        options: {limit: '5000', mimetype: 'application/octet-stream'}
+      }]
     }, {
       test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
       use: [{
         loader: 'url-loader',
-        options: {limit: '10000', mimetype: 'svg+xml'}}]
+        options: {limit: '10000', mimetype: 'svg+xml'}
+      }]
     }, {
       test: /\.png(\?v=\d+\.\d+\.\d+)?$/,
       use: [{
         loader: 'url-loader',
-        options: {limit: '10000', mimetype: 'image/png'}}]
+        options: {limit: '10000', mimetype: 'image/png'}
+      }]
     }, {
       test: /\.gif(\?v=\d+\.\d+\.\d+)?$/,
       use: [{
         loader: 'url-loader',
-        options: {limit: '10000', mimetype: 'image/gif'}}]
+        options: {limit: '10000', mimetype: 'image/gif'}
+      }]
     }]
   },
   node: {