finishes production webpack build

2018-07-19 08:06:14 -04:00
parent f31f7fe348
commit 446cb3e415
10 changed files with 291 additions and 107 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -182,7 +182,7 @@ module.exports = exports = {
    "object-curly-spacing": [ WARN, "always" ],
    "one-var": OFF,
    "operator-assignment": [ WARN, "never" ],
-    "operator-linebreak": [ WARN, "after" ],
+    "operator-linebreak": OFF,
    "padded-blocks": [ WARN, "never" ],
    "quote-props": [ WARN, "consistent-as-needed" ],
    "quotes": [ WARN, "single" ],
--- a/config/webpack.base.config.js
+++ b/config/webpack.base.config.js
@@ -1,5 +1,5 @@
-let HtmlWebpackPlugin = require('html-webpack-plugin');
-let ExtractTextPlugin = require('extract-text-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const autoprefixer = require('autoprefixer');

 module.exports = {
  entry: './src/client/index.js',
@@ -11,20 +11,43 @@ module.exports = {
        use: {
          loader: 'babel-loader'
        }
-      }, {
-        test: /\.scss$/,
-        use: ['css-hot-loader'].concat(ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use: 'css-loader!sass-loader'
-        }))
-      }
+      },
+      {
+        test: /\.css$/,
+        use: [
+          require.resolve('style-loader'),
+          {
+            loader: require.resolve('css-loader'),
+            options: {
+              importLoaders: 1,
+            },
+          },
+          {
+            loader: require.resolve('postcss-loader'),
+            options: {
+              ident: 'postcss',
+              plugins: () => [
+                require('postcss-flexbugs-fixes'),
+                autoprefixer({
+                  browsers: [
+                    '>1%',
+                    'last 4 versions',
+                    'Firefox ESR',
+                    'not ie < 9', // React doesn't support IE8 anyway
+                  ],
+                  flexbox: 'no-2009',
+                }),
+              ],
+            },
+          },
+        ],
+      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/client/index.html',
      filename: './index.html'
-    }),
-    new ExtractTextPlugin('style.css')
+    })
  ]
 };
--- a/config/webpack.prod.config.js
+++ b/config/webpack.prod.config.js
@@ -1,16 +1,76 @@
-let webpack = require('webpack');
-let merge = require('webpack-merge');
-let baseConfig = require('./webpack.base.config');
-let optConfig = require('./webpack.opt.config');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const autoprefixer = require('autoprefixer');
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const baseConfig = require('./webpack.base.config');
+const optConfig = require('./webpack.opt.config');

-function prodConfig(env) {
-  const NODE_ENV = env.NODE_ENV ? env.NODE_ENV : 'development';
-
-  return {
+const prodConfig = {
+  module: {
+    rules: [
+      // The notation here is somewhat confusing.
+      // "postcss" loader applies autoprefixer to our CSS.
+      // "css" loader resolves paths in CSS and adds assets as dependencies.
+      // "style" loader normally turns CSS into JS modules injecting <style>,
+      // but unlike in development configuration, we do something different.
+      // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
+      // (second argument), then grabs the result CSS and puts it into a
+      // separate file in our build process. This way we actually ship
+      // a single CSS file in production instead of JS code injecting <style>
+      // tags. If you use code splitting, however, any async bundles will still
+      // use the "style" loader inside the async code so CSS from them won't be
+      // in the main CSS file.
+      {
+        test: /\.css$/,
+        use: ExtractTextPlugin.extract(
+          Object.assign(
+            {
+              fallback: {
+                loader: require.resolve('style-loader'),
+                options: {
+                  hmr: false
+                }
+              },
+              use: [
+                {
+                  loader: require.resolve('css-loader'),
+                  options: {
+                    importLoaders: 1,
+                    minimize: true
+                  }
+                },
+                {
+                  loader: require.resolve('postcss-loader'),
+                  options: {
+                    // Necessary for external CSS imports to work
+                    // https://github.com/facebookincubator/create-react-app/issues/2677
+                    ident: 'postcss',
+                    plugins: () => {
+                      return [
+                        require('postcss-flexbugs-fixes'),
+                        autoprefixer({
+                          browsers: [
+                            '>1%',
+                            'last 4 versions',
+                            'Firefox ESR',
+                            'not ie < 9' // React doesn't support IE8 anyway
+                          ],
+                          flexbox: 'no-2009'
+                        })
+                      ];
+                    }
+                  }
+                }
+              ]
+            }
+          )
+        )
+      }
+    ]
+  },
  plugins: [
-      new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(NODE_ENV) })
+    new ExtractTextPlugin('style.css')
  ]
 };
-}

 module.exports = merge.smart(baseConfig, optConfig, prodConfig);
--- a/dist/style.css
+++ b/dist/style.css
@@ -1 +1 @@
-body{background:rgba(128,0,128,.8)}
+body{background:purple;color:#fff}
--- a/package-lock.json
+++ b/package-lock.json
@@ -1970,6 +1970,72 @@
      "integrity": "sha512-SuiKH8vbsOyCALjA/+EINmt/Kdl+TQPrtFgW7XZZcwtryFu9e5kQoX3bjCW6mIvGH1fbeAZZuvwGR5IlBRznGw==",
      "dev": true
    },
+    "autoprefixer": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.0.0.tgz",
+      "integrity": "sha512-bMt9puCb+xk5ds1ghr1zzfJ09+SjOcseHCEawhMjibM5KfxkodW8PQMhhEnllyj4Cz3Yixy9A+/0De2VC9R+dQ==",
+      "requires": {
+        "browserslist": "^4.0.1",
+        "caniuse-lite": "^1.0.30000865",
+        "normalize-range": "^0.1.2",
+        "num2fraction": "^1.2.2",
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.2.3"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "browserslist": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.0.1.tgz",
+          "integrity": "sha512-QqiiIWchEIkney3wY53/huI7ZErouNAdvOkjorUALAwRcu3tEwOV3Sh6He0DnP38mz1JjBpCBb50jQBmaYuHPw==",
+          "requires": {
+            "caniuse-lite": "^1.0.30000865",
+            "electron-to-chromium": "^1.3.52",
+            "node-releases": "^1.0.0-alpha.10"
+          }
+        },
+        "chalk": {
+          "version": "2.4.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
+          "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "postcss": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.0.tgz",
+          "integrity": "sha512-ACgL/mXREjfCothsspfbxdiXIQowQeEyW7TJgsvAgCK8igWa2ZNCsbGNGnasbEF1++L9xb7qYpo23Aa3rGmiCg==",
+          "requires": {
+            "chalk": "^2.4.1",
+            "source-map": "^0.6.1",
+            "supports-color": "^5.4.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "5.4.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz",
+          "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
    "aws-sign2": {
      "version": "0.7.0",
      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
@@ -2767,8 +2833,7 @@
    "caniuse-lite": {
      "version": "1.0.30000865",
      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000865.tgz",
-      "integrity": "sha512-vs79o1mOSKRGv/1pSkp4EXgl4ZviWeYReXw60XfacPU64uQWZwJT6vZNmxRF9O+6zu71sJwMxLK5JXxbzuVrLw==",
-      "dev": true
+      "integrity": "sha512-vs79o1mOSKRGv/1pSkp4EXgl4ZviWeYReXw60XfacPU64uQWZwJT6vZNmxRF9O+6zu71sJwMxLK5JXxbzuVrLw=="
    },
    "capture-stack-trace": {
      "version": "1.0.0",
@@ -3133,7 +3198,6 @@
      "version": "1.9.1",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.1.tgz",
      "integrity": "sha512-mjGanIiwQJskCC18rPR6OmrZ6fm2Lc7PeGFYwCmy5J34wC6F1PzdGL6xeMfmgicfYcNLGuVFA3WzXtIDCQSZxQ==",
-      "dev": true,
      "requires": {
        "color-name": "^1.1.1"
      }
@@ -3141,8 +3205,7 @@
    "color-name": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "dev": true
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
    },
    "color-string": {
      "version": "1.5.2",
@@ -3511,31 +3574,6 @@
        "timsort": "^0.3.0"
      }
    },
-    "css-hot-loader": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/css-hot-loader/-/css-hot-loader-1.4.0.tgz",
-      "integrity": "sha512-OZ+wB1j0j3IDsWuaYZqJeQBTNUa+uyRzMWs7Tm5kwObnGqi+63V1KmGTfi0WGBHyhjtg9wiOqakpkXaXYpyZVw==",
-      "dev": true,
-      "requires": {
-        "loader-utils": "^1.1.0",
-        "lodash": "^4.17.5",
-        "normalize-url": "^1.9.1"
-      },
-      "dependencies": {
-        "normalize-url": {
-          "version": "1.9.1",
-          "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz",
-          "integrity": "sha1-LMDWazHqIwNkWENuNiDYWVTGbDw=",
-          "dev": true,
-          "requires": {
-            "object-assign": "^4.0.1",
-            "prepend-http": "^1.0.0",
-            "query-string": "^4.1.0",
-            "sort-keys": "^1.0.0"
-          }
-        }
-      }
-    },
    "css-loader": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-1.0.0.tgz",
@@ -4186,8 +4224,7 @@
    "electron-to-chromium": {
      "version": "1.3.52",
      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.52.tgz",
-      "integrity": "sha1-0tnxJwuko7lnuDHEDvcftNmrXOA=",
-      "dev": true
+      "integrity": "sha1-0tnxJwuko7lnuDHEDvcftNmrXOA="
    },
    "elliptic": {
      "version": "6.4.0",
@@ -4333,8 +4370,7 @@
    "escape-string-regexp": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-      "dev": true
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
    },
    "escodegen": {
      "version": "1.9.1",
@@ -6046,8 +6082,7 @@
    "has-flag": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-      "dev": true
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
    },
    "has-symbols": {
      "version": "1.0.0",
@@ -6767,6 +6802,32 @@
        "minimatch": "^3.0.4"
      }
    },
+    "import-cwd": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
+      "integrity": "sha1-qmzzbnInYShcs3HsZRn1PiQ1sKk=",
+      "dev": true,
+      "requires": {
+        "import-from": "^2.1.0"
+      }
+    },
+    "import-from": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/import-from/-/import-from-2.1.0.tgz",
+      "integrity": "sha1-M1238qev/VOqpHHUuAId7ja387E=",
+      "dev": true,
+      "requires": {
+        "resolve-from": "^3.0.0"
+      },
+      "dependencies": {
+        "resolve-from": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
+          "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
+          "dev": true
+        }
+      }
+    },
    "import-lazy": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz",
@@ -7160,12 +7221,6 @@
        "path-is-inside": "^1.0.1"
      }
    },
-    "is-plain-obj": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
-      "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=",
-      "dev": true
-    },
    "is-plain-object": {
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
@@ -9113,7 +9168,6 @@
      "version": "1.0.0-alpha.10",
      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.0.0-alpha.10.tgz",
      "integrity": "sha512-BSQrRgOfN6L/MoKIa7pRUc7dHvflCXMcqyTBvphixcSsgJTuUd24vAFONuNfVsuwTyz28S1HEc9XN6ZKylk4Hg==",
-      "dev": true,
      "requires": {
        "semver": "^5.3.0"
      }
@@ -9277,6 +9331,11 @@
        "remove-trailing-separator": "^1.0.1"
      }
    },
+    "normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI="
+    },
    "normalize-url": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.2.0.tgz",
@@ -9331,6 +9390,11 @@
        "boolbase": "~1.0.0"
      }
    },
+    "num2fraction": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
+      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4="
+    },
    "number-is-nan": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
@@ -10009,6 +10073,61 @@
        "postcss": "^6.0.0"
      }
    },
+    "postcss-flexbugs-fixes": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-3.3.1.tgz",
+      "integrity": "sha512-9y9kDDf2F9EjKX6x9ueNa5GARvsUbXw4ezH8vXItXHwKzljbu8awP7t5dCaabKYm18Vs1lo5bKQcnc0HkISt+w==",
+      "dev": true,
+      "requires": {
+        "postcss": "^6.0.1"
+      }
+    },
+    "postcss-load-config": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.0.0.tgz",
+      "integrity": "sha512-V5JBLzw406BB8UIfsAWSK2KSwIJ5yoEIVFb4gVkXci0QdKgA24jLmHZ/ghe/GgX0lJ0/D1uUK1ejhzEY94MChQ==",
+      "dev": true,
+      "requires": {
+        "cosmiconfig": "^4.0.0",
+        "import-cwd": "^2.0.0"
+      },
+      "dependencies": {
+        "cosmiconfig": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-4.0.0.tgz",
+          "integrity": "sha512-6e5vDdrXZD+t5v0L8CrurPeybg4Fmf+FCSYxXKYVAqLUtyCSbuyqE059d0kDthTNRzKVjL7QMgNpEUlsoYH3iQ==",
+          "dev": true,
+          "requires": {
+            "is-directory": "^0.3.1",
+            "js-yaml": "^3.9.0",
+            "parse-json": "^4.0.0",
+            "require-from-string": "^2.0.1"
+          }
+        },
+        "parse-json": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+          "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
+          "dev": true,
+          "requires": {
+            "error-ex": "^1.3.1",
+            "json-parse-better-errors": "^1.0.1"
+          }
+        }
+      }
+    },
+    "postcss-loader": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-2.1.6.tgz",
+      "integrity": "sha512-hgiWSc13xVQAq25cVw80CH0l49ZKlAnU1hKPOdRrNj89bokRr/bZF2nT+hebPPF9c9xs8c3gw3Fr2nxtmXYnNg==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.1.0",
+        "postcss": "^6.0.0",
+        "postcss-load-config": "^2.0.0",
+        "schema-utils": "^0.4.0"
+      }
+    },
    "postcss-merge-longhand": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-4.0.2.tgz",
@@ -10340,8 +10459,7 @@
    "postcss-value-parser": {
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz",
-      "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=",
-      "dev": true
+      "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU="
    },
    "prelude-ls": {
      "version": "1.1.2",
@@ -10651,16 +10769,6 @@
      "integrity": "sha512-eRzhrN1WSINYCDCbrz796z37LOe3m5tmW7RQf6oBntukAG1nmovJvhnwHHRMAfeoItc1m2Hk02WER2aQ/iqs+A==",
      "dev": true
    },
-    "query-string": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
-      "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
-      "dev": true,
-      "requires": {
-        "object-assign": "^4.1.0",
-        "strict-uri-encode": "^1.0.0"
-      }
-    },
    "querystring": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
@@ -11157,6 +11265,12 @@
      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
      "dev": true
    },
+    "require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true
+    },
    "require-main-filename": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
@@ -11863,8 +11977,7 @@
    "semver": {
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/semver/-/semver-5.5.0.tgz",
-      "integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==",
-      "dev": true
+      "integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA=="
    },
    "semver-diff": {
      "version": "2.1.0",
@@ -12221,15 +12334,6 @@
        }
      }
    },
-    "sort-keys": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz",
-      "integrity": "sha1-RBttTTRnmPG05J6JIK37oOVD+a0=",
-      "dev": true,
-      "requires": {
-        "is-plain-obj": "^1.0.0"
-      }
-    },
    "source-list-map": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.0.tgz",
@@ -12489,12 +12593,6 @@
      "integrity": "sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=",
      "dev": true
    },
-    "strict-uri-encode": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
-      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
-      "dev": true
-    },
    "string-length": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/string-length/-/string-length-2.0.0.tgz",
--- a/package.json
+++ b/package.json
@@ -6,8 +6,8 @@
  "scripts": {
    "test": "node ./node_modules/jest/bin/jest.js",
    "start": "webpack-dev-server --mode development --config config/webpack.base.config.js --open --hot --history-api-fallback",
-    "preprod": "webpack --mode production --config config/webpack.prod.config.js --env.NODE_ENV=production --progress",
-    "prod": "node server",
+    "prebuild": "webpack --mode production --config config/webpack.prod.config.js --env.NODE_ENV=production --progress",
+    "build": "node server",
    "cov": "node ./node_modules/jest/bin/jest.js --coverage"
  },
  "author": "",
@@ -15,15 +15,16 @@
  "dependencies": {
    "pug": "^2.0.3",
    "react": "^16.4.1",
-    "react-dom": "^16.4.1"
+    "react-dom": "^16.4.1",
+    "autoprefixer": "^9.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-beta.54",
    "@babel/preset-env": "^7.0.0-beta.54",
    "@babel/preset-react": "^7.0.0-beta.54",
    "@babel/preset-stage-2": "^7.0.0-beta.54",
+    "autoprefixer": "^9.0.0",
    "babel-loader": "^8.0.0-beta.4",
-    "css-hot-loader": "^1.4.0",
    "css-loader": "^1.0.0",
    "eslint": "^4.19.1",
    "express": "^4.16.3",
@@ -34,6 +35,8 @@
    "node-sass": "^4.9.2",
    "nodemon": "^1.17.3",
    "optimize-css-assets-webpack-plugin": "^5.0.0",
+    "postcss-flexbugs-fixes": "^3.3.1",
+    "postcss-loader": "^2.1.6",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "supertest": "^3.0.0",
--- a/server.js
+++ b/server.js
@@ -13,7 +13,7 @@ app.get('/*', (req, res, next) => {
 });

 /** Get port from environment and store in Express. */
-const port = process.env.PORT || '8000';
+const port = process.env.PORT || '8080';
 app.set('port', port);

 /** Create HTTP server. */
@@ -21,4 +21,3 @@ const server = http.createServer(app);

 /** Listen on provided port, on all network interfaces. */
 server.listen(port, () => {return console.log(`Server Running on port ${port}`)});
-
--- a/src/client/index.js
+++ b/src/client/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from 'react-dom';

-import './testStyles.scss';
+import './testStyles.css';

 const App = () => {
  return (
--- a/src/client/testStyles.css
+++ b/src/client/testStyles.css
@@ -0,0 +1,4 @@
+body {
+	background: purple;
+	color: white;
+}
--- a/src/client/testStyles.scss
+++ b/src/client/testStyles.scss
@@ -1,3 +0,0 @@
-body {
-	background: rgba(purple, .8);
-}