Upgrade Webpack to version 4

[MAILPOET-1667]

package.json

@@ -50,7 +50,6 @@
   "devDependencies": {
     "@babel/core": "^7.2.0",
     "@babel/plugin-proposal-class-properties": "^7.2.1",
-    "@babel/preset-env": "^7.2.0",
     "@babel/plugin-proposal-decorators": "^7.1.6",
     "@babel/plugin-proposal-export-namespace-from": "^7.2.0",
     "@babel/plugin-proposal-function-sent": "^7.2.0",
@@ -60,13 +59,14 @@
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-syntax-import-meta": "^7.2.0",
     "@babel/plugin-transform-runtime": "^7.2.0",
+    "@babel/preset-env": "^7.2.0",
     "@babel/preset-react": "^7.0.0",
     "amd-inject-loader": "~0.5.0",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.4",
     "chai": "2.2.0",
     "chai-jq": "0.0.8",
-    "clean-webpack-plugin": "^0.1.19",
+    "clean-webpack-plugin": "^1.0.0",
     "cross-env": "^5.1.5",
     "eslint": "^4.19.1",
     "eslint-config-airbnb": "^15.0.1",
@@ -86,8 +86,9 @@
     "sinon": "1.14.1",
     "sinon-chai": "2.7.0",
     "stylus": "~0.54.5",
-    "webpack": "3.12.0",
-    "webpack-manifest-plugin": "^1.3.2",
-    "webpack-md5-hash": "0.0.5"
+    "uglifyjs-webpack-plugin": "^2.1.1",
+    "webpack": "^4.28.1",
+    "webpack-cli": "^3.2.1",
+    "webpack-manifest-plugin": "^2.0.4"
   }
 }

webpack.config.js

@@ -1,22 +1,31 @@
 var webpack = require('webpack');
 var webpackManifestPlugin = require('webpack-manifest-plugin');
-var webpackMD5HashPlugin = require('webpack-md5-hash');
 var webpackCleanPlugin = require('clean-webpack-plugin');
 var webpackUglifyJsPlugin = require('uglifyjs-webpack-plugin');
 var _ = require('underscore');
 var path = require('path');
 var globalPrefix = 'MailPoetLib';
 var PRODUCTION_ENV = process.env.NODE_ENV === 'production';
-var manifestCache = {};
+var manifestSeed = {};
 
 // Base config
 var baseConfig = {
+  mode: PRODUCTION_ENV ? 'production' : 'development',
   cache: true,
   context: __dirname,
   watchOptions: {
     aggregateTimeout: 300,
     poll: true
   },
+  optimization: {
+    minimizer: [
+      new webpackUglifyJsPlugin({
+        uglifyOptions: {
+          mangle: false,
+        },
+      }),
+    ],
+  },
   output: {
     path: path.join(__dirname, 'assets/js'),
     filename: (PRODUCTION_ENV) ? '[name].[hash:8].js' : '[name].js',
@@ -49,7 +58,7 @@ var baseConfig = {
   plugins: [
     new webpackCleanPlugin([
       './assets/js/*.*',
-    ])
+    ]),
   ],
   module: {
     rules: [
@@ -252,20 +261,30 @@ var adminConfig = {
     form_editor: 'form_editor/webpack_index.jsx',
     newsletter_editor: 'newsletter_editor/webpack_index.jsx',
   },
-  plugins: [
-    ...baseConfig.plugins,
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'admin_vendor',
-      fileName: 'admin_vendor.js',
-      chunks: ['admin', 'form_editor', 'newsletter_editor'],
-      minChunks: 2
-    }),
-    new webpack.optimize.CommonsChunkPlugin({
+  optimization: {
+    runtimeChunk: {
       name: 'vendor',
-      fileName: 'vendor.js',
-      minChunks: Infinity
-    })
-  ],
+    },
+    splitChunks: {
+      cacheGroups: {
+        chunks: 'all',
+        default: false,
+        vendors: false,
+        vendor: {
+          name: 'vendor',
+          chunks: (chunk) => chunk.name === 'vendor',
+          priority: 1,
+          enforce: true,
+        },
+        admin_vendor: {
+          name: 'admin_vendor',
+          chunks: (chunk) => ['admin_vendor', 'admin', 'form_editor', 'newsletter_editor'].includes(chunk.name),
+          minChunks: 2,
+          priority: 0,
+        },
+      }
+    }
+  },
   externals: {
     'jquery': 'jQuery',
     'tinymce': 'tinymce'
@@ -305,6 +324,7 @@ var migratorConfig = {
     'mailpoet': 'MailPoet'
   }
 };
+
 // Test config
 var testConfig = {
   name: 'test',
@@ -370,23 +390,12 @@ var testConfig = {
   }
 };
 
-module.exports = _.map([adminConfig, publicConfig, migratorConfig, testConfig], function (config) {
+module.exports = _.map([adminConfig, publicConfig, migratorConfig, testConfig], (config) => {
   if (config.name !== 'test') {
     config.plugins = config.plugins || [];
-    if (PRODUCTION_ENV) {
-      config.plugins.push(
-        new webpackUglifyJsPlugin({
-          mangle: false,
-        }),
-        new webpack.DefinePlugin({
-          'process.env.NODE_ENV': JSON.stringify('production')
-        }),
-      );
-    }
     config.plugins.push(
-      new webpackMD5HashPlugin(),
       new webpackManifestPlugin({
-        cache: manifestCache
+        seed: manifestSeed,
       })
     );
   }