debugging webpack@5 usage -- part 1

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

package.json

@@ -383,7 +383,7 @@
     "type-fest": "^1.0.2",
     "typed-emitter": "^1.4.0",
     "typedoc": "0.22.10",
-    "typedoc-plugin-markdown": "^3.11.3",
+    "typedoc-plugin-markdown": "^3.11.12",
     "typeface-roboto": "^1.1.13",
     "typescript": "^4.5.2",
     "typescript-plugin-css-modules": "^3.4.0",

src/main/router.ts

@@ -9,7 +9,7 @@ import type http from "http";
 import path from "path";
 import { readFile } from "fs-extra";
 import type { Cluster } from "../common/cluster/cluster";
-import { apiPrefix, appName, publicPath, isDevelopment, webpackDevServerPort } from "../common/vars";
+import { apiPrefix, appName, publicPath } from "../common/vars";
 import { HelmApiRoute, KubeconfigRoute, MetricsRoute, PortForwardRoute, ResourceApplierApiRoute, VersionRoute } from "./routes";
 import logger from "./logger";
 
@@ -110,7 +110,7 @@ export class Router {
     };
   }
 
-  protected static async handleStaticFile({ params, response, raw: { req }}: LensApiRequest): Promise<void> {
+  protected static async handleStaticFile({ params, response }: LensApiRequest): Promise<void> {
     let filePath = params.path;
 
     for (let retryCount = 0; retryCount < 5; retryCount += 1) {
@@ -124,18 +124,20 @@ export class Router {
       }
 
       try {
-        const filename = path.basename(req.url);
+        // const filename = path.basename(req.url);
         // redirect requests to [appName].js, [appName].html /sockjs-node/ to webpack-dev-server (for hot-reload support)
-        const toWebpackDevServer = filename.includes(appName) || filename.includes("hot-update") || req.url.includes("sockjs-node");
+        // const toWebpackDevServer = filename.includes(appName) || filename.includes("hot-update") || req.url.includes("sockjs-node");
-
+        //
-        if (isDevelopment && toWebpackDevServer) {
+        // if (isDevelopment /*&& toWebpackDevServer*/) {
-          const redirectLocation = `http://localhost:${webpackDevServerPort}${req.url}`;
+        //   const redirectLocation = `http://0.0.0.0:${webpackDevServerPort}${req.url}`;
-
+        //
-          response.statusCode = 307;
+        //   logger.info(`[ROUTER]: redirecting to dev-server url: ${redirectLocation}`);
-          response.setHeader("Location", redirectLocation);
+        //
-
+        //   response.statusCode = 307;
-          return response.end();
+        //   response.setHeader("Location", redirectLocation);
-        }
+        //
+        //   return response.end();
+        // }
 
         const data = await readFile(asset);
 

webpack.extensions.ts

@@ -56,7 +56,7 @@ export default function generateExtensionTypes(): webpack.Configuration {
         },
         fontsLoaderWebpackRule(),
         filesAndIconsWebpackRule(),
-        cssModulesWebpackRule(), // import sass/css files and (s)css-modules
+        cssModulesWebpackRule({ styleLoader: "style-loader" }),
       ],
     },
     resolve: {

webpack.renderer.ts

@@ -34,11 +34,14 @@ export function webpackLensRenderer(): webpack.Configuration {
     // @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: {
-      headers: { "Access-Control-Allow-Origin": "*" },
+      headers: {
-      host: "local-ip",
+        "Access-Control-Allow-Origin": "*",
+      },
+      host: "0.0.0.0",
       allowedHosts: "all",
       port: webpackDevServerPort,
-      hot: isDevelopment ? "only" : false,
+      static: buildDir, // aka `devServer.contentBase` in webpack@4
+      hot: true,
       historyApiFallback: true,
       client: {
         logging: isDevelopment ? "verbose" : "error",
@@ -85,9 +88,9 @@ export function webpackLensRenderer(): webpack.Configuration {
           use: "node-loader",
         },
         getTSLoader(/\.tsx?$/),
-        filesAndIconsWebpackRule(), // svg-icons and plain text files
+        filesAndIconsWebpackRule(),
-        fontsLoaderWebpackRule(), // custom fonts
+        fontsLoaderWebpackRule(),
-        cssModulesWebpackRule(), // css-styles, sass & modules (*.css/*.scss)
+        cssModulesWebpackRule(),
       ],
     },
 
@@ -123,6 +126,9 @@ export function webpackLensRenderer(): webpack.Configuration {
   };
 }
 
+/**
+ * Import content of svg-icons, images and text files
+ */
 export function filesAndIconsWebpackRule(): webpack.RuleSetRule {
   return {
     test: /\.(jpg|png|svg|map|ico)$/,
@@ -136,6 +142,9 @@ export function filesAndIconsWebpackRule(): webpack.RuleSetRule {
   };
 }
 
+/**
+ * Import custom fonts as URL
+ */
 export function fontsLoaderWebpackRule(): webpack.RuleSetRule {
   return {
     test: /\.(ttf|eot|woff2?)$/,
@@ -148,13 +157,20 @@ export function fontsLoaderWebpackRule(): webpack.RuleSetRule {
   };
 }
 
-export function cssModulesWebpackRule(styleLoader?: string): webpack.RuleSetRule {
+/**
+ * Import CSS or SASS styles with modules support (*.module.scss)
+ * @param {string} styleLoader
+ */
+export function cssModulesWebpackRule(
+  {
+    styleLoader = vars.isDevelopment ? "style-loader" : MiniCssExtractPlugin.loader,
+  } = {}): webpack.RuleSetRule {
   const { isDevelopment, sassCommonVars } = vars;
 
   return {
     test: /\.s?css$/,
     use: [
-      styleLoader ?? (isDevelopment ? "style-loader" : MiniCssExtractPlugin.loader),
+      styleLoader,
       {
         loader: "css-loader",
         options: {

yarn.lock

@@ -13269,10 +13269,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typedoc-plugin-markdown@^3.11.3:
+typedoc-plugin-markdown@^3.11.12:
-  version "3.11.3"
+  version "3.11.12"
-  resolved "https://registry.yarnpkg.com/typedoc-plugin-markdown/-/typedoc-plugin-markdown-3.11.3.tgz#be340b905903f1ce552fa2fa7d677db408ab1041"
+  resolved "https://registry.yarnpkg.com/typedoc-plugin-markdown/-/typedoc-plugin-markdown-3.11.12.tgz#04f4740534d19728696a5c0ccc35f319bcb93b31"
-  integrity sha512-rWiHbEIe0oZetDIsBR24XJVxGOJ91kDcHoj2KhFKxCLoJGX659EKBQkHne9QJ4W2stGhu1fRgFyQaouSBnxukA==
+  integrity sha512-gb/RuzgZ1zCnRUOqUg6firIqU7xDs9s7hq0vlU/gAsFfVCnpl3NTM9vPyPON75nnpfVFCxr/hmKQ01k1CYY/Qg==
   dependencies:
     handlebars "^4.7.7"