Monaco-editor with vscode extension webpack webview

Question

I am trying to implement monaco-editor into custom vscode extension and I've tried it in so many ways to import it, but I cannot figure it out (there are either random errors from monaco-editor files, problems with imports inside those files - err:access_denied, or even import * as monaco from "monaco-editor". Did someone maybe figure it out and be willing to help me out? I am using typescript project from vscode extension generator. Basically, what I try to do is for the chatgpt output code to style it the same way as monaco editor into my webview, however even a simple monaco editor with random code doesn't work. Here are some files to help.

webpack.config.js

//@ts-check

'use strict';

const path = require('path');
const webpack = require("webpack");
// const dotenv = require('dotenv');
require('dotenv').config({ path: path.resolve(__dirname, '.env') });
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

// this will update the process.env with environment variables in .env file
// dotenv.config( { path: path.resolve(__dirname, '.env') } );

//@ts-check
/** @typedef {import('webpack').Configuration} WebpackConfig **/

/** @type WebpackConfig */
const extensionConfig = {
  plugins: [
    new webpack.DefinePlugin({
      "process.env": JSON.stringify(process.env)
    }),
    // new MonacoWebpackPlugin({
    //   "publicPath": "/dist/"
    // })
  ],
  target: 'node', // VS Code extensions run in a Node.js-context  -> https://webpack.js.org/configuration/node/
    mode: 'development', // this leaves the source code as close as possible to the original (when packaging we set this to 'production')

  // entry: './src/extension.ts', // the entry point of this extension,  -> https://webpack.js.org/configuration/entry-context/
  entry: {
    extension: './src/extension.ts',
    'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
    'json.worker': 'monaco-editor/esm/vs/language/json/json.worker',
    'css.worker': 'monaco-editor/esm/vs/language/css/css.worker',
    'html.worker': 'monaco-editor/esm/vs/language/html/html.worker',
    'ts.worker': 'monaco-editor/esm/vs/language/typescript/ts.worker',
  },
  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',
    libraryTarget: 'commonjs2',
    chunkFilename: '[name].chunk.js',
  },
  externals: {
    vscode: 'commonjs vscode' // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed,  -> https://webpack.js.org/configuration/externals/
    // modules added here also need to be added in the .vscodeignore file
  },
  resolve: {
    // support reading TypeScript and JavaScript files,  -> https://github.com/TypeStrong/ts-loader
    extensions: ['.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'ts-loader'
          }
        ]
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.ttf$/,
        use: ['file-loader'],
      },
    ]
  },
  devtool: 'source-map',
  watchOptions: {
    ignored: /node_modules/,
  },
  infrastructureLogging: {
    level: "log", // enables logging required for problem matchers
  },
};
module.exports = extensionConfig;

tsconfig.json

{
    "compilerOptions": {
        "target": "ES2017",
        "module": "esnext",
        "outDir": "out",
        "strict": true,
        "sourceMap": true,
        "moduleResolution": "node",
        "baseUrl": "./node_modules",
        "types": ["node", "webpack-env"]
    },
}

package.json

{
  "name": "declutter",
  "displayName": "declutter",
  "description": "An extension that declutters human brain",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.78.0"
  },
  "categories": [
    "Other"
  ],
  "activationEvents": [
    "onView:declutter.MainView"
  ],
  "main": "./dist/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "declutter.askGPT",
        "title": "Ask GPT"
      },
      {
        "command": "declutter.history",
        "title": "History",
        "icon": "media/icons/history.png"
      }
    ],
    "menus": {
      "view/title": [
        {
          "when": "view == declutter.MainView",
          "command": "declutter.history",
          "group": "navigation"
        }
      ],
      "editor/context": [
        {
          "command": "declutter.askGPT",
          "when": "editorHasSelection",
          "group": "declutter"
        }
      ]
    },
    "viewsContainers": {
      "activitybar": [
        {
          "id": "declutter",
          "title": "Declutter",
          "icon": "media/icons/finall.svg"
        }
      ]
    },
    "views": {
      "declutter": [
        {
          "type": "webview",
          "id": "declutter.MainView",
          "name": "Chat"
        }
      ]
    }
  },
  "configuration": {
    "title": "Declutter",
    "type": "object",
    "properties": {
      "declutter.helloWorld": {
        "type": "string",
        "description": "Declutter Hello World",
        "order": 1
      }
    }
  },
  "scripts": {
    "vscode:prepublish": "npm run package",
    "compile": "webpack --config ./webpack.config.js",
    "watch": "concurrently \"rollup -c -w\" \"webpack --watch --config ./webpack.config.js\"",
    "build": "node ../node_modules/webpack/bin/webpack.js --progress",
    "package": "webpack --mode production --devtool hidden-source-map",
    "compile-tests": "tsc -p . --outDir out",
    "watch-tests": "tsc -p . -w --outDir out",
    "pretest": "npm run compile-tests && npm run compile && npm run lint",
    "lint": "eslint src --ext ts",
    "test": "node ./out/test/runTest.js"
  },
  "devDependencies": {
    "@types/glob": "^8.1.0",
    "@types/jest": "^29.5.10",
    "@types/mocha": "^10.0.2",
    "@types/node": "^20.8.5",
    "@types/vscode": "^1.83.0",
    "@types/webpack-env": "^1.18.4",
    "@typescript-eslint/eslint-plugin": "^6.7.5",
    "@typescript-eslint/parser": "^6.7.5",
    "@vscode/test-electron": "^2.3.5",
    "dotenv": "^16.3.1",
    "dotenv-webpack": "^8.0.1",
    "esbuild": "^0.19.8",
    "eslint": "^8.51.0",
    "glob": "^10.3.10",
    "mocha": "^10.2.0",
    "process": "^0.11.10",
    "ts-loader": "^9.5.0",
    "ts-node": "^10.9.1",
    "typescript": "^5.2.2",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4"
  },
  "dependencies": {
    "@vscode/codicons": "^0.0.35",
    "concurrently": "^8.2.1",
    "css-loader": "^6.8.1",
    "dt-python-parser": "^0.9.0",
    "file-loader": "^6.2.0",
    "jquery": "^3.7.1",
    "jquery-resizable-dom": "^0.35.0",
    "monaco-editor": "^0.44.0",
    "monaco-editor-webpack-plugin": "^7.1.0",
    "openai": "^4.12.1",
    "style-loader": "^3.3.3",
    "util": "^0.12.5"
  }
}