From f87525da78098d6915afb45fa96c1a5fc6fd550a Mon Sep 17 00:00:00 2001
From: Rankin Zheng <runjin@merico.dev>
Date: Fri, 5 May 2023 23:08:48 +0800
Subject: [PATCH] Add webpack configuration for webview

This commit adds a new webpack configuration for the webview part of the project. It includes the necessary rules for transpiling and bundling the TypeScript and React code, as well as the CSS and image files. The new configuration is added to the existing configuration for the extension. The devtool option is changed to 'source-map' for better debugging experience.
---
 webpack.config.js | 77 +++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 64 insertions(+), 13 deletions(-)

diff --git a/webpack.config.js b/webpack.config.js
index 01a639b..09d0a1d 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -12,17 +12,16 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 /** @type WebpackConfig */
 const extensionConfig = {
+  name: 'vscode extension',
   target: 'node', // VS Code extensions run in a Node.js-context 📖 -> https://webpack.js.org/configuration/node/
   mode: 'none', // this leaves the source code as close as possible to the original (when packaging we set this to 'production')
 
-  entry: {
-    extension: './src/extension.ts', // the entry point of this extension, 📖 -> https://webpack.js.org/configuration/entry-context/
-    index: './src/views/index.tsx'
-  },
+  entry: './src/extension.ts', // the entry point of this extension, 📖 -> https://webpack.js.org/configuration/entry-context/
+
   output: {
     // the bundle is stored in the 'dist' folder (check package.json), 📖 -> https://webpack.js.org/configuration/output/
     path: path.resolve(__dirname, 'dist'),
-    filename: '[name].js',
+    filename: 'extension.js',
     libraryTarget: 'commonjs2'
   },
   externals: {
@@ -31,6 +30,51 @@ const extensionConfig = {
   },
   resolve: {
     // support reading TypeScript and JavaScript files, 📖 -> https://github.com/TypeStrong/ts-loader
+    extensions: ['.ts', '.json']
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts?$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              presets: [
+                '@babel/preset-env',
+                '@babel/preset-react',
+                '@babel/preset-typescript'
+              ]
+            }
+          },
+          {
+            loader: 'ts-loader'
+          }
+        ]
+      },
+    ]
+  },
+  devtool: 'nosources-source-map',
+  infrastructureLogging: {
+    level: "log", // enables logging required for problem matchers
+  },
+  plugins: []
+};
+
+
+/** @type WebpackConfig */
+const webviewConfig = {
+  name: 'webview',
+  target: 'web',
+  mode: 'development',
+
+  entry: './src/views/index.tsx',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'index.js',
+  },
+  resolve: {
     extensions: ['.ts', '.tsx', '.js', '.json']
   },
   module: {
@@ -56,8 +100,18 @@ const extensionConfig = {
       },
       {
         test: /\.jsx?$/,
-        use: 'babel-loader',
         exclude: /node_modules/,
+        use: [{
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              [
+                '@babel/preset-env',
+                '@babel/preset-react',
+              ],
+            ]
+          },
+        }]
       },
       {
         test: /\.css$/i,
@@ -94,9 +148,9 @@ const extensionConfig = {
       }
     ]
   },
-  devtool: 'nosources-source-map',
+  devtool: 'source-map',
   infrastructureLogging: {
-    level: "log", // enables logging required for problem matchers
+    level: "log",
   },
   plugins: [
     // generate an HTML file that includes the extension's JavaScript file
@@ -109,12 +163,9 @@ const extensionConfig = {
       patterns: [
         { from: 'assets', to: 'assets' },
       ],
-    }),
-    // define global variables
-    new DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('development')
     })
   ]
 };
 
-module.exports = [extensionConfig];
+
+module.exports = [extensionConfig, webviewConfig];