feat(webpack): upgrade to webpack 4 r=@vladikoff

.eslintrc

@@ -13,7 +13,7 @@ rules:
   keyword-spacing: 2
   linebreak-style: [2, "unix"]
   max-len: [2, 160]
-  new-cap: [2, {"newIsCap": true, "capIsNew": false}]
+  new-cap: [2, {"newIsCap": true, "capIsNew": false, "newIsCapExceptionPattern": "^FxaClient" }]
   no-console: 0
   no-multi-str: 2
   no-useless-escape: 0

app/scripts/lib/fxa-client.js

@@ -149,7 +149,7 @@ define(function (require, exports, module) {
       }
 
       return importFxaClient().then((FxaClient) => {
-        const client = new FxaClient(this._authServerUrl);
+        const client = new FxaClient.default(this._authServerUrl);
         this._client = wrapClientToNormalizeErrors(client);
         return this._client;
       });

package.json

@@ -48,6 +48,7 @@
     "duration-js": "3.6.0",
     "easterEgg": "git://github.com/mozilla/fxa-easter-egg.git#ab20cd517cf8ae9feee115e48745189d28e13bc3",
     "es6-promise": "4.2.4",
+    "expose-loader": "0.7.5",
     "express": "4.16.2",
     "extend": "3.0.1",
     "fxa-common-password-list": "0.0.2",
@@ -76,7 +77,7 @@
     "grunt-usemin": "3.1.1",
     "grunt-z-schema": "0.1.0",
     "handlebars": "4.0.11",
-    "happypack": "4.0.1",
+    "happypack": "5.0.0",
     "helmet": "3.8.2",
     "i18n-abide": "0.0.25",
     "joi": "10.4.1",
@@ -109,10 +110,11 @@
     "speed-trap": "git://github.com/rum-diary/speed-trap#0.0.8",
     "time-grunt": "1.4.0",
     "ua-parser-js": "git://github.com/vladikoff/ua-parser-js.git#fxa-version",
-    "uglifyjs-webpack-plugin": "1.1.8",
+    "uglifyjs-webpack-plugin": "1.2.7",
     "underscore": "1.8.3",
     "universal-analytics": "0.4.15",
-    "webpack": "3.10.0",
+    "webpack": "4.16.1",
+    "webpack-cli": "3.1.0",
     "webrtc-adapter-test": "0.2.5"
   },
   "devDependencies": {
@@ -147,7 +149,7 @@
     "proxyquire": "1.7.4",
     "sinon": "4.5.0",
     "sync-exec": "0.6.2",
-    "webpack-dev-middleware": "2.0.4",
+    "webpack-dev-middleware": "3.1.3",
     "xmlhttprequest": "git://github.com/zaach/node-XMLHttpRequest.git#onerror",
     "yargs": "10.0.3"
   },

webpack.config.js

@@ -11,6 +11,7 @@ const config = require('./server/lib/configuration').getProperties();
 
 const ENV = config.env;
 const webpackConfig = {
+  mode: ENV,
   context: path.resolve(__dirname, 'app/scripts'),
   entry: {
     app: './app.js',
@@ -83,6 +84,24 @@ const webpackConfig = {
 
   module: {
     rules: [
+      {
+        test: require.resolve('jquery'),
+        use: [{
+          loader: 'expose-loader',
+          options: 'jQuery'
+        },
+          {
+            loader: 'expose-loader',
+            options: '$'
+          }],
+      },
+      {
+        test: require.resolve('mocha'),
+        use: [{
+          loader: 'expose-loader',
+          options: 'mocha'
+        }],
+      },
       {
         test: /\.mustache$/,
         loader: 'fxa-mustache-loader'
@@ -102,6 +121,17 @@ const webpackConfig = {
       }
     ]
   },
+  optimization: {
+    splitChunks: { // CommonsChunkPlugin()
+      cacheGroups: {
+        appDependencies: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'appDependencies',
+          chunks: 'initial'
+        }
+      }
+    },
+  },
   plugins: ([
     new HappyPack({
       loaders: [{
@@ -115,49 +145,7 @@ const webpackConfig = {
       threads: 4,
       debug: false
     }),
-    new webpack.NamedChunksPlugin(),
-    new webpack.optimize.CommonsChunkPlugin({
-      chunks: ["app", "test", "testDependencies"],
-      name: "appDependencies",
-      minChunks: Infinity,
-    }),
-  ]).concat(ENV === 'production' ? [
-    new UglifyJsPlugin({
-      uglifyOptions: {
-        compress: {
-          unsafe_comps: true,
-          properties: true,
-          keep_fargs: false,
-          pure_getters: true,
-          collapse_vars: true,
-          unsafe: true,
-          warnings: false,
-          sequences: true,
-          dead_code: true,
-          drop_debugger: true,
-          comparisons: true,
-          conditionals: true,
-          evaluate: true,
-          booleans: true,
-          loops: true,
-          unused: true,
-          hoist_funs: true,
-          if_return: true,
-          join_vars: true,
-          drop_console: true
-        },
-      },
-      sourceMap: true,
-      cache: true,
-      parallel: true
-    }),
-  ] : []).concat(ENV === 'development' ? [
-    new webpack.optimize.CommonsChunkPlugin({
-      chunks: ["test"],
-      name: "testDependencies",
-      minChunks: Infinity,
-    })
-  ]: []),
+  ]),
 
   stats: { colors: true },
 
@@ -174,12 +162,47 @@ if (ENV === 'development') {
   Object.assign(webpackConfig.entry, {
     test: '../tests/webpack.js',
     testDependencies: [
+      'jquery',
       'chai',
       'jquery-simulate',
       'mocha',
       'sinon',
     ]
   });
+} else {
+  Object.assign(webpackConfig.optimization, {
+    minimizer: [
+      new UglifyJsPlugin({
+        uglifyOptions: {
+          compress: {
+            unsafe_comps: true,
+            properties: true,
+            keep_fargs: false,
+            pure_getters: true,
+            collapse_vars: true,
+            unsafe: true,
+            warnings: false,
+            sequences: true,
+            dead_code: true,
+            drop_debugger: true,
+            comparisons: true,
+            conditionals: true,
+            evaluate: true,
+            booleans: true,
+            loops: true,
+            unused: true,
+            hoist_funs: true,
+            if_return: true,
+            join_vars: true,
+            drop_console: true
+          },
+        },
+        sourceMap: true,
+        cache: true,
+        parallel: true
+      }),
+    ]
+  });
 }
 
 module.exports = webpackConfig;