Upgrade to webpack 4

The webpack community just released webpack v4. Upgrade to it.

Amongst the relevant upstream changes, the uglify plugin and
commonschunk plugins are no longer needed as their behavior is now just
builtin. The webpack.LoaderOptionsPlugin is no longer needed, it existed
to ease transition from webpack 1 to webpack 2. minify is now an option
to optimization.

Change-Id: I0359f69861211231e4875abf9817316d9e8878a1

package.json

@@ -38,23 +38,24 @@
     "babel-plugin-angularjs-annotate": "^0.8.2",
     "babel-preset-env": "^1.6.1",
     "clean-webpack-plugin": "^0.1.16",
-    "css-loader": "^0.28.4",
+    "css-loader": "^0.28.10",
     "eslint": ">=3.19.0",
     "eslint-config-standard": "^11.0.0-beta.0",
-    "eslint-loader": "^1.9.0",
+    "eslint-loader": "^2.0.0",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-node": "^6.0.0",
     "eslint-plugin-promise": "^3.6.0",
     "eslint-plugin-standard": "^3.0.1",
-    "file-loader": "^0.11.2",
-    "html-webpack-plugin": "^2.29.0",
+    "file-loader": "^1.1.11",
+    "html-webpack-plugin": "^3.0.0",
     "resolve-url-loader": "^2.1.0",
-    "style-loader": "^0.18.2",
+    "style-loader": "^0.20.3",
     "url-loader": "^0.5.9",
-    "webpack": "^3.3.0",
+    "webpack": "^4.4.0",
     "webpack-archive-plugin": "^3.0.0",
     "webpack-bundle-analyzer": "^2.9.1",
-    "webpack-dev-server": "^2.6.1",
+    "webpack-cli": "^2.0.11",
+    "webpack-dev-server": "^3.0.0",
     "webpack-merge": "^4.1.0"
   }
 }

web/config/webpack.common.js

@@ -1,20 +1,9 @@
 const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CleanWebpackPlugin = require('clean-webpack-plugin');
 
 module.exports = {
-  entry: {
-    main: './web/main.js',
-    // Tell webpack to extract 3rd party depdenencies which change less
-    // frequently.
-    vendor: [
-      'angular',
-      'bootstrap/dist/css/bootstrap.css',
-      'jquery-visibility/jquery-visibility',
-      'graphitejs/jquery.graphite.js'
-    ]
-  },
+  entry: './web/main.js',
   output: {
     filename: '[name].js',
     // path.resolve(__dirname winds up relative to the config dir
@@ -25,19 +14,23 @@ module.exports = {
   // expensive to build for prod. Debugging without the full source-map sucks,
   // so define it here in common.
   devtool: 'source-map',
+  optimization: {
+    runtimeChunk: true,
+    splitChunks: {
+      cacheGroups: {
+        commons: {
+          test: /node_modules/,
+          name: "vendor",
+          chunks: "all"
+        }
+      }
+    }
+  },
   plugins: [
     new webpack.ProvidePlugin({
         $: 'jquery/dist/jquery',
         jQuery: 'jquery/dist/jquery',
     }),
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-    }),
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'manifest',
-    }),
-    new CleanWebpackPlugin(
-        ['zuul/web/static'], { root: path.resolve(__dirname, '../..')}),
     // Each of the entries below lists a specific 'chunk' which is one of the
     // entry items from above. We can collapse this to just do one single
     // output file.

web/config/webpack.dev.js

@@ -4,7 +4,7 @@ const Merge = require('webpack-merge');
 const CommonConfig = require('./webpack.common.js');
 
 module.exports = Merge(CommonConfig, {
-
+  mode: 'development',
   // Enable Hot Module Replacement for devServer
   devServer: {
     hot: true,

web/config/webpack.lint.js

@@ -5,7 +5,7 @@ const CommonConfig = require('./webpack.common.js');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 module.exports = Merge(CommonConfig, {
-
+  mode: 'development',
   module: {
     rules: [
       {

web/config/webpack.prod.js

@@ -2,42 +2,25 @@ const path = require('path');
 const webpack = require('webpack');
 const Merge = require('webpack-merge');
 const CommonConfig = require('./webpack.common.js');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
 const ArchivePlugin = require('webpack-archive-plugin');
 
 module.exports = Merge(CommonConfig, {
+  mode: 'production',
   output: {
     filename: '[name].[chunkhash].js',
     // path.resolve(__dirname winds up relative to the config dir
     path: path.resolve(__dirname, '../../zuul/web/static'),
     publicPath: ''
   },
+  optimization: {
+    minimize: true
+  },
   plugins: [
-    new webpack.LoaderOptionsPlugin({
-      minimize: true,
-      debug: false
-    }),
-    new webpack.DefinePlugin({
-      'process.env': {
-        'NODE_ENV': JSON.stringify('production')
-      }
-    }),
+    new CleanWebpackPlugin(
+        ['zuul/web/static'], { root: path.resolve(__dirname, '../..')}),
     // Keeps the vendor bundle from changing needlessly.
     new webpack.HashedModuleIdsPlugin(),
-    new webpack.optimize.UglifyJsPlugin({
-      warningsFilter: function(filename) {
-        return ! /node_modules/.test(filename);
-      },
-      beautify: false,
-      mangle: {
-        screw_ie8: true,
-        keep_fnames: true
-      },
-      compress: {
-        screw_ie8: true
-      },
-      sourceMap: true,
-      comments: false
-    }),
     new ArchivePlugin({
       output: path.resolve(__dirname, '../../zuul-web'),
       format: [