attempt to upgrade webpack@5 and all relevant packages to latest version -- part 1

Signed-off-by: Roman <ixrock@gmail.com>

package.json

@@ -269,7 +269,7 @@
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
     "@sentry/types": "^6.14.1",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^11.2.7",
@@ -292,12 +292,11 @@
     "@types/lodash": "^4.14.177",
     "@types/marked": "^4.0.1",
     "@types/md5-file": "^4.0.2",
-    "@types/mini-css-extract-plugin": "^0.9.1",
+    "@types/mini-css-extract-plugin": "^2.4.0",
     "@types/mock-fs": "^4.13.1",
     "@types/node": "14.17.33",
     "@types/node-fetch": "^2.5.12",
     "@types/npm": "^2.0.32",
-    "@types/progress-bar-webpack-plugin": "^2.1.2",
     "@types/proper-lockfile": "^4.1.2",
     "@types/randomcolor": "^0.5.6",
     "@types/react": "^17.0.34",
@@ -320,10 +319,10 @@
     "@types/triple-beam": "^1.3.2",
     "@types/url-parse": "^1.4.5",
     "@types/uuid": "^8.3.3",
-    "@types/webpack": "^4.41.32",
+    "@types/webpack": "^5.28.0",
-    "@types/webpack-dev-server": "^3.11.6",
+    "@types/webpack-dev-server": "^4.7.2",
     "@types/webpack-env": "^1.16.3",
-    "@types/webpack-node-externals": "^1.7.1",
+    "@types/webpack-node-externals": "^2.5.3",
     "@typescript-eslint/eslint-plugin": "^5.7.0",
     "@typescript-eslint/parser": "^5.7.0",
     "ansi_up": "^5.1.0",
@@ -348,23 +347,22 @@
     "eslint-plugin-unused-imports": "^1.1.5",
     "file-loader": "^6.2.0",
     "flex.box": "^3.4.4",
-    "fork-ts-checker-webpack-plugin": "^5.2.1",
+    "fork-ts-checker-webpack-plugin": "^6.5.0",
     "hoist-non-react-statics": "^3.3.2",
-    "html-webpack-plugin": "^4.5.2",
+    "html-webpack-plugin": "^5.5.0",
     "include-media": "^1.4.9",
     "jest": "26.6.3",
     "jest-canvas-mock": "^2.3.1",
     "jest-fetch-mock": "^3.0.3",
     "jest-mock-extended": "^1.0.18",
     "make-plural": "^6.2.2",
-    "mini-css-extract-plugin": "^1.6.2",
+    "mini-css-extract-plugin": "^2.5.2",
     "node-gyp": "7.1.2",
     "node-loader": "^1.0.3",
     "nodemon": "^2.0.14",
     "playwright": "^1.17.1",
     "postcss": "^8.4.5",
     "postcss-loader": "^4.3.0",
-    "progress-bar-webpack-plugin": "^2.1.0",
     "randomcolor": "^0.6.2",
     "raw-loader": "^4.0.2",
     "react-beautiful-dnd": "^13.1.0",
@@ -390,10 +388,10 @@
     "typescript": "^4.5.2",
     "typescript-plugin-css-modules": "^3.4.0",
     "url-loader": "^4.1.1",
-    "webpack": "^4.46.0",
+    "webpack": "^5.66.0",
-    "webpack-cli": "^3.3.12",
+    "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^3.11.3",
+    "webpack-dev-server": "^4.7.3",
-    "webpack-node-externals": "^1.7.2",
+    "webpack-node-externals": "^3.0.0",
     "xterm": "^4.15.0",
     "xterm-addon-fit": "^0.5.0"
   }

webpack.extensions.ts

@@ -6,9 +6,15 @@
 
 import path from "path";
 import type webpack from "webpack";
-import { sassCommonVars, isDevelopment, isProduction } from "./src/common/vars";
+import * as vars from "./src/common/vars";
+import {
+  cssModulesWebpackRule,
+  filesAndIconsWebpackRule,
+  fontsLoaderWebpackRule,
+} from "./webpack.renderer";
 
 export default function generateExtensionTypes(): webpack.Configuration {
+  const { isDevelopment, isProduction } = vars;
   const entry = "./src/extensions/extension-api.ts";
   const outDir = "./src/extensions/npm/extensions/dist";
 
@@ -48,47 +54,9 @@ export default function generateExtensionTypes(): webpack.Configuration {
             },
           },
         },
-        // for src/renderer/components/fonts/roboto-mono-nerd.ttf
+        fontsLoaderWebpackRule(),
-        // in src/renderer/components/dock/terminal.ts 95:25-65
+        filesAndIconsWebpackRule(),
-        {
+        cssModulesWebpackRule(), // import sass/css files and (s)css-modules
-          test: /\.(ttf|eot|woff2?)$/,
-          use: {
-            loader: "url-loader",
-            options: {
-              name: "fonts/[name].[ext]",
-            },
-          },
-        },
-        {
-          test: /\.(jpg|png|svg|map|ico)$/,
-          use: {
-            loader: "file-loader",
-            options: {
-              name: "images/[name]-[hash:6].[ext]",
-              esModule: false, // handle media imports in <template>, e.g <img src="../assets/logo.svg"> (react)
-            },
-          },
-        },
-        // for import scss files
-        {
-          test: /\.s?css$/,
-          use: [
-            "style-loader",
-            "css-loader",
-            "postcss-loader",
-            {
-              loader: "sass-loader",
-              options: {
-                additionalData: `@import "${path.basename(sassCommonVars)}";`,
-                sassOptions: {
-                  includePaths: [
-                    path.dirname(sassCommonVars),
-                  ],
-                },
-              },
-            },
-          ],
-        },
       ],
     },
     resolve: {

webpack.main.ts

@@ -6,9 +6,7 @@
 import path from "path";
 import type webpack from "webpack";
 import ForkTsCheckerPlugin from "fork-ts-checker-webpack-plugin";
-import { isProduction, mainDir, buildDir, isDevelopment } from "./src/common/vars";
 import nodeExternals from "webpack-node-externals";
-import ProgressBarPlugin from "progress-bar-webpack-plugin";
 import * as vars from "./src/common/vars";
 import getTSLoader from "./src/common/getTSLoader";
 import CircularDependencyPlugin from "circular-dependency-plugin";
@@ -17,12 +15,13 @@ const configs: { (): webpack.Configuration }[] = [];
 
 configs.push((): webpack.Configuration => {
   console.info("WEBPACK:main", vars);
+  const { isProduction, mainDir, buildDir, isDevelopment } = vars;
 
   return {
     context: __dirname,
     target: "electron-main",
     mode: isProduction ? "production" : "development",
-    devtool: isProduction ? "source-map" : "cheap-eval-source-map",
+    devtool: isDevelopment ? "hidden-source-map" : "source-map",
     cache: isDevelopment,
     entry: {
       main: path.resolve(mainDir, "index.ts"),
@@ -47,7 +46,6 @@ configs.push((): webpack.Configuration => {
       ],
     },
     plugins: [
-      new ProgressBarPlugin(),
       new ForkTsCheckerPlugin(),
 
       new CircularDependencyPlugin({

webpack.renderer.ts

@@ -4,39 +4,47 @@
  */
 
 import * as vars from "./src/common/vars";
-import { appName, buildDir, htmlTemplate, isDevelopment, isProduction, publicPath, rendererDir, sassCommonVars, webpackDevServerPort } from "./src/common/vars";
 import path from "path";
-import webpack from "webpack";
+import type webpack from "webpack";
 import HtmlWebpackPlugin from "html-webpack-plugin";
 import MiniCssExtractPlugin from "mini-css-extract-plugin";
 import ForkTsCheckerPlugin from "fork-ts-checker-webpack-plugin";
-import ProgressBarPlugin from "progress-bar-webpack-plugin";
 import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
 import MonacoWebpackPlugin from "monaco-editor-webpack-plugin";
 import getTSLoader from "./src/common/getTSLoader";
 import CircularDependencyPlugin from "circular-dependency-plugin";
 
-export default [
+export function webpackLensRenderer(): webpack.Configuration {
-  webpackLensRenderer,
+  console.info("WEBPACK:renderer", vars);
-];
+  const {
-
+    appName,
-export function webpackLensRenderer({ showVars = true } = {}): webpack.Configuration {
+    buildDir,
-  if (showVars) {
+    htmlTemplate,
-    console.info("WEBPACK:renderer", vars);
+    isDevelopment,
-  }
+    isProduction,
+    publicPath,
+    rendererDir,
+    webpackDevServerPort,
+  } = vars;
 
   return {
     context: __dirname,
     target: "electron-renderer",
-    devtool: isDevelopment ? "cheap-source-map" : "source-map",
+    devtool: isDevelopment ? "eval-source-map" : "source-map",
+    // @ts-ignore: seems like types from "webpack-dev-server@4.7" not properly merged with "webpack@5"
+    // API: https://webpack.js.org/configuration/dev-server/#usage-via-api
     devServer: {
-      contentBase: buildDir,
-      port: webpackDevServerPort,
-      host: "localhost",
-      hot: true,
-      // to avoid cors errors when requests is from iframes
-      disableHostCheck: true,
       headers: { "Access-Control-Allow-Origin": "*" },
+      host: "local-ip",
+      allowedHosts: "all",
+      port: webpackDevServerPort,
+      hot: isDevelopment ? "only" : false,
+      historyApiFallback: true,
+      client: {
+        logging: isDevelopment ? "verbose" : "error",
+        overlay: false,
+        progress: true,
+      },
     },
     name: "lens-app",
     mode: isProduction ? "production" : "development",
@@ -46,7 +54,6 @@ export function webpackLensRenderer({ showVars = true } = {}): webpack.Configura
     },
     output: {
       libraryTarget: "global",
-      library: "",
       globalObject: "this",
       publicPath,
       path: buildDir,
@@ -78,70 +85,13 @@ export function webpackLensRenderer({ showVars = true } = {}): webpack.Configura
           use: "node-loader",
         },
         getTSLoader(/\.tsx?$/),
-        {
+        filesAndIconsWebpackRule(), // svg-icons and plain text files
-          test: /\.(jpg|png|svg|map|ico)$/,
+        fontsLoaderWebpackRule(), // custom fonts
-          use: {
+        cssModulesWebpackRule(), // css-styles, sass & modules (*.css/*.scss)
-            loader: "file-loader",
-            options: {
-              name: "images/[name]-[hash:6].[ext]",
-              esModule: false, // handle media imports in <template>, e.g <img src="../assets/logo.svg"> (vue/react?)
-            },
-          },
-        },
-        {
-          test: /\.(ttf|eot|woff2?)$/,
-          use: {
-            loader: "url-loader",
-            options: {
-              name: "fonts/[name].[ext]",
-            },
-          },
-        },
-        {
-          test: /\.s?css$/,
-          use: [
-            isDevelopment ? "style-loader" : MiniCssExtractPlugin.loader,
-            {
-              loader: "css-loader",
-              options: {
-                sourceMap: isDevelopment,
-                modules: {
-                  auto: /\.module\./i, // https://github.com/webpack-contrib/css-loader#auto
-                  mode: "local", // :local(.selector) by default
-                  localIdentName: "[name]__[local]--[hash:base64:5]",
-                },
-              },
-            },
-            {
-              loader: "postcss-loader",
-              options: {
-                sourceMap: isDevelopment,
-                postcssOptions: {
-                  plugins: [
-                    "tailwindcss",
-                  ],
-                },
-              },
-            },
-            {
-              loader: "sass-loader",
-              options: {
-                sourceMap: isDevelopment,
-                additionalData: `@import "${path.basename(sassCommonVars)}";`,
-                sassOptions: {
-                  includePaths: [
-                    path.dirname(sassCommonVars),
-                  ],
-                },
-              },
-            },
-          ],
-        },
       ],
     },
 
     plugins: [
-      new ProgressBarPlugin(),
       new ForkTsCheckerPlugin(),
 
       // see also: https://github.com/Microsoft/monaco-editor-webpack-plugin#options
@@ -168,8 +118,81 @@ export function webpackLensRenderer({ showVars = true } = {}): webpack.Configura
         filename: "[name].css",
       }),
 
-      isDevelopment && new webpack.HotModuleReplacementPlugin(),
       isDevelopment && new ReactRefreshWebpackPlugin(),
     ].filter(Boolean),
   };
 }
+
+export function filesAndIconsWebpackRule(): webpack.RuleSetRule {
+  return {
+    test: /\.(jpg|png|svg|map|ico)$/,
+    use: {
+      loader: "file-loader",
+      options: {
+        name: "images/[name]-[hash:6].[ext]",
+        esModule: false, // handle media imports in <template>, e.g <img src="../assets/logo.svg"> (vue/react?)
+      },
+    },
+  };
+}
+
+export function fontsLoaderWebpackRule(): webpack.RuleSetRule {
+  return {
+    test: /\.(ttf|eot|woff2?)$/,
+    use: {
+      loader: "url-loader",
+      options: {
+        name: "fonts/[name].[ext]",
+      },
+    },
+  };
+}
+
+export function cssModulesWebpackRule(styleLoader?: string): webpack.RuleSetRule {
+  const { isDevelopment, sassCommonVars } = vars;
+
+  return {
+    test: /\.s?css$/,
+    use: [
+      styleLoader ?? (isDevelopment ? "style-loader" : MiniCssExtractPlugin.loader),
+      {
+        loader: "css-loader",
+        options: {
+          sourceMap: isDevelopment,
+          modules: {
+            auto: /\.module\./i, // https://github.com/webpack-contrib/css-loader#auto
+            mode: "local", // :local(.selector) by default
+            localIdentName: "[name]__[local]--[hash:base64:5]",
+          },
+        },
+      },
+      {
+        loader: "postcss-loader",
+        options: {
+          sourceMap: isDevelopment,
+          postcssOptions: {
+            plugins: [
+              "tailwindcss",
+            ],
+          },
+        },
+      },
+      {
+        loader: "sass-loader",
+        options: {
+          sourceMap: isDevelopment,
+          additionalData: `@import "${path.basename(sassCommonVars)}";`,
+          sassOptions: {
+            includePaths: [
+              path.dirname(sassCommonVars),
+            ],
+          },
+        },
+      },
+    ],
+  };
+}
+
+export default [
+  webpackLensRenderer,
+];