Restructure webpack configuration files.

Config files have been reorganized to be easier to understand. Also,
babel-polyfill has been reconfigured to make the bundle smaller and to
meet the new core-js version requirements.

Author: rherwig

.babelrc

@@ -4,7 +4,9 @@
       "targets": {
         "node": "current",
         "browsers": ["last 2 versions", "IE 11"]
-       }
+      },
+      "useBuiltIns": "usage",
+      "corejs": "3"
     }],
     "@babel/preset-react"
   ],

package-lock.json

@@ -7,9 +7,9 @@
     "start": "cross-env NODE_ENV=development babel-node src/index",
     "watch": "cross-env NODE_ENV=development nodemon src/index",
     "build": "npm-run-all -p build:client build:server build:node",
-    "build:client": "cross-env NODE_ENV=production webpack -p --config webpack/client.production.js",
-    "build:server": "cross-env NODE_ENV=production webpack -p --config webpack/server.production.js",
-    "build:node": "cross-env NODE_ENV=production webpack -p --config webpack/node.production.js",
+    "build:client": "cross-env NODE_ENV=production webpack --config webpack/client/prod.js",
+    "build:server": "cross-env NODE_ENV=production webpack --config webpack/server/prod.js",
+    "build:node": "cross-env NODE_ENV=production webpack --config webpack/node.js",
     "test": "jest",
     "lint": "eslint src/**/*.js"
   },
@@ -34,6 +34,7 @@
   "dependencies": {
     "@babel/polyfill": "^7.4.3",
     "copy-webpack-plugin": "^5.0.2",
+    "core-js": "^3.0.1",
     "express": "^4.16.4",
     "helmet": "^3.16.0",
     "react": "^16.8.6",
@@ -45,7 +46,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.4.3",
-    "@babel/node": "^7.0.0",
+    "@babel/node": "^7.2.2",
     "@babel/plugin-proposal-class-properties": "^7.4.0",
     "@babel/plugin-proposal-decorators": "^7.4.0",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",

package.json

@@ -1,6 +1,5 @@
 import express from 'express';
 import helmet from 'helmet';
-import shrinkRay from 'shrink-ray';
 import { join } from 'path';
 import { log } from 'winston';
 
@@ -11,8 +10,8 @@ import { log } from 'winston';
  * @param app Express app
  */
 const configureDevelopment = (app) => {
-    const clientConfig = require('../webpack/client');
-    const serverConfig = require('../webpack/server');
+    const clientConfig = require('../webpack/client/dev');
+    const serverConfig = require('../webpack/server/dev');
     const { publicPath, path } = clientConfig.output;
 
     const multiCompiler = require('webpack')([clientConfig, serverConfig]);
@@ -54,9 +53,6 @@ const isDevelopment = process.env.NODE_ENV === 'development';
 
 log('info', `Configuring server for environment: ${process.env.NODE_ENV}...`);
 app.use(helmet());
-app.use(shrinkRay({
-    filter: () => !isDevelopment,
-}));
 app.set('port', process.env.PORT || 3000);
 
 if (isDevelopment) {

src/index.js

@@ -1,18 +1,13 @@
 const merge = require('webpack-merge');
-const common = require('./common');
-const { join } = require('path');
+const common = require('../common');
 const ExtractCssChunksPlugin = require('extract-css-chunks-webpack-plugin');
-const StatsWebpackPlugin = require('stats-webpack-plugin');
 
 module.exports = merge(common, {
-    mode: 'production',
     name: 'client',
     target: 'web',
-    entry: [join(__dirname, '../src/client/index')],
-    devtool: 'hidden-source-map',
     output: {
         filename: 'app.client.js',
-        chunkFilename: '[name].chunk.js'
+        chunkFilename: '[name].chunk.js',
     },
     module: {
         rules: [
@@ -26,30 +21,29 @@ module.exports = merge(common, {
                         options: {
                             modules: true,
                             localIdentName: '[name]__[local]--[hash:base64:5]'
-                        }
+                        },
                     },
                     'postcss-loader',
-                    'stylus-loader'
-                ]
-            }
-        ]
+                    'stylus-loader',
+                ],
+            },
+        ],
     },
     optimization: {
         runtimeChunk: {
-            name: 'bootstrap'
+            name: 'bootstrap',
         },
         splitChunks: {
             chunks: 'initial',
             cacheGroups: {
                 vendors: {
                     test: /[\\/]node_modules[\\/]/,
-                    name: 'vendor'
-                }
-            }
-        }
+                    name: 'vendor',
+                },
+            },
+        },
     },
     plugins: [
         new ExtractCssChunksPlugin(),
-        new StatsWebpackPlugin('stats.json')
-    ]
+    ],
 });

webpack/client.js

@@ -0,0 +1,17 @@
+const { join } = require('path');
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+
+const common = require('./common');
+
+module.exports = merge(common, {
+    mode: 'development',
+    entry: [
+        'webpack-hot-middleware/client',
+        join(__dirname, '../../src/client/index'),
+    ],
+    devtool: 'cheap-eval-module-source-map',
+    plugins: [
+        new webpack.HotModuleReplacementPlugin(),
+    ],
+});

webpack/client.production.js webpack/client/common.jswebpack/client.production.js renamed to webpack/client/common.js

@@ -0,0 +1,16 @@
+const { join } = require('path');
+const merge = require('webpack-merge');
+const StatsWebpackPlugin = require('stats-webpack-plugin');
+
+const common = require('./common');
+
+module.exports = merge(common, {
+    mode: 'production',
+    entry: [
+        join(__dirname, '../../src/client/index'),
+    ],
+    devtool: 'source-map',
+    plugins: [
+        new StatsWebpackPlugin('stats.json'),
+    ],
+});

webpack/client/dev.js

@@ -4,22 +4,25 @@ const WebpackBar = require('webpackbar');
 module.exports = {
     output: {
         path: join(__dirname, '../public/assets'),
-        publicPath: '/'
+        publicPath: '/',
     },
     resolve: {
         extensions: ['.js'],
-        modules: [join(__dirname, '../node_modules'), join(__dirname, '../src')]
+        modules: [
+            join(__dirname, '../node_modules'),
+            join(__dirname, '../src')
+        ],
     },
     module: {
         rules: [
             {
                 test: /\.js$/,
                 exclude: /node_modules/,
                 use: 'babel-loader'
-            }
-        ]
+            },
+        ],
     },
     plugins: [
-        new WebpackBar()
-    ]
+        new WebpackBar(),
+    ],
 };

webpack/client/prod.js

@@ -1,8 +1,8 @@
-const merge = require('webpack-merge');
-const common = require('./common');
 const { join } = require('path');
 const CopyPlugin = require('copy-webpack-plugin');
+const merge = require('webpack-merge');
 
+const common = require('./common');
 const extendedNodeExternals = require('../scripts/extended-node-externals');
 
 module.exports = merge(common, {
@@ -11,19 +11,21 @@ module.exports = merge(common, {
     externals: extendedNodeExternals,
     node: {
         __dirname: false,
-        __filename: false
+        __filename: false,
     },
-    entry: ['@babel/polyfill', join(__dirname, '../src/index')],
+    entry: [
+        join(__dirname, '../src/index')
+    ],
     output: {
         filename: 'index.js',
-        path: join(__dirname, '../public')
+        path: join(__dirname, '../public'),
     },
     plugins: [
         new CopyPlugin([
             {
                 from: join(__dirname, '../package.json'),
                 to: join(__dirname, '../public/package.json')
-            }
-        ])
-    ]
+            },
+        ]),
+    ],
 });