feat: webpack 4 support.

- upgrade webpack configuration files for webpack 4
- switch to mini-css-extract-plugin, ensure hot reloading CSS still works
- clean up vendor styles

Author: calvinl

client/styles.js

@@ -1,5 +1,19 @@
-// Include all Vendor CSS here
+/* Style Loader
+ *
+ * Anything imported in here will either be added to the vendor CSS chunk, or
+ * the main app CSS chunk. Where they will go depends on its location or its
+ * extension.
+ *
+ * Files will be added to the vendor.css chunk if:
+ * - they are located inside `node_modules`, or
+ * - they are plain .css files.
+ * Otherwise, files will be added to the main app.css chunk.
+ */
+
+// Pre-built Semantic-UI css. If you want to customize this, you can build your
+// own distribution of it and include it here.
+// See https: *semantic-ui.com/introduction/build-tools.html
 import 'semantic-ui-css/semantic.min.css';
 
-// Base styles
+// Include initial base styles.
 import '@css/base/index.scss';

common/css/base/_vendors.scss

@@ -1,9 +1,8 @@
-// Vendors and resource files (.e.g. variables, mixins, etc)
+// Resource files (.e.g. variables, mixins, etc)
 @import '../resources/variables';
-@import 'vendors';
 @import '../resources/mixins';
 
-// The following are non-vendor, non-resource files.
+// Add custom fonts, overrides, and base styles.
 @import 'fonts';
 @import 'overrides';
 @import 'styles';

common/css/base/index.scss

@@ -4,14 +4,14 @@ module.exports = {
   enableSSR: true,
 
   // Enable or disable dynamic imports (code splitting)
-  enableDynamicImports: false,
+  enableDynamicImports: true,
 
   // The env vars to expose on the client side. If you add them here, they will
   // be available on the client as process.env[VAR_NAME], same as they would be
   // in node.js.
   //
   // **WARNING**: Be careful not to expose any secrets here!
-  clientEnvVars: [
+  clientEnv: [
     'NODE_ENV',
     'APPLICATION_BASE_URL'
   ],