Merge pull request #1725 from mailpoet/webpack-upgrade

Webpack upgrade [MAILPOET-1667]

assets/js/src/amd-inject-loader-fixed.js

@@ -0,0 +1,6 @@
+var amdInjectLoader = require('amd-inject-loader');
+
+// fix original 'amd-inject-loader' for Webpack 4 by adding missing 'options' field to its context
+module.exports = function amdInjectLoaderFixed(input) {
+  return amdInjectLoader.call(Object.assign({}, this, { options: {} }), input);
+};

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"
+    "terser-webpack-plugin": "^1.2.1",
+    "webpack": "^4.28.1",
+    "webpack-cli": "^3.2.1",
+    "webpack-manifest-plugin": "^2.0.4"
   }
 }

views/layout.html

@@ -72,6 +72,7 @@ jQuery('.toplevel_page_mailpoet-newsletters.menu-top-last')
 <% block after_translations %><% endblock %>
 
 <%= javascript(
+  'admin_vendor_chunk.js',
   'admin_vendor.js'
 )%>
 

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 = {};
+const webpack = require('webpack');
+const webpackManifestPlugin = require('webpack-manifest-plugin');
+const webpackCleanPlugin = require('clean-webpack-plugin');
+const webpackTerserPlugin = require('terser-webpack-plugin');
+const path = require('path');
+const globalPrefix = 'MailPoetLib';
+const PRODUCTION_ENV = process.env.NODE_ENV === 'production';
+const manifestSeed = {};
 
 // Base config
-var baseConfig = {
+const baseConfig = {
+  mode: PRODUCTION_ENV ? 'production' : 'development',
   cache: true,
   context: __dirname,
   watchOptions: {
     aggregateTimeout: 300,
     poll: true
   },
+  optimization: {
+    minimizer: [
+      new webpackTerserPlugin({
+        terserOptions: {
+          // preserve identifier names for easier debugging & support
+          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: [
@@ -224,7 +233,7 @@ var baseConfig = {
 };
 
 // Admin config
-var adminConfig = {
+const adminConfig = {
   name: 'admin',
   entry: {
     vendor: 'webpack_vendor_index.jsx',
@@ -252,20 +261,42 @@ 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_chunk: {
+          name: 'admin_vendor_chunk',
+          test: (module, chunks) => {
+            // add all modules from 'admin_vendor' entrypoint
+            if (chunks.some((chunk) => chunk.name === 'admin_vendor')) {
+              return true;
+            }
+
+            // add admin/form_editor/newsletter_editor shared modules
+            const filteredChunks = chunks.filter((chunk) => {
+              return ['admin', 'form_editor', 'newsletter_editor'].includes(chunk.name);
+            });
+            return filteredChunks.length > 1;
+          },
+          enforce: true,
+          chunks: (chunk) => ['admin_vendor', 'admin', 'form_editor', 'newsletter_editor'].includes(chunk.name),
+          priority: 0,
+        },
+      }
+    }
+  },
   externals: {
     'jquery': 'jQuery',
     'tinymce': 'tinymce'
@@ -273,7 +304,7 @@ var adminConfig = {
 };
 
 // Public config
-var publicConfig = {
+const publicConfig = {
   name: 'public',
   entry: {
     public: 'webpack_public_index.jsx',
@@ -293,7 +324,7 @@ var publicConfig = {
 };
 
 // Migrator config
-var migratorConfig = {
+const migratorConfig = {
   name: 'mp2migrator',
   entry: {
     mp2migrator: [
@@ -305,8 +336,9 @@ var migratorConfig = {
     'mailpoet': 'MailPoet'
   }
 };
+
 // Test config
-var testConfig = {
+const testConfig = {
   name: 'test',
   entry: {
     vendor: 'webpack_vendor_index.jsx',
@@ -362,6 +394,12 @@ var testConfig = {
       'wp-js-hooks': 'WP-JS-Hooks/src/event-manager.js',
     },
   },
+  resolveLoader: {
+    alias: {
+      // replace 'amd-inject-loader' with a wrapper fixed for Webpack 4
+      'amd-inject-loader': path.join(__dirname, 'assets/js/src/amd-inject-loader-fixed.js'),
+    }
+  },
   externals: {
     'jquery': 'jQuery',
     'tinymce': 'tinymce',
@@ -370,25 +408,15 @@ var testConfig = {
   }
 };
 
-module.exports = _.map([adminConfig, publicConfig, migratorConfig, testConfig], function (config) {
+module.exports = [adminConfig, publicConfig, migratorConfig, testConfig].map((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
+        // create single manifest file for all Webpack configs
+        seed: manifestSeed,
       })
     );
   }
-  return _.extend({}, baseConfig, config);
+  return Object.assign({}, baseConfig, config);
 });