cockpit: add webpack config and support for Cockpit

Configured Webpack and setup of cockpit to support
building and running image builder as a cockpit plugin
(On-premise)

cockpit/webpack.config.ts

@@ -0,0 +1,68 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const webpack = require('webpack'); // Add this line
+const [mode, devtool] =
+  process.env.NODE_ENV === 'production'
+    ? ['production', 'source-map']
+    : ['development', 'inline-source-map'];
+
+const output = {
+  path: path.resolve('cockpit/public'),
+  filename: 'main.js',
+  sourceMapFilename: '[file].map',
+};
+
+const plugins = [
+  new MiniCssExtractPlugin({
+    ignoreOrder: true,
+  }),
+  new webpack.DefinePlugin({
+    'process.env.IS_ON_PREMISE': JSON.stringify(true),
+  }),
+];
+
+module.exports = {
+  entry: './src/AppCockpit.tsx',
+  output,
+  mode,
+  devtool,
+  plugins,
+  externals: { cockpit: 'cockpit' },
+  resolve: {
+    modules: ['node_modules'],
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(ts|tsx)$/,
+        include: [path.resolve('src')],
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              '@babel/preset-env',
+              '@babel/preset-react',
+              '@babel/preset-typescript',
+            ],
+          },
+        },
+        resolve: { fullySpecified: false },
+      },
+      {
+        test: /\.css$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: { url: false },
+          },
+        ],
+      },
+      {
+        test: /\.scss$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
+      },
+    ],
+  },
+};