Upgrading webpack to 4.0

Needed to replace favicon generator

package.json

@@ -139,10 +139,9 @@
     "eslint": "^4.17.0",
     "eslint-plugin-jest": "^21.8.0",
     "eslint-plugin-react": "^7.6.1",
-    "extract-text-webpack-plugin": "^3.0.2",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
-    "favicons-webpack-plugin-cesco": "^0.0.6",
     "feather-icons": "^4.5.0",
-    "html-webpack-plugin": "^2.30.1",
+    "html-webpack-plugin": "^3.0.0",
     "i18next": "^10.3.0",
     "i18next-browser-languagedetector": "^2.1.0",
     "identity-obj-proxy": "^3.0.0",
@@ -161,7 +160,9 @@
     "svg-react-loader": "^0.4.5",
     "uglifyjs-webpack-plugin": "^1.1.8",
     "url-search-params": "^0.10.0",
-    "webpack": "^3.10.0",
+    "webapp-webpack-plugin": "^1.1.1",
+    "webpack": "^4.1.1",
+    "webpack-cli": "^2.0.9",
     "webpack-merge": "^4.1.1",
     "webpack-node-externals": "^1.6.0",
     "workbox-webpack-plugin": "^2.1.2"
@@ -170,6 +171,6 @@
     "http-server": "^0.11.1",
     "husky": "^0.14.3",
     "js-yaml": "^3.10.0",
-    "webpack-dev-server": "^2.11.1"
+    "webpack-dev-server": "3.1.0"
   }
 }

webpack.common.js

@@ -3,7 +3,7 @@ const fs = require('fs');
 const webpack = require('webpack');
 const CopyPlugin = require('copy-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const FaviconsPlugin = require('favicons-webpack-plugin-cesco');
+const WebappPlugin = require('webapp-webpack-plugin');
 const HtmlPlugin = require('html-webpack-plugin');
 
 const pkg = require('./package.json');
@@ -47,6 +47,12 @@ module.exports = {
   resolve: {
     modules: ['src', 'node_modules']
   },
+  optimization: {
+    splitChunks: {
+      name: 'common',
+      minChunks: 2
+    }
+  },
   plugins: [
     new webpack.EnvironmentPlugin({
       NODE_ENV: 'development',
@@ -56,19 +62,21 @@ module.exports = {
       BANNER: process.env.NODE_ENV === 'production' ? null : (process.env.NODE_ENV || 'development'),
       BUILD_ID: buildId
     }),
-    new webpack.optimize.CommonsChunkPlugin({
+    new ExtractTextPlugin({
-      name: 'common',
+      filename: 'css/[name].[contenthash:8].css',
-      minChunks: 2
+      allChunks: true
     }),
-    new FaviconsPlugin({
+    new CopyPlugin(['./public']),
+    ...pagePlugins,
+    new WebappPlugin({ // MUST be after pagePlugins
       logo: './src/favicon.svg',
-      persistentCache: true,
+      prefix: 'icons-[hash:8]/',
       inject: true,
-      config: {
+      favicons: {
         appName: 'Regexper',
         appDescription: pkg.description,
         developerName: pkg.author.name,
-        developerUrl: 'https://github.com/javallone/',
+        developerURL: 'https://github.com/javallone/',
         background: '#6b6659',
         theme_color: '#bada55',
         start_url: '/',
@@ -82,13 +90,7 @@ module.exports = {
           yandex: false
         }
       }
-    }),
+    })
-    new ExtractTextPlugin({
-      filename: 'css/[name].[contenthash:8].css',
-      allChunks: true
-    }),
-    new CopyPlugin(['./public']),
-    ...pagePlugins
   ],
   module: {
     rules: [

webpack.dev.js

@@ -2,6 +2,7 @@ const merge = require('webpack-merge');
 const common = require('./webpack.common.js');
 
 module.exports = merge(common, {
+  mode: 'development',
   devtool: 'cheap-module-source-map',
   devServer: {
     contentBase: './build'

webpack.prod.js

@@ -9,6 +9,7 @@ const nodeExternals = require('webpack-node-externals');
 module.exports = [
   // Web
   merge(common, {
+    mode: 'production',
     devtool: 'source-map',
     plugins: [
       new UglifyJSPlugin({
@@ -36,6 +37,7 @@ module.exports = [
   }),
   // Node (prerender)
   {
+    mode: 'production',
     target: 'node',
     externals: [nodeExternals({
       whitelist: [ /\.svg$/ ]