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

Signed-off-by: Roman <ixrock@gmail.com>
2025-05-20 05:10:56 +00:00 · 2022-01-20 14:29:03 +02:00 · 2022-01-20 14:29:03 +02:00 · f4f937dc92
commit f4f937dc92
parent 23c38b1f4e
5 changed files with 964 additions and 1581 deletions
--- a/package.json
+++ b/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-dev-server": "^3.11.6",
+    "@types/webpack": "^5.28.0",
+    "@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-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.3",
-    "webpack-node-externals": "^1.7.2",
+    "webpack": "^5.66.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.7.3",
+    "webpack-node-externals": "^3.0.0",
    "xterm": "^4.15.0",
    "xterm-addon-fit": "^0.5.0"
  }
--- a/webpack.extensions.ts
+++ b/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
-        // in src/renderer/components/dock/terminal.ts 95:25-65
-        {
-          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),
-                  ],
-                },
-              },
-            },
-          ],
-        },
+        fontsLoaderWebpackRule(),
+        filesAndIconsWebpackRule(),
+        cssModulesWebpackRule(), // import sass/css files and (s)css-modules
      ],
    },
    resolve: {
--- a/webpack.main.ts
+++ b/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({
--- a/webpack.renderer.ts
+++ b/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 [
-  webpackLensRenderer,
-];
-
-export function webpackLensRenderer({ showVars = true } = {}): webpack.Configuration {
-  if (showVars) {
-    console.info("WEBPACK:renderer", vars);
-  }
+export function webpackLensRenderer(): webpack.Configuration {
+  console.info("WEBPACK:renderer", vars);
+  const {
+    appName,
+    buildDir,
+    htmlTemplate,
+    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?$/),
-        {
-          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?)
-            },
-          },
-        },
-        {
-          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),
-                  ],
-                },
-              },
-            },
-          ],
-        },
+        filesAndIconsWebpackRule(), // svg-icons and plain text files
+        fontsLoaderWebpackRule(), // custom fonts
+        cssModulesWebpackRule(), // css-styles, sass & modules (*.css/*.scss)
      ],
    },

    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,
+];
--- a/yarn.lock
+++ b/yarn.lock