Upgrade webpack to v5 (#11173)

Upgrades webpack and other JS dependencies. This was primarily motivated
by GitHub reporting a vulnerability in Webpack (which shouldn't actually
effect our use of Webpack) and wanting to clean up some tech debt.

Note that equivalent functionality for url-loader and file-loader is now
included in webpack itself.

# Checklist for submitter

If some of the following don't apply, delete the relevant line.

- [x] Manual QA for all new/changed functionality

Makefile

@@ -155,7 +155,7 @@ generate-ci:
 	make generate-go
 
 generate-js: clean-assets .prefix
-	NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=production yarn run webpack --progress --colors
+	NODE_ENV=production yarn run webpack --progress
 
 generate-go: .prefix
 	go run github.com/kevinburke/go-bindata/go-bindata -pkg=bindata -tags full \
@@ -166,11 +166,11 @@ 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
-	NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=development yarn run webpack --progress --colors
+	NODE_ENV=development yarn run webpack --progress
 	go run github.com/kevinburke/go-bindata/go-bindata -debug -pkg=bindata -tags full \
 		-o=server/bindata/generated.go \
 		frontend/templates/ assets/... server/mail/templates
-	NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=development yarn run webpack --progress --colors --watch
+	NODE_ENV=development yarn run webpack --progress --watch
 
 generate-mock: .prefix
 	go install github.com/fleetdm/mockimpl@ecbb3041eabfc9e046a3f2e414e32c28254b75b2

frontend/components/LiveQuery/SelectTargets.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from "react";
 import { Row } from "react-table";
 import { useQuery } from "react-query";
-import { useDebouncedCallback } from "use-debounce/lib";
+import { useDebouncedCallback } from "use-debounce";
 
 import { AppContext } from "context/app";
 

frontend/services/mock_service/examples/responses.ts

@@ -25,7 +25,7 @@ const HOST_ID = {
     build: "",
     platform_like: "deb",
     code_name: "",
-    uptime: 13371337133713371337,
+    uptime: 1337133713371337,
     memory: 143593800000,
     cpu_type: "1337",
     cpu_subtype: "1337",

package.json

@@ -46,7 +46,7 @@
     "react-router": "3.2.6",
     "react-router-transition": "1.2.1",
     "react-select": "1.3.0",
-    "react-select-5": "npm:react-select@^5.4.0",
+    "react-select-5": "npm:react-select@5.4.0",
     "react-table": "7.7.0",
     "react-tabs": "3.2.3",
     "react-tooltip": "4.2.21",
@@ -54,7 +54,7 @@
     "select": "1.1.2",
     "sockjs-client": "1.6.1",
     "sqlite-parser": "1.0.1",
-    "use-debounce": "7.0.1",
+    "use-debounce": "9.0.4",
     "uuid": "8.3.2",
     "when": "3.7.8"
   },
@@ -161,8 +161,8 @@
     "@types/react-tooltip": "4.2.4",
     "@types/sockjs-client": "1.5.1",
     "@types/uuid": "8.3.4",
-    "@typescript-eslint/eslint-plugin": "4.33.0",
+    "@typescript-eslint/eslint-plugin": "5.58.0",
-    "@typescript-eslint/parser": "4.33.0",
+    "@typescript-eslint/parser": "5.58.0",
     "autoprefixer": "9.8.8",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "9.0.0",
@@ -170,7 +170,7 @@
     "babel-loader": "8.2.3",
     "bourbon": "5.1.0",
     "classnames": "2.2.5",
-    "css-loader": "1.0.1",
+    "css-loader": "6.7.3",
     "cypress": "9.5.1",
     "cypress-wait-until": "1.7.2",
     "esbuild-loader": "2.18.0",
@@ -186,9 +186,8 @@
     "eslint-plugin-react": "7.29.4",
     "eslint-plugin-react-hooks": "4.3.0",
     "expect": "1.20.2",
-    "file-loader": "4.3.0",
     "fork-ts-checker-webpack-plugin": "6.5.0",
-    "html-webpack-plugin": "4.5.2",
+    "html-webpack-plugin": "5.5.0",
     "identity-obj-proxy": "3.0.0",
     "ignore-styles": "5.0.1",
     "jest": "29.2.0",
@@ -196,7 +195,7 @@
     "jest-environment-jsdom-sixteen": "1.0.3",
     "jsdom": "16.7.0",
     "json-loader": "0.5.7",
-    "mini-css-extract-plugin": "0.7.0",
+    "mini-css-extract-plugin": "2.7.5",
     "msw": "0.47.4",
     "nock": "13.2.4",
     "node-bourbon": "4.2.8",
@@ -204,17 +203,15 @@
     "postcss-loader": "3.0.0",
     "prettier": "2.2.1",
     "regenerator-runtime": "0.13.9",
-    "sass-loader": "6.0.7",
+    "sass-loader": "13.2.2",
     "trace-unhandled": "2.0.1",
     "ts-loader": "6.2.2",
     "ts-node": "10.7.0",
     "tslint": "5.10.0",
-    "tslint-eslint-rules": "5.4.0",
     "tslint-react": "3.6.0",
     "typescript": "4.6.2",
-    "url-loader": "2.3.0",
+    "webpack": "5.78.0",
-    "webpack": "4.46.0",
+    "webpack-cli": "5.0.1",
-    "webpack-cli": "3.3.12",
     "webpack-notifier": "1.12.0"
   },
   "browserslist": [

webpack.config.js

@@ -33,13 +33,12 @@ if (process.env.NODE_ENV === "production") {
     }),
     new MiniCssExtractPlugin({
       filename: "bundle-[contenthash].css",
-      allChunks: false,
     }),
   ]);
 } else {
   // development
   plugins = plugins.concat([
-    new MiniCssExtractPlugin({ filename: "bundle.css", allChunks: false }),
+    new MiniCssExtractPlugin({ filename: "bundle.css" }),
   ]);
 }
 
@@ -66,19 +65,13 @@ const config = {
     noParse: /node_modules\/sqlite-parser\/dist\/sqlite-parser-min.js/,
     rules: [
       {
-        test: /\.(png|gif)$/,
+        test: /\.(pdf|png|gif|ico|jpg|svg|eot|otf|woff|woff2|ttf|mp4|webm)$/,
-        use: { loader: "url-loader?name=[name]@[hash].[ext]&limit=6000" },
+        type: "asset",
-      },
+        generator: {
-      {
+          filename: "[name]@[hash][ext]",
-        test: /\.(pdf|ico|jpg|svg|eot|otf|woff|woff2|ttf|mp4|webm)$/,
-        use: {
-          loader: "file-loader",
-          options: {
-            name: "[name]@[hash].[ext]",
-            useRelativePath: true,
-          },
         },
       },
+
       {
         test: /(\.tsx?|\.jsx?)$/,
         exclude: /node_modules/,
@@ -98,7 +91,6 @@ const config = {
             loader: MiniCssExtractPlugin.loader,
             options: {
               publicPath: "./",
-              hmr: process.env.NODE_ENV === "development",
             },
           },
           { loader: "css-loader" },
@@ -107,8 +99,10 @@ const config = {
             loader: "sass-loader",
             options: {
               sourceMap: true,
-              includePaths: [bourbon],
+              sassOptions: {
-              importer: globImporter(),
+                includePaths: bourbon,
+                importer: globImporter(),
+              },
             },
           },
         ],
@@ -118,9 +112,7 @@ const config = {
         use: [
           {
             loader: MiniCssExtractPlugin.loader,
-            options: {
+            options: {},
-              hmr: process.env.NODE_ENV === "development",
-            },
           },
           "css-loader",
           "postcss-loader",
@@ -140,7 +132,7 @@ const config = {
 };
 
 if (process.env.NODE_ENV === "production") {
-  config.output.filename = "[name]-[hash].js";
+  config.output.filename = "[name]-[contenthash].js";
 }
 
 module.exports = config;