Use webpack instead of tsc to output extension-api.ts

Signed-off-by: Hung-Han (Henry) Chen <1474479+chenhunghan@users.noreply.github.com>

package.json

@@ -21,7 +21,7 @@
     "compile:main": "yarn run webpack --config webpack.main.ts",
     "compile:renderer": "yarn run webpack --config webpack.renderer.ts",
     "compile:i18n": "yarn run lingui compile",
-    "compile:extension-types": "yarn run tsc -p ./tsconfig.extensions.json --outDir src/extensions/npm/extensions/dist",
+    "compile:extension-types": "yarn run webpack --config webpack.extensions.ts",
     "npm:fix-package-version": "yarn run ts-node build/set_npm_version.ts",
     "build:linux": "yarn run compile && electron-builder --linux --dir -c.productName=Lens",
     "build:mac": "yarn run compile && electron-builder --mac --dir -c.productName=Lens",

tsconfig.extensions.json

@@ -1,11 +1,9 @@
 {
   "extends": "./tsconfig.json",
-  "files": [
-    "src/extensions/extension-api.ts",
-  ],
   "compilerOptions": {
     "module": "CommonJS",
-    "sourceMap": false,
-    "declaration": true
+    "declaration": true, // should output .d.ts
+    "sourceMap": true, // for use with webpack's devtool: 'inline-source-map'
+    "outDir": "./src/extensions/npm/extensions/dist" // where .d.ts output
   }
 }

webpack.extensions.ts

@@ -0,0 +1,93 @@
+
+import path from 'path';
+import webpack from "webpack";
+import nodeExternals from "webpack-node-externals";
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+
+import { sassCommonVars } from "./src/common/vars";
+
+export default function (): webpack.Configuration {
+    return {
+        // Compile for Electron for renderer process
+        // see <https://webpack.js.org/configuration/target/>
+        target: "electron-renderer",
+        externals: [
+             // in order to ignore all modules in node_modules folder
+             // <https://www.npmjs.com/package/webpack-node-externals>
+             nodeExternals()
+        ],
+        devtool: 'inline-source-map',
+        entry: './src/extensions/extension-api.ts',
+        output: {
+            filename: 'extension-api.js',
+            // need to be an absolute path
+            path: path.resolve(__dirname, 'src/extensions/npm/extensions/dist/src/extensions'),
+            libraryTarget: "commonjs"
+        },
+        module: {
+            rules: [
+                {
+                    test: /\.tsx?$/,
+                    loader: 'ts-loader',
+                    options: {
+                        configFile: 'tsconfig.extensions.json',
+                    }
+                },
+                // 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]"
+                        }
+                    }
+                },
+                // for import scss files
+                {
+                    test: /\.s?css$/,
+                    use: [
+                        // https://webpack.js.org/plugins/mini-css-extract-plugin/
+                        MiniCssExtractPlugin.loader,
+                        {
+                            loader: "css-loader",
+                            options: {
+                                sourceMap: true
+                            },
+                        },
+                        {
+                            loader: "sass-loader",
+                            options: {
+                                sourceMap: true,
+                                prependData: `@import "${path.basename(sassCommonVars)}";`,
+                                sassOptions: {
+                                    includePaths: [
+                                        path.dirname(sassCommonVars)
+                                    ]
+                                },
+                            }
+                        },
+                    ]
+                }
+            ]
+        },
+        resolve: {
+            extensions: ['.ts', '.tsx']
+        },
+        plugins: [
+            // In ts-loader's README they said to output a built .d.ts file, 
+            // you can set "declaration": true in tsconfig.extensions.json,
+            // and use the DeclarationBundlerPlugin in your webpack config... but
+            // !! the DeclarationBundlerPlugin doesn't work anymore, author archived it.
+            // https://www.npmjs.com/package/declaration-bundler-webpack-plugin
+            // new DeclarationBundlerPlugin({
+            //   moduleName: '@k8slens/extensions',
+            //    out: 'extension-api.d.ts',
+            // }),
+            new MiniCssExtractPlugin({
+                filename: "[name].css",
+            }),
+        ]
+    };
+}