Merge "Upgrade to webpack 4"

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",
+    "file-loader": "^1.1.11",
-    "html-webpack-plugin": "^2.29.0",
+    "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: {
+  entry: './web/main.js',
-    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'
-    ]
-  },
   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({
+    new CleanWebpackPlugin(
-      minimize: true,
+        ['zuul/web/static'], { root: path.resolve(__dirname, '../..')}),
-      debug: false
-    }),
-    new webpack.DefinePlugin({
-      'process.env': {
-        'NODE_ENV': JSON.stringify('production')
-      }
-    }),
     // 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: [