mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Set core webpack dependencies as externals (#7094)
* core webpack dependencies as externals Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * use fork-ts-checker-webpack-plugin Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> --------- Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
This commit is contained in:
Jari Kolehmainen authored and 
GitHub committed
1 parent
6d2efb99e7
commit
5002b450fd
7 files changed
+116
-514
No files matched your search
@@ -0,0 +1,37 @@
|
||||
/**
|
||||
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
|
||||
import type webpack from "webpack";
|
||||
import path from "path";
|
||||
import ForkTsCheckerPlugin from "fork-ts-checker-webpack-plugin";
|
||||
import webpackLensMain from "./main";
|
||||
import { buildDir } from "./vars";
|
||||
|
||||
const webpackLensCommon = (): webpack.Configuration => {
|
||||
const mainConfig = webpackLensMain();
|
||||
|
||||
return {
|
||||
...mainConfig,
|
||||
name: "lens-app-common",
|
||||
entry: {
|
||||
common: path.resolve(__dirname, "..", "src", "common", "library.ts"),
|
||||
},
|
||||
output: {
|
||||
publicPath: "",
|
||||
library: {
|
||||
type: "commonjs2",
|
||||
},
|
||||
path: path.resolve(buildDir, "library"),
|
||||
},
|
||||
optimization: {
|
||||
minimize: false,
|
||||
},
|
||||
plugins: [
|
||||
new ForkTsCheckerPlugin({}),
|
||||
],
|
||||
};
|
||||
};
|
||||
|
||||
export default webpackLensCommon;
|
||||
@@ -2,118 +2,15 @@
|
||||
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
import MiniCssExtractPlugin from "mini-css-extract-plugin";
|
||||
import { platform } from "os";
|
||||
import path from "path";
|
||||
import { DefinePlugin, optimize } from "webpack";
|
||||
import main from "./main";
|
||||
import renderer, { iconsAndImagesWebpackRules } from "./renderer";
|
||||
import { buildDir, isDevelopment } from "./vars";
|
||||
|
||||
const rendererConfig = renderer({ showVars: false });
|
||||
const mainConfig = main();
|
||||
import webpackLensCommon from "./common";
|
||||
import webpackLensMain from "./main";
|
||||
import { webpackLensRenderer } from "./renderer";
|
||||
|
||||
const config = [
|
||||
{
|
||||
...mainConfig,
|
||||
entry: {
|
||||
main: path.resolve(__dirname, "..", "src", "main", "library.ts"),
|
||||
},
|
||||
output: {
|
||||
library: {
|
||||
type: "commonjs2",
|
||||
},
|
||||
path: path.resolve(buildDir, "library"),
|
||||
},
|
||||
optimization: {
|
||||
minimize: false,
|
||||
},
|
||||
module: {
|
||||
parser: {
|
||||
javascript: {
|
||||
commonjsMagicComments: true,
|
||||
},
|
||||
},
|
||||
rules: [
|
||||
{
|
||||
test: /\.node$/,
|
||||
use: "node-loader",
|
||||
},
|
||||
{
|
||||
test: /\.ts$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: "ts-loader",
|
||||
options: {
|
||||
compilerOptions: {
|
||||
declaration: true,
|
||||
sourceMap: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
...iconsAndImagesWebpackRules(),
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new DefinePlugin({
|
||||
CONTEXT_MATCHER_FOR_NON_FEATURES: `/\\.injectable(\\.${platform})?\\.tsx?$/`,
|
||||
CONTEXT_MATCHER_FOR_FEATURES: `/\\/(main|common)\\/.+\\.injectable(\\.${platform})?\\.tsx?$/`,
|
||||
}),
|
||||
],
|
||||
},
|
||||
{
|
||||
...mainConfig,
|
||||
name: "lens-app-common",
|
||||
entry: {
|
||||
common: path.resolve(__dirname, "..", "src", "common", "library.ts"),
|
||||
},
|
||||
output: {
|
||||
publicPath: "",
|
||||
library: {
|
||||
type: "commonjs2",
|
||||
},
|
||||
path: path.resolve(buildDir, "library"),
|
||||
},
|
||||
optimization: {
|
||||
minimize: false,
|
||||
},
|
||||
plugins: [],
|
||||
},
|
||||
{
|
||||
...rendererConfig,
|
||||
entry: {
|
||||
renderer: path.resolve(__dirname, "..", "src", "renderer", "library.ts"),
|
||||
},
|
||||
output: {
|
||||
library: {
|
||||
type: "commonjs2",
|
||||
},
|
||||
path: path.resolve(buildDir, "library"),
|
||||
},
|
||||
optimization: {
|
||||
minimize: false,
|
||||
},
|
||||
externals: [
|
||||
...(rendererConfig.externals as any).filter(Boolean),
|
||||
{
|
||||
"monaco-editor": "commonjs monaco-editor",
|
||||
},
|
||||
],
|
||||
plugins: [
|
||||
new DefinePlugin({
|
||||
CONTEXT_MATCHER_FOR_NON_FEATURES: `/\\.injectable(\\.${platform})?\\.tsx?$/`,
|
||||
CONTEXT_MATCHER_FOR_FEATURES: `/\\/(renderer|common)\\/.+\\.injectable(\\.${platform})?\\.tsx?$/`,
|
||||
}),
|
||||
new MiniCssExtractPlugin({
|
||||
filename: "[name].css",
|
||||
runtime: isDevelopment,
|
||||
}),
|
||||
new optimize.LimitChunkCountPlugin({
|
||||
maxChunks: 1,
|
||||
}),
|
||||
],
|
||||
},
|
||||
webpackLensMain(),
|
||||
webpackLensRenderer(),
|
||||
webpackLensCommon(),
|
||||
];
|
||||
|
||||
export default config;
|
||||
@@ -5,25 +5,14 @@
|
||||
|
||||
import path from "path";
|
||||
import type webpack from "webpack";
|
||||
import ForkTsCheckerPlugin from "fork-ts-checker-webpack-plugin";
|
||||
import nodeExternals from "webpack-node-externals";
|
||||
import { getTypescriptLoader } from "./get-typescript-loader";
|
||||
import CircularDependencyPlugin from "circular-dependency-plugin";
|
||||
import ForkTsCheckerPlugin from "fork-ts-checker-webpack-plugin";
|
||||
import { iconsAndImagesWebpackRules } from "./renderer";
|
||||
import type { WebpackPluginInstance } from "webpack";
|
||||
import { DefinePlugin } from "webpack";
|
||||
import { additionalExternals, buildDir, isDevelopment, mainDir } from "./vars";
|
||||
import { buildDir, isDevelopment } from "./vars";
|
||||
import { platform } from "process";
|
||||
|
||||
const main = ({ showVars = true } = {}): webpack.Configuration => {
|
||||
if (showVars) {
|
||||
console.info("WEBPACK:main", {
|
||||
isDevelopment,
|
||||
mainDir,
|
||||
buildDir,
|
||||
});
|
||||
}
|
||||
|
||||
const webpackLensMain = (): webpack.Configuration => {
|
||||
return {
|
||||
name: "lens-app-main",
|
||||
context: __dirname,
|
||||
@@ -32,18 +21,22 @@ const main = ({ showVars = true } = {}): webpack.Configuration => {
|
||||
devtool: isDevelopment ? "cheap-module-source-map" : "source-map",
|
||||
cache: isDevelopment ? { type: "filesystem" } : false,
|
||||
entry: {
|
||||
main: path.resolve(mainDir, "index.ts"),
|
||||
main: path.resolve(__dirname, "..", "src", "main", "library.ts"),
|
||||
},
|
||||
output: {
|
||||
libraryTarget: "global",
|
||||
path: buildDir,
|
||||
library: {
|
||||
type: "commonjs2",
|
||||
},
|
||||
path: path.resolve(buildDir, "library"),
|
||||
},
|
||||
optimization: {
|
||||
minimize: false,
|
||||
},
|
||||
resolve: {
|
||||
extensions: [".json", ".js", ".ts"],
|
||||
},
|
||||
externals: [
|
||||
nodeExternals(),
|
||||
...additionalExternals,
|
||||
],
|
||||
module: {
|
||||
parser: {
|
||||
@@ -56,7 +49,19 @@ const main = ({ showVars = true } = {}): webpack.Configuration => {
|
||||
test: /\.node$/,
|
||||
use: "node-loader",
|
||||
},
|
||||
getTypescriptLoader({}, /\.ts$/),
|
||||
{
|
||||
test: /\.ts$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: "ts-loader",
|
||||
options: {
|
||||
transpileOnly: true,
|
||||
compilerOptions: {
|
||||
sourceMap: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
...iconsAndImagesWebpackRules(),
|
||||
],
|
||||
},
|
||||
@@ -65,14 +70,18 @@ const main = ({ showVars = true } = {}): webpack.Configuration => {
|
||||
CONTEXT_MATCHER_FOR_NON_FEATURES: `/\\.injectable(\\.${platform})?\\.tsx?$/`,
|
||||
CONTEXT_MATCHER_FOR_FEATURES: `/\\/(main|common)\\/.+\\.injectable(\\.${platform})?\\.tsx?$/`,
|
||||
}),
|
||||
new ForkTsCheckerPlugin(),
|
||||
new CircularDependencyPlugin({
|
||||
cwd: __dirname,
|
||||
exclude: /node_modules/,
|
||||
failOnError: true,
|
||||
}) as unknown as WebpackPluginInstance,
|
||||
new ForkTsCheckerPlugin({
|
||||
typescript: {
|
||||
mode: "write-dts",
|
||||
configOverwrite: {
|
||||
compilerOptions: {
|
||||
declaration: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
],
|
||||
};
|
||||
};
|
||||
|
||||
export default main;
|
||||
export default webpackLensMain;
|
||||
@@ -5,31 +5,16 @@
|
||||
|
||||
import path from "path";
|
||||
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 MonacoWebpackPlugin from "monaco-editor-webpack-plugin";
|
||||
import CircularDependencyPlugin from "circular-dependency-plugin";
|
||||
import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
|
||||
import ForkTsCheckerPlugin from "fork-ts-checker-webpack-plugin";
|
||||
import type { WebpackPluginInstance } from "webpack";
|
||||
import { DefinePlugin } from "webpack";
|
||||
import { getTypescriptLoader } from "./get-typescript-loader";
|
||||
import { assetsFolderName, isDevelopment, rendererDir, buildDir, appName, htmlTemplate, publicPath, sassCommonVars, additionalExternals } from "./vars";
|
||||
import { optimize, DefinePlugin } from "webpack";
|
||||
import nodeExternals from "webpack-node-externals";
|
||||
import { isDevelopment, buildDir, sassCommonVars } from "./vars";
|
||||
import { platform } from "process";
|
||||
|
||||
export function webpackLensRenderer({ showVars = true } = {}): webpack.Configuration {
|
||||
if (showVars) {
|
||||
console.info("WEBPACK:renderer", {
|
||||
assetsFolderName,
|
||||
isDevelopment,
|
||||
rendererDir,
|
||||
buildDir,
|
||||
appName,
|
||||
htmlTemplate,
|
||||
publicPath,
|
||||
});
|
||||
}
|
||||
|
||||
export function webpackLensRenderer(): webpack.Configuration {
|
||||
return {
|
||||
target: "electron-renderer",
|
||||
name: "lens-app-renderer",
|
||||
@@ -38,16 +23,13 @@ export function webpackLensRenderer({ showVars = true } = {}): webpack.Configura
|
||||
devtool: isDevelopment ? "cheap-module-source-map" : "source-map",
|
||||
cache: isDevelopment ? { type: "filesystem" } : false,
|
||||
entry: {
|
||||
[appName]: path.resolve(rendererDir, "index.ts"),
|
||||
renderer: path.resolve(__dirname, "..", "src", "renderer", "library.ts"),
|
||||
},
|
||||
output: {
|
||||
libraryTarget: "global",
|
||||
globalObject: "this",
|
||||
publicPath,
|
||||
path: buildDir,
|
||||
filename: "[name].js",
|
||||
chunkFilename: "chunks/[name].js",
|
||||
assetModuleFilename: `${assetsFolderName}/[name][ext][query]`,
|
||||
library: {
|
||||
type: "commonjs2",
|
||||
},
|
||||
path: path.resolve(buildDir, "library"),
|
||||
},
|
||||
watchOptions: {
|
||||
ignored: /node_modules/, // https://webpack.js.org/configuration/watch/
|
||||
@@ -64,10 +46,7 @@ export function webpackLensRenderer({ showVars = true } = {}): webpack.Configura
|
||||
],
|
||||
},
|
||||
externals: [
|
||||
{
|
||||
"win-ca": "commonjs win-ca",
|
||||
},
|
||||
...additionalExternals,
|
||||
nodeExternals(),
|
||||
],
|
||||
optimization: {
|
||||
minimize: false,
|
||||
@@ -83,11 +62,20 @@ export function webpackLensRenderer({ showVars = true } = {}): webpack.Configura
|
||||
test: /\.node$/,
|
||||
use: "node-loader",
|
||||
},
|
||||
getTypescriptLoader({
|
||||
getCustomTransformers: () => ({
|
||||
before: isDevelopment ? [require("react-refresh-typescript")()] : [],
|
||||
}),
|
||||
}),
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: "ts-loader",
|
||||
options: {
|
||||
transpileOnly: true,
|
||||
compilerOptions: {
|
||||
declaration: true,
|
||||
sourceMap: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
cssModulesWebpackRule(),
|
||||
...iconsAndImagesWebpackRules(),
|
||||
...fontsLoaderWebpackRules(),
|
||||
@@ -99,25 +87,7 @@ export function webpackLensRenderer({ showVars = true } = {}): webpack.Configura
|
||||
CONTEXT_MATCHER_FOR_NON_FEATURES: `/\\.injectable(\\.${platform})?\\.tsx?$/`,
|
||||
CONTEXT_MATCHER_FOR_FEATURES: `/\\/(renderer|common)\\/.+\\.injectable(\\.${platform})?\\.tsx?$/`,
|
||||
}),
|
||||
new ForkTsCheckerPlugin(),
|
||||
|
||||
// see also: https://github.com/Microsoft/monaco-editor-webpack-plugin#options
|
||||
new MonacoWebpackPlugin({
|
||||
// publicPath: "/",
|
||||
// filename: "[name].worker.js",
|
||||
languages: ["json", "yaml"],
|
||||
globalAPI: isDevelopment,
|
||||
}),
|
||||
|
||||
new HtmlWebpackPlugin({
|
||||
filename: "index.html",
|
||||
template: htmlTemplate,
|
||||
inject: true,
|
||||
hash: true,
|
||||
templateParameters: {
|
||||
assetPath: `${publicPath}${assetsFolderName}`,
|
||||
},
|
||||
}),
|
||||
new ForkTsCheckerPlugin({}),
|
||||
|
||||
new CircularDependencyPlugin({
|
||||
cwd: __dirname,
|
||||
@@ -129,11 +99,9 @@ export function webpackLensRenderer({ showVars = true } = {}): webpack.Configura
|
||||
filename: "[name].css",
|
||||
}),
|
||||
|
||||
...(
|
||||
isDevelopment
|
||||
? [new ReactRefreshWebpackPlugin({ overlay: false })]
|
||||
: []
|
||||
),
|
||||
new optimize.LimitChunkCountPlugin({
|
||||
maxChunks: 1,
|
||||
}),
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
@@ -21,8 +21,5 @@ export const htmlTemplate = path.resolve(rendererDir, "template.html");
|
||||
export const publicPath = "/build/";
|
||||
export const sassCommonVars = path.resolve(rendererDir, "components/vars.scss");
|
||||
export const webpackDevServerPort = Number(process.env.WEBPACK_DEV_SERVER_PORT) || 9191;
|
||||
export const additionalExternals = (process.env.LENS_BUILD_ADDITIONAL_WEBPACK_EXTERNALS || "")
|
||||
.split(",")
|
||||
.map(s => s.trim());
|
||||
|
||||
assert(Number.isInteger(webpackDevServerPort), "WEBPACK_DEV_SERVER_PORT environment variable must only be an integer");
|
||||
Reference in new issue
Block a user