builds webpack config, introduces babel, modifies ESLint to expect 4 spaces

.babelrc

@@ -0,0 +1,12 @@
+{
+    "presets": [
+        "@babel/env",
+        "@babel/preset-react",
+        [
+            "@babel/preset-stage-2",
+            {
+                "decoratorsLegacy": true
+            }
+        ]
+    ]
+}

.editorconfig

@@ -6,4 +6,8 @@ insert_final_newline = true
 
 [*.js]
 indent_style = space
-indent_size = 2
+indent_size = 4
+
+[*.html]
+indent_style = space
+indent_size = 4

.eslintrc.js

@@ -150,7 +150,7 @@ module.exports = exports = {
     "func-names": WARN,
     "func-style": [ WARN, "declaration" ],
     "id-length": [ WARN, { "min": 2, "max": 32 } ],
-    "indent": [ WARN, 2 ],
+    "indent": [ WARN, 4 ],
     "jsx-quotes": [ WARN, "prefer-double" ],
     "keyword-spacing": [ WARN, { "before": true, "after": true} ],
     // "linebreak-style": [ WARN, "unix" ],

config/webpack.base.config.js

@@ -0,0 +1,30 @@
+let HtmlWebpackPlugin = require('html-webpack-plugin');
+let ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+module.exports = {
+    entry: './src/client/index.js',
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                exclude: /node_modules/,
+                use: {
+                    loader: 'babel-loader'
+                }
+            }, {
+                test: /\.scss$/,
+                use: ExtractTextPlugin.extract({
+                    fallback: 'style-loader',
+                    use: 'css-loader!sass-loader'
+                })
+            }
+        ]
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: './src/client/index.html',
+            filename: './index.html'
+        }),
+        new ExtractTextPlugin('style.css')
+    ]
+};

config/webpack.opt.config.js

@@ -0,0 +1,19 @@
+let OptiizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+let UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+
+module.exports = {
+    optimization: {
+        minimizer: [
+            new UglifyJSPlugin({
+                uglifyOptions: {
+                    mangle: {
+                        keep_fnames: true
+                    }
+                }
+            })
+        ]
+    },
+    plugins: [
+        new OptimizeCssAssetsPlugin()
+    ]
+}

config/webpack.prod.config.js

@@ -0,0 +1,16 @@
+let webpack = require('webpack');
+let merge = require('webpack-merge');
+let baseConfig = require('./webpack.base.config');
+let optConfig = require('./webpack.opt.config');
+
+function prodConfig(env) {
+    const NODE_ENV = env.NODE_ENV ? env.NODE_ENV : 'development';
+
+    return {
+        plugins: [
+            new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(NODE_ENV) })
+        ]
+    };
+}
+
+module.exports = merge.smart(baseConfig, optConfig, prodConfig);

package.json

@@ -5,19 +5,41 @@
   "main": "index.js",
   "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",
+    "prebuild": "webpack --mode production --config config/webpack.prod.config.js --env.NODE_ENV=production --progress",
+    "prod": "node server",
     "cov": "node ./node_modules/jest/bin/jest.js --coverage"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "pug": "^2.0.3"
+    "pug": "^2.0.3",
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1"
   },
   "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",
+    "babel-loader": "^8.0.0-beta.4",
+    "css-loader": "^1.0.0",
     "eslint": "^4.19.1",
-    "jest": "^22.4.3",
-    "nodemon": "^1.17.3",
-    "supertest": "^3.0.0",
     "express": "^4.16.3",
-    "mongoose": "^5.0.15"
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "html-webpack-plugin": "^3.2.0",
+    "jest": "^22.4.3",
+    "mongoose": "^5.0.15",
+    "node-sass": "^4.9.2",
+    "nodemon": "^1.17.3",
+    "optimize-css-assets-webpack-plugin": "^5.0.0",
+    "sass-loader": "^7.0.3",
+    "style-loader": "^0.21.0",
+    "supertest": "^3.0.0",
+    "uglifyjs-webpack-plugin": "^1.2.7",
+    "webpack": "^4.16.1",
+    "webpack-cli": "^3.1.0",
+    "webpack-dev-server": "^3.1.4",
+    "webpack-merge": "^4.1.3"
   }
 }

src/client/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+        <base href="/">
+        <title>Payload</title>
+    </head>
+    <body>
+    <div id="app"></div>
+    </body>
+</html>

src/client/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import './testStyles.scss';
+
+const App = () => {
+    return (
+        <div>
+            <h3>Payload</h3>
+            <p>Yay</p>
+        </div>
+    )
+}
+
+render(<App />, document.getElementById('app'));

src/client/testStyles.scss

@@ -0,0 +1,3 @@
+body {
+	background: rgba(purple, .8);
+}