split css into separate file so it can load separately from js.

4 files changed, 60 insertions, 2 deletions

diff --git a/package-lock.json b/package-lock.json
index 8ac4b82..756ac58 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -197,6 +197,20 @@
         "long": "^3.2.0"
       }
     },
+    "@webpack-contrib/schema-utils": {
+      "version": "1.0.0-beta.0",
+      "resolved": "https://registry.npmjs.org/@webpack-contrib/schema-utils/-/schema-utils-1.0.0-beta.0.tgz",
+      "integrity": "sha512-LonryJP+FxQQHsjGBi6W786TQB1Oym+agTpY0c+Kj8alnIw+DLUJb6SI8Y1GHGhLCH1yPRrucjObUmxNICQ1pg==",
+      "dev": true,
+      "requires": {
+        "ajv": "^6.1.0",
+        "ajv-keywords": "^3.1.0",
+        "chalk": "^2.3.2",
+        "strip-ansi": "^4.0.0",
+        "text-table": "^0.2.0",
+        "webpack-log": "^1.1.2"
+      }
+    },
     "abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -4220,6 +4234,17 @@
       "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
       "dev": true
     },
+    "mini-css-extract-plugin": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.1.tgz",
+      "integrity": "sha512-XWuB3G61Rtasq/gLe7cp5cuozehE6hN+E4sxCamRR/WDiHTg+f7ZIAS024r8UJQffY+e2gGELXQZgQoFDfNDCg==",
+      "dev": true,
+      "requires": {
+        "@webpack-contrib/schema-utils": "^1.0.0-beta.0",
+        "loader-utils": "^1.1.0",
+        "webpack-sources": "^1.1.0"
+      }
+    },
     "minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -6420,6 +6445,12 @@
         "inherits": "2"
       }
     },
+    "text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
+      "dev": true
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
diff --git a/package.json b/package.json
index 4d67574..0b29998 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   "devDependencies": {
     "css-loader": "^1.0.0",
     "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.4.1",
     "node-sass": "^4.9.3",
     "style-loader": "^0.22.1",
     "webpack": "^4.16.5",
diff --git a/webpack.config.js b/webpack.config.js
index e035c3b..f054c01 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -9,14 +9,18 @@ const commonConfig = merge([
       }),
     ],
   },
-  parts.loadCSS(),
 ]);
-const productionConfig = merge([]);
+const productionConfig = merge([
+  parts.extractCSS({
+    use: "css-loader",
+  }),
+]);
 const developmentConfig = merge([
   parts.devServer({
     host: process.env.HOST,
     port: process.env.PORT,
   }),
+  parts.loadCSS(),
 ]);
 
 module.exports = mode => {
diff --git a/webpack.parts.js b/webpack.parts.js
index 276ecdd..3d49b21 100644
--- a/webpack.parts.js
+++ b/webpack.parts.js
@@ -1,3 +1,25 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+exports.extractCSS = ({ include, exclude, use = [] }) => {
+  const plugin = new MiniCssExtractPlugin({
+    filename: "[name].css",
+  });
+
+  return {
+    module: {
+      rules: [
+        {
+          test: /\.css$/,
+          include,
+          exclude,
+          use: [ MiniCssExtractPlugin.loader ].concat(use),
+        },
+      ],
+    },
+    plugins: [plugin]
+  };
+};
+
 exports.devServer = ({ host, port } = {}) => ({
   devServer: {
     stats: "errors-only",