Upgrade to Webpack 4 (#2079)

Makefile

@@ -157,12 +157,12 @@ generate-go: .prefix
 # output bundle file. then, generate debug bindata source file. finally, we
 # run webpack in watch mode to continuously re-generate the bundle
 generate-dev: .prefix
-	webpack --progress --colors
+	NODE_ENV=development webpack --progress --colors
 	go-bindata -debug -pkg=service \
 		-o=server/service/bindata.go \
 		frontend/templates/ assets/...
 	go-bindata -pkg=kolide -o=server/kolide/bindata.go server/mail/templates
-	webpack --progress --colors --watch
+	NODE_ENV=development webpack --progress --colors --watch
 
 deps: deps-js deps-go
 

frontend/osquery_tables.json

@@ -5130,4 +5130,3 @@
 "events": [
 ]
 }
-

package.json

@@ -92,27 +92,28 @@
     "eslint-plugin-jsx-a11y": "2.2.3",
     "eslint-plugin-react": "6.10.3",
     "expose-loader": "0.7.5",
-    "extract-text-webpack-plugin": "3.0.2",
-    "file-loader": "0.11.2",
-    "html-webpack-plugin": "2.30.1",
+    "file-loader": "^4.1.0",
+    "html-webpack-plugin": "^3.2.0",
     "ignore-styles": "5.0.1",
     "json-loader": "0.5.7",
+    "mini-css-extract-plugin": "^0.7.0",
     "mocha": "3.5.3",
     "raw-loader": "0.5.1",
     "sass-lint": "1.12.1",
     "sass-loader": "6.0.7",
     "source-map-loader": "0.2.3",
     "style-loader": "0.21.0",
-    "ts-loader": "0.9.5",
+    "ts-loader": "^6.0.4",
     "ts-node": "1.7.3",
     "tslint": "5.10.0",
-    "tslint-eslint-rules": "5.3.1",
+    "tslint-eslint-rules": "^5.4.0",
     "tslint-react": "3.6.0",
-    "typescript": "2.3.4",
+    "typescript": "^3.5.3",
     "typescript-require": "0.2.10",
-    "url-loader": "0.6.2",
-    "webpack": "^3.12.0",
-    "webpack-dev-middleware": "1.12.2",
+    "url-loader": "^2.1.0",
+    "webpack": "^4.37.0",
+    "webpack-cli": "^3.3.6",
+    "webpack-dev-middleware": "^3.7.0",
     "webpack-hot-middleware": "2.22.2",
     "webpack-notifier": "1.6.0"
   },

tslint.json

@@ -1,5 +1,5 @@
 {
-  "extends": ["tslint:recommended", "tslint-react"],
+  "extends": ["tslint:recommended", "tslint-react", "tslint-eslint-rules"],
   "rules": {
     "member-access": false,
     "no-var-requires": false,

webpack.config.js

@@ -1,11 +1,11 @@
 require('es6-promise').polyfill();
 
-var path = require('path');
-var webpack = require('webpack');
-var ExtractTextPlugin = require("extract-text-webpack-plugin");
-var bourbon = require('node-bourbon').includePaths;
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-var WebpackNotifierPlugin = require('webpack-notifier');
+const path = require('path');
+const webpack = require('webpack');
+const bourbon = require('node-bourbon').includePaths;
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const WebpackNotifierPlugin = require('webpack-notifier');
 
 var plugins = [
   new webpack.NoEmitOnErrorsPlugin(),
@@ -23,24 +23,21 @@ var plugins = [
 
 if (process.env.NODE_ENV === 'production') {
   plugins = plugins.concat([
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {warnings: false},
-      output: {comments: false}
-    }),
     new webpack.DefinePlugin({
       'process.env': {NODE_ENV: JSON.stringify('production')}
     }),
-    new ExtractTextPlugin({ filename: 'bundle-[contenthash].css', allChunks: false })
+    new MiniCssExtractPlugin({ filename: 'bundle-[contenthash].css', allChunks: false })
   ]);
 } else {
   plugins = plugins.concat([
-    new ExtractTextPlugin({ filename: 'bundle.css', allChunks: false })
+    new MiniCssExtractPlugin({ filename: 'bundle.css', allChunks: false })
   ]);
 }
 
 var repo = __dirname
 
 var config  = {
+  mode: process.env.NODE_ENV,
   entry: {
     bundle: path.join(repo, 'frontend/index.jsx')
   },
@@ -50,6 +47,9 @@ var config  = {
     filename: '[name].js'
   },
   plugins: plugins,
+  optimization: {
+    minimize: process.env.NODE_ENV == 'production',
+  },
   module: {
     // The following noParse suppresses the warning about sqlite-parser being a
     // pre-compiled JS file. See https://goo.gl/N4s6bB.
@@ -57,12 +57,17 @@ var config  = {
     rules: [
       { test: /\.(png|gif)$/, use: { loader: 'url-loader?name=[name]@[hash].[ext]&limit=6000' } },
       { test: /\.(pdf|ico|jpg|svg|eot|otf|woff|ttf|mp4|webm)$/, use: { loader: 'file-loader?name=[name]@[hash].[ext]' } },
-      { test: /\.json$/, use: { loader: 'raw-loader' } },
       { test: /\.tsx?$/, exclude: /node_modules/, use: { loader: 'ts-loader' } },
       {
         test: /\.scss$/,
         exclude: /node_modules/,
-        use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              hmr: process.env.NODE_ENV == 'development',
+            },
+          },
           { loader: 'css-loader' },
           { loader: 'postcss-loader' },
           {
@@ -73,11 +78,20 @@ var config  = {
             }
           },
           { loader: 'import-glob-loader' }
-        ]})
+        ],
       },
       {
         test: /\.css$/,
-        use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'postcss-loader'] })
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              hmr: process.env.NODE_ENV == 'development',
+            },
+          },
+          'css-loader',
+          'postcss-loader'
+        ],
       },
       {
         test: /\.jsx?$/,