Feature/upgrade to webpack 4

frontend/.eslintrc.json

@@ -2,13 +2,12 @@
   "parser": "babel-eslint",
   "extends": ["standard", "standard-react"],
   "plugins": [
-    "mocha",
     "import",
     "flowtype",
     "babel"
   ],
   "env": {
-    "mocha": true,
+    "jest": true,
     "browser": true
   },
   "globals": {
@@ -32,7 +31,6 @@
     "react/jsx-indent": 0,       // We indent how we like. (sometimes a custom indentation is great)
     "react/jsx-boolean-value": 0,
     "react/no-unused-prop-types": 0, // Too many false positives ( https://github.com/yannickcr/eslint-plugin-react/issues/976 )
-    "mocha/no-exclusive-tests": 2,
     "standard/object-curly-even-spacing": 0,
     "import/no-duplicates": 2,
     "import/no-unresolved": [2, { "commonjs": true, "amd": true }],

frontend/.flowconfig

@@ -17,4 +17,4 @@ module.name_mapper='.*\(.yml\)' -> 'empty/object'
 ; suppress_comment= \\(.\\|\n\\)*\\$FlowFixMe
 
 [version]
-0.69.0
+0.92.1

frontend/app/server.js

@@ -1,30 +1,30 @@
 // -----------
 // EXPRESS SETUP
 // -----------
-var path         = require('path');
-var express      = require('express');
-var bodyParser   = require('body-parser');
-var mountApi     = require('./api');
+const path         = require('path');
+const express      = require('express');
+const bodyParser   = require('body-parser');
+const mountApi     = require('./api');
 
-var isDeveloping = process.env.NODE_ENV !== 'production';
-var port         = (process.env.PORT || 8000);
-var app          = express();
+const isDeveloping = process.env.NODE_ENV !== 'production';
+const port         = (process.env.PORT || 8000);
+const app          = express();
 
 // body parser must be set up before routes are attached
 app.use(bodyParser.json());
 mountApi(app, port);
 
 if (isDeveloping) {
-  var webpack              = require('webpack');
-  var webpackMiddleware    = require('webpack-dev-middleware');
-  var webpackHotMiddleware = require('webpack-hot-middleware');
-  var config               = require('./webpack.config.js');
+  const webpack              = require('webpack');
+  const webpackMiddleware    = require('webpack-dev-middleware');
+  const webpackHotMiddleware = require('webpack-hot-middleware');
+  const config               = require('./webpack.config.js');
 
-  var lang = 'en';
+  const lang = 'en';
 
   // We will only use the english version during development
-  var compiler   = webpack(config.filter(x => x.name == lang));
-  var middleware = webpackMiddleware(compiler, {
+  const compiler   = webpack(config.filter(x => x.name === lang));
+  const middleware = webpackMiddleware(compiler, {
     publicPath: '/',
     contentBase: 'src',
     stats: {
@@ -47,6 +47,7 @@ if (isDeveloping) {
   app.use(express.static(__dirname + '/dist'));
   app.get('*', function response(req, res) {
     const lang = req.acceptsLanguages('de', 'en') || 'en';
+
     res.sendFile(path.join(__dirname, `dist/index.${lang}.html`));
   });
 }

frontend/app/src/js/main.js

@@ -13,7 +13,7 @@ const environment = {
   basename: isProduction
     ? '/' // Possibly: Run under a subpath in production
     : '/',
-    apiUrl: '/api'
+  apiUrl: '/api'
 };
 
 const tabs = {

frontend/app/webpack.config.js

@@ -1,55 +1,82 @@
 const path = require('path');
 const webpack = require('webpack');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const { getIfUtils, removeEmpty } = require('webpack-config-utils');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
-const commonConfig = require('./webpack.common.config.js');
+const env = process.env.NODE_ENV || 'development';
+const { ifProduction, ifDevelopment } = getIfUtils(env);
 
 module.exports = ['en', 'de'].map(lang => ({
-  ...commonConfig[lang],
+  mode: env,
   name: lang,
-  devtool: 'eval-source-map',
+  devtool: ifDevelopment('eval-source-map'),
   entry: {
-    main: [
-      'babel-polyfill',
-      'webpack-hot-middleware/client?reload=true',
+    main: removeEmpty([
+      "@babel/polyfill",
+      ifDevelopment('webpack-hot-middleware/client?reload=true'),
       path.join(__dirname, `src/js/main.${lang}.js`)
-    ]
+    ])
   },
   output: {
-    path: path.join(__dirname, 'dist/'),
+    path: path.join(__dirname, 'dist'),
     filename: `[name].${lang}.js`,
     publicPath: '/'
   },
-  plugins: [
-    ...commonConfig[lang].plugins,
-    new ProgressBarPlugin(),
-    new webpack.HotModuleReplacementPlugin(),
+  optimization: {
+    minimizer: removeEmpty([
+      ifProduction(new UglifyJsPlugin({
+        parallel: true
+      })),
+      ifProduction(new OptimizeCSSAssetsPlugin()),
+    ])
+  },
+  plugins: removeEmpty([
+    ifProduction(new MiniCssExtractPlugin({
+      filename: `[name]-[hash].${lang}.min.css`
+    })),
+    ifDevelopment(new webpack.HotModuleReplacementPlugin()),
+    ifDevelopment(new ProgressBarPlugin()),
     new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('development'),
       'process.env.SEARCH_RESULT_LIMIT': 50
     }),
-  ],
+    new HtmlWebpackPlugin({
+        template: path.join(__dirname, 'src/index.tpl.html'),
+        inject: 'body',
+        filename: `index.${lang}.html`
+    }),
+    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de|en/)
+  ]),
   module: {
-    ...commonConfig[lang].module,
     rules: [
-      ...commonConfig[lang].module.rules,
       {
-        test: /\.sass$/,
-        loaders: [
-          'style-loader',
+        test: /\.js$/,
+        exclude: path.join(__dirname, '../node_modules/'),
+        use: 'babel-loader'
+      }, {
+        test: /\.yml$/,
+        use: 'js-yaml-loader'
+      }, {
+        test: /\.(ttf|eot|svg|png|jpg|woff(2)?)(\?.*$|$)/,
+        use: "file-loader?name=[name].[ext]"
+      }, {
+        test: /\.(sa|sc|c)ss$/,
+        use: [
+          ifProduction(MiniCssExtractPlugin.loader, 'style-loader'),
           'css-loader',
           { loader: 'postcss-loader', options: { sourceMap: true } },
           'resolve-url-loader',
           {
             loader: 'sass-loader',
             options: {
-              indentedSyntax: true,
               sourceMap: true, // Necessary for resolve-url
-              includePaths: [path.join(__dirname, 'node_modules/conquery/dist/styles')]
             }
           }
         ]
-      },
+      }
     ]
   },
   node: {

frontend/babel.config.js

@@ -0,0 +1,11 @@
+// Before, we've been using stage-1. @babel/preset-stage-1 was deprecated for good reason.
+// Now we're still using some early-stage proposals
+// TODO: Refactor the code and get rid of them
+
+module.exports = {
+  "presets": ["react-app"],
+  "plugins": [
+    "@babel/plugin-proposal-export-default-from",
+    "@babel/plugin-proposal-export-namespace-from",
+  ]
+}

frontend/gulpfile.js

@@ -1,25 +1,25 @@
-const gulp = require('gulp');
+const { series, src, dest } = require('gulp');
 const babel = require('gulp-babel');
 
-gulp.task('default', ['js', 'styles', 'images', 'localization']);
-
-gulp.task('js', () => {
-  return gulp.src('lib/js/**/*.js')
+function js() {
+  return src('lib/js/**/*.js')
     .pipe(babel())
-    .pipe(gulp.dest('dist/js'));
-});
+    .pipe(dest('dist/js'));
+};
+
+function styles() {
+  return src('lib/styles/**/*.sass')
+    .pipe(dest('dist/styles'));
+};
 
-gulp.task('styles', () => {
-  return gulp.src('lib/styles/**/*.sass')
-    .pipe(gulp.dest('dist/styles'));
-});
+function images() {
+  return src('lib/images/**/*')
+    .pipe(dest('dist/images'));
+};
 
-gulp.task('images', () => {
-  return gulp.src('lib/images/**/*')
-    .pipe(gulp.dest('dist/images'));
-});
+function localization() {
+  return src('lib/localization/**/*.yml')
+    .pipe(dest('dist/localization'));
+};
 
-gulp.task('localization', () => {
-  return gulp.src('lib/localization/**/*.yml')
-    .pipe(gulp.dest('dist/localization'));
-});
+exports.default = series(js, styles, images, localization);

frontend/jest.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  "moduleNameMapper": {
+    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/__mocks__/fileMock.js",
+    "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js"
+  },
+  "setupFiles": ["<rootDir>/test/.setup.js"]
+};