hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

debugging webpack@5 usage -- part 1

Browse Source 
Signed-off-by: Roman <ixrock@gmail.com>
This commit is contained in:
Roman 2022-01-22 12:50:48 +02:00
parent f4f937dc92
commit ab7781fdcd
5 changed files with 45 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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",

28
src/main/router.ts
View File

@ -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");
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);

2
webpack.extensions.ts
View File

@ -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: {

32
webpack.renderer.ts
View File

@ -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: {

8
yarn.lock
View File

@ -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"