From ab7781fdcdc1f8cfd8f4c88ff6cd0d5b73a5ae4e Mon Sep 17 00:00:00 2001 From: Roman Date: Sat, 22 Jan 2022 12:50:48 +0200 Subject: [PATCH] debugging webpack@5 usage -- part 1 Signed-off-by: Roman --- package.json | 2 +- src/main/router.ts | 28 +++++++++++++++------------- webpack.extensions.ts | 2 +- webpack.renderer.ts | 32 ++++++++++++++++++++++++-------- yarn.lock | 8 ++++---- 5 files changed, 45 insertions(+), 27 deletions(-) diff --git a/package.json b/package.json index e23d50d938..043a46c0f4 100644 --- a/package.json +++ b/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", diff --git a/src/main/router.ts b/src/main/router.ts index 25328fb540..27243fa09d 100644 --- a/src/main/router.ts +++ b/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 { + protected static async handleStaticFile({ params, response }: LensApiRequest): Promise { 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"); - - if (isDevelopment && toWebpackDevServer) { - const redirectLocation = `http://localhost:${webpackDevServerPort}${req.url}`; - - response.statusCode = 307; - response.setHeader("Location", redirectLocation); - - return response.end(); - } + // const toWebpackDevServer = filename.includes(appName) || filename.includes("hot-update") || req.url.includes("sockjs-node"); + // + // if (isDevelopment /*&& toWebpackDevServer*/) { + // const redirectLocation = `http://0.0.0.0:${webpackDevServerPort}${req.url}`; + // + // logger.info(`[ROUTER]: redirecting to dev-server url: ${redirectLocation}`); + // + // response.statusCode = 307; + // response.setHeader("Location", redirectLocation); + // + // return response.end(); + // } const data = await readFile(asset); diff --git a/webpack.extensions.ts b/webpack.extensions.ts index 9db216d181..974a2ef559 100644 --- a/webpack.extensions.ts +++ b/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: { diff --git a/webpack.renderer.ts b/webpack.renderer.ts index d11dc7d1f2..16d0cd1179 100755 --- a/webpack.renderer.ts +++ b/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": "*" }, - host: "local-ip", + headers: { + "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 - fontsLoaderWebpackRule(), // custom fonts - cssModulesWebpackRule(), // css-styles, sass & modules (*.css/*.scss) + filesAndIconsWebpackRule(), + fontsLoaderWebpackRule(), + 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: { diff --git a/yarn.lock b/yarn.lock index fea644a80e..7c44755ed2 100644 --- a/yarn.lock +++ b/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: - version "3.11.3" - resolved "https://registry.yarnpkg.com/typedoc-plugin-markdown/-/typedoc-plugin-markdown-3.11.3.tgz#be340b905903f1ce552fa2fa7d677db408ab1041" - integrity sha512-rWiHbEIe0oZetDIsBR24XJVxGOJ91kDcHoj2KhFKxCLoJGX659EKBQkHne9QJ4W2stGhu1fRgFyQaouSBnxukA== +typedoc-plugin-markdown@^3.11.12: + version "3.11.12" + resolved "https://registry.yarnpkg.com/typedoc-plugin-markdown/-/typedoc-plugin-markdown-3.11.12.tgz#04f4740534d19728696a5c0ccc35f319bcb93b31" + integrity sha512-gb/RuzgZ1zCnRUOqUg6firIqU7xDs9s7hq0vlU/gAsFfVCnpl3NTM9vPyPON75nnpfVFCxr/hmKQ01k1CYY/Qg== dependencies: handlebars "^4.7.7"