Merge dev & prod to a single webpack config

- Also adds postcss and tailwindcss.

package.json

@@ -6,12 +6,12 @@
   "scripts": {
     "perftest": "npm-run-all -r -p watch:server watch:perftest",
     "clean": "rm -Rf build dist",
-    "build": "npm run clean && babel src/server -d build && webpack --mode production --config webpack.dev.config.js",
+    "build": "npm run clean && babel src/server -d build && webpack --mode production --config webpack.config.js",
     "start": "npm-run-all -r -p watch:server watch:client",
     "start:prod": "node ./build/server.js",
     "stop": "pkill encrypted-dev-server",
-    "watch:client": "webpack-dev-server --mode development --config webpack.dev.config.js",
-    "watch:perftest": "webpack-dev-server --mode development --config webpack.perf-test.config.js",
+    "watch:client": "webpack-dev-server --mode development --config webpack.config.js",
+    "watch:perftest": "webpack-dev-server --mode development --run perftest --config webpack.config.js",
     "watch:server": "NODE_ENV=development nodemon --exec babel-node ./src/server/server.js",
     "deploy:infra": "./deploy/deploy-infra.sh"
   },
@@ -41,6 +41,7 @@
     "@babel/plugin-transform-runtime": "^7.4.4",
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-react": "^7.0.0",
+    "autoprefixer": "^9.6.0",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.6",
     "babel-polyfill": "^6.26.0",
@@ -51,14 +52,15 @@
     "file-loader": "^3.0.1",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
-    "mini-css-extract-plugin": "^0.7.0",
     "nodemon": "^1.19.1",
     "npm-run-all": "^4.1.5",
     "open": "6.0.0",
     "opn-browser-webpack-plugin": "0.0.7",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "postcss-loader": "^3.0.0",
     "style-loader": "^0.23.1",
-    "uglifyjs-webpack-plugin": "^2.1.3",
+    "tailwindcss": "^1.0.4",
+    "terser-webpack-plugin": "^1.3.0",
     "url-loader": "^1.1.2",
     "webpack": "^4.32.2",
     "webpack-cli": "^3.3.2",

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: [
+    require('tailwindcss'),
+    require('autoprefixer')
+  ]
+}

src/client/index.js

@@ -1,14 +1,11 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import 'babel-polyfill'
-import Welcome from './Welcome'
+import App from './App'
 
 import './style.css'
 
-ReactDOM.render(
-  <Welcome />,
-  document.getElementById('content')
-)
+ReactDOM.render(<App />, document.getElementById('content'))
 
 if (module.hot) {
   module.hot.accept()

tailwind.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  theme: {
+    extend: {}
+  },
+  variants: {},
+  plugins: []
+}

webpack.config.js

@@ -0,0 +1,122 @@
+const path = require('path')
+const webpack = require('webpack')
+const TerserPlugin = require('terser-webpack-plugin')
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const HtmlWebPackPlugin = require('html-webpack-plugin')
+const OpenBrowserPlugin = require('opn-browser-webpack-plugin')
+
+module.exports = (env, argv) => {
+
+  const config = {
+    entry: {
+      main: './src/client/index.js'
+    },
+    output: {
+      path: path.join(__dirname, 'dist'),
+      publicPath: '/',
+      filename: '[name].js',
+      globalObject: 'this'
+    },
+    target: 'web',
+    devtool: 'source-map',
+    resolve: {
+      extensions: ['.js', '.jsx'],
+    },
+    module: {
+      rules: [
+        {
+          test: /\.css$/,
+          use: [
+            'style-loader', 'css-loader', 'postcss-loader',
+          ],
+        },
+        {
+          enforce: 'pre',
+          test: /\.jsx?$/,
+          exclude: /node_modules/,
+          loader: 'eslint-loader',
+          options: {
+            emitWarning: true,
+            failOnError: false,
+            failOnWarning: false
+          }
+        },
+        {
+          test: /\.jsx?$/,
+          exclude: /node_modules/,
+          loader: 'babel-loader'
+        },
+        {
+          test: /\.html$/,
+          use: [
+            {
+              loader: 'html-loader',
+              options: { minimize: argv.mode == 'production' }
+            }
+          ]
+        },
+        {
+          test: /\.(png|svg|jpg|gif)$/,
+          use: [(argv.mode == 'development' ? 'file-loader' : { loader: 'url-loader' })]
+        },
+        {
+          test: /\worker\.js$/,
+          loader: 'worker-loader'
+        }
+      ]
+    },
+    plugins: [
+      new HtmlWebPackPlugin({
+        template: './src/client/index.html',
+        filename: './index.html',
+        favicon: './src/client/img/favicon.ico',
+        excludeChunks: ['server']
+      }),
+      new webpack.NoEmitOnErrorsPlugin(),
+      new webpack.WatchIgnorePlugin(['./dist', './build'])
+    ]
+  }
+
+  if (argv.mode == 'development') {
+    config.devtool = 'inline-source-map'
+
+    config.devServer = {
+      historyApiFallback: true,
+      hot: true,
+      inline: true,
+
+      host: 'localhost',
+      port: argv.mode != 'perftest' ? 3000 : 3001,
+      proxy: {
+        '/api/*': {
+          target: 'http://localhost:8080/',
+          secure: false
+        }
+      }
+    }
+
+    if (argv.mode == 'perftest') {
+      config.entry.main = ['./src/performance-test/setup.js']
+    }
+
+    config.plugins.push(new webpack.HotModuleReplacementPlugin())
+    config.plugins.push(new OpenBrowserPlugin({
+      url: argv.mode != 'perftest' ? 'http://localhost:3000' : 'http://localhost:3001'
+    }))
+  }
+
+  if (argv.mode == 'production') {
+    config.optimization = {
+      minimizer: [
+        new TerserPlugin({
+          cache: true,
+          parallel: true,
+          sourceMap: true
+        }),
+        new OptimizeCSSAssetsPlugin({})
+      ]
+    }
+  }
+
+  return config
+}