Use webpack-config-utils and optimize webpack

frontend/.gitignore

@@ -7,6 +7,7 @@
 node_modules
 
 # Artifacts
+.babel_loader_cache
 .nyc_output
 coverage
 dist

frontend/app/webpack.config.js

@@ -1,40 +1,93 @@
 const path = require('path');
 const webpack = require('webpack');
+const { getIfUtils, removeEmpty } = require('webpack-config-utils');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
-const commonConfig = require('./webpack.common.config.js');
+const { ifProduction, ifDevelopment } = getIfUtils(process.env.NODE_ENV || 'development');
 
 module.exports = ['en', 'de'].map(lang => ({
-  ...commonConfig[lang],
   name: lang,
-  devtool: 'eval-source-map',
+  devtool: ifDevelopment('eval-source-map'),
   entry: {
-    main: [
+    main: removeEmpty([
       'babel-polyfill',
-      'webpack-hot-middleware/client?reload=true',
+      ifDevelopment('webpack-hot-middleware/client?reload=true'),
       path.join(__dirname, `src/js/main.${lang}.js`)
-    ]
+    ])
   },
   output: {
     path: path.join(__dirname, 'dist/'),
-    filename: `[name].${lang}.js`,
-    publicPath: '/'
+    filename: ifProduction(`[name]-[hash].${lang}.min.js`, `[name].${lang}.js`),
+    publicPath: '/',
+    pathinfo: ifDevelopment(true, false)
   },
-  plugins: [
-    ...commonConfig[lang].plugins,
-    new ProgressBarPlugin(),
-    new webpack.HotModuleReplacementPlugin(),
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('development')
+  plugins: removeEmpty([
+    new HtmlWebpackPlugin({
+      template: path.join(__dirname, 'src/index.tpl.html'),
+      inject: 'body',
+      filename: `index.${lang}.html`
     }),
-  ],
+    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de/),
+    ifProduction(new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
+    })),
+    ifProduction(new ExtractTextPlugin({
+      filename: `[name]-[hash].${lang}.min.css`, allChunks: true
+    })),
+    ifProduction(new webpack.optimize.ModuleConcatenationPlugin()),
+    ifProduction(new webpack.optimize.UglifyJsPlugin({
+      compressor: {
+        warnings: false,
+        screw_ie8: true
+      }
+    })),
+    ifProduction(new BundleAnalyzerPlugin({
+      generateStatsFile: true,
+      analyzerMode: 'static' // Set to 'server' to analyze
+    })),
+    ifProduction(new webpack.NoEmitOnErrorsPlugin()),
+    ifDevelopment(new ProgressBarPlugin()),
+    ifDevelopment(new webpack.HotModuleReplacementPlugin()),
+  ]),
   module: {
-    ...commonConfig[lang].module,
     rules: [
-      ...commonConfig[lang].module.rules,
+      {
+        test: /\.js$/,
+        exclude: path.join(__dirname, '../node_modules/'),
+        loader: 'babel-loader',
+        options: { cacheDirectory: '../.babel_loader_cache' }
+      }, {
+        test: /\.json$/,
+        loader: 'json-loader'
+      }, {
+        test: /\.yml$/,
+        loader: 'json-loader!yaml-loader'
+      }, {
+        test: /\.(ttf|eot|svg|png|jpg|woff(2)?)(\?.*$|$)/,
+        loader: "file-loader?name=[name].[ext]"
+      },
       {
         test: /\.sass$/,
-        loaders: [
+        use: ifProduction(
+          ExtractTextPlugin.extract({
+            fallback: 'style-loader',
+            use: [
+              'css-loader',
+              { loader: 'postcss-loader', options: { sourceMap: true } },
+              'resolve-url-loader',
+              {
+                loader: 'sass-loader',
+                options: {
+                  indentedSyntax: true,
+                  sourceMap: true, // Necessary for resolve-url
+                }
+              }
+            ]
+          }),
+          [
           'style-loader',
           'css-loader',
           { loader: 'postcss-loader', options: { sourceMap: true } },
@@ -44,10 +97,9 @@ module.exports = ['en', 'de'].map(lang => ({
             options: {
               indentedSyntax: true,
               sourceMap: true, // Necessary for resolve-url
-              includePaths: [path.join(__dirname, 'node_modules/conquery/dist/styles')]
             }
           }
-        ]
+        ])
       },
     ]
   },

frontend/package.json

@@ -14,7 +14,7 @@
     "start-production": "cross-env NODE_ENV=production PORT=8000 node app/server > webapp.log 2> webapp-err.log &",
     "lint": "eslint --ext=js lib/js test app/src/js",
     "build": "rimraf dist && gulp",
-    "build-app": "cd app && rimraf dist && cross-env NODE_ENV=production webpack --config ./webpack.production.config.js --progress --profile --colors",
+    "build-app": "cd app && rimraf dist && cross-env NODE_ENV=production webpack --progress --profile --colors",
     "heroku-postbuild": "yarn run build-app",
     "flow": "flow; test $? -eq 0 -o $? -eq 2",
     "test": "rimraf coverage && cross-env NODE_ENV=test nyc _mocha test",
@@ -35,7 +35,7 @@
     "isomorphic-fetch": "^2.2.1",
     "less": "^3.0.1",
     "moment": "^2.17.0",
-    "prop-types": "^15.6.0",
+    "prop-types": "^15.6.1",
     "query-string": "^5.1.0",
     "react": "^16.2.0",
     "react-addons-test-utils": "^15.3.1",
@@ -62,7 +62,7 @@
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.2.2",
-    "babel-loader": "^7.1.2",
+    "babel-loader": "^7.1.3",
     "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
@@ -71,23 +71,23 @@
     "body-parser": "^1.18.2",
     "chai": "^4.1.2",
     "cross-env": "^5.1.3",
-    "css-loader": "^0.28.9",
+    "css-loader": "^0.28.10",
     "dirty-chai": "^2.0.1",
     "eslint": "^4.18.1",
     "eslint-config-standard": "^11.0.0",
     "eslint-config-standard-react": "^6.0.0",
     "eslint-plugin-babel": "^4.1.2",
-    "eslint-plugin-flowtype": "^2.6.0",
+    "eslint-plugin-flowtype": "^2.46.1",
     "eslint-plugin-import": "^2.9.0",
     "eslint-plugin-mocha": "^4.11.0",
-    "eslint-plugin-node": "^6.0.0",
+    "eslint-plugin-node": "^6.0.1",
     "eslint-plugin-promise": "^3.6.0",
     "eslint-plugin-react": "^7.7.0",
     "eslint-plugin-standard": "^3.0.1",
     "expect": "^22.4.0",
     "express": "^4.16.2",
     "extract-text-webpack-plugin": "^3.0.2",
-    "file-loader": "^1.1.9",
+    "file-loader": "^1.1.10",
     "flow-bin": "^0.66.0",
     "flow-typed": "^2.3.0",
     "flux-standard-action": "^2.0.1",
@@ -100,13 +100,13 @@
     "jsdom-global": "^3.0.2",
     "mocha": "^5.0.1",
     "mock-local-storage": "^1.0.5",
-    "nock": "^9.1.9",
+    "nock": "^9.2.3",
     "node-sass": "^4.7.2",
     "nyc": "^11.4.1",
-    "postcss-loader": "^2.1.0",
+    "postcss-loader": "^2.1.1",
     "progress-bar-webpack-plugin": "^1.11.0",
     "raw-loader": "^0.5.1",
-    "react-hot-loader": "^4.0.0-rc.0",
+    "react-hot-loader": "^4.0.0",
     "redux-logger": "^3.0.6",
     "redux-mock-store": "^1.5.1",
     "resolve-url-loader": "^2.2.1",
@@ -116,8 +116,9 @@
     "timekeeper": "^2.0.0",
     "url-loader": "^0.6.2",
     "webpack": "^3.11.0",
-    "webpack-bundle-analyzer": "^2.10.0",
-    "webpack-dev-middleware": "^2.0.5",
+    "webpack-bundle-analyzer": "^2.11.0",
+    "webpack-config-utils": "^2.3.0",
+    "webpack-dev-middleware": "^2.0.6",
     "webpack-hot-middleware": "^2.21.0",
     "yaml-loader": "^0.5.0"
   },