update package and script

package.json

@@ -7,10 +7,10 @@
   "private": true,
   "scripts": {
     "start": "webpack-dev-server --hot --progress --static ./ --port 44300 --https",
-    "build-dev": "webpack  --mode=development",
+    "build-dev": "webpack --progress --config webpack.dev.config.js",
     "package-dev": "tfx extension create --manifest-globs azure-devops-extension.json --overrides-file configs/dev.json",
     "package-release": "tfx extension create --manifest-globs azure-devops-extension.json --overrides-file configs/release.json",
-    "build:release": "webpack --mode=production",
+    "build:release": "webpack --progress",
     "postbuild": "npm run package",
     "package": "tfx extension create --manifest-globs azure-devops-extension.json",
     "gallery-publish": "tfx extension publish --rev-version",
@@ -18,23 +18,19 @@
     "lint": "eslint ."
   },
   "dependencies": {
-  
     "azure-devops-extension-api": "^1.152.3",
     "azure-devops-extension-sdk": "^2.0.10",
     "azure-devops-ui": "^1.154.1",
     "lodash": "^4.17.21",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-monaco-editor": "^0.26.2",
+    "react-monaco-editor": "^0.36.0",
     "styled-components": "^4.3.1"
-    
   },
   "devDependencies": {
-    "webpack-dev-server": "^4.11.1",
     "@types/lodash": "^4.14.135",
     "@types/react": "^16.8.20",
     "@types/react-dom": "^16.8.4",
-    "@types/react-monaco-editor": "^0.16.0",
     "@types/styled-components": "^4.1.16",
     "@typescript-eslint/eslint-plugin": "^1.10.2",
     "@typescript-eslint/parser": "^1.10.2",
@@ -45,16 +41,17 @@
     "eslint-plugin-react": "^7.13.0",
     "eslint-plugin-react-hooks": "^1.6.0",
     "file-loader": "^4.0.0",
-    "html-webpack-plugin": "^3.2.0",
-    "lodash-webpack-plugin": "^0.11.5",
-    "monaco-editor-webpack-plugin": "^1.7.0",
+    "html-webpack-plugin": "^5.5.0",
+    "lodash-webpack-plugin": "^0.11.6",
+    "monaco-editor-webpack-plugin": "^7.0.1",
     "prettier": "^1.18.2",
     "source-map-loader": "^0.2.4",
     "style-loader": "^0.23.1",
     "ts-loader": "^6.0.2",
     "typescript": "^3.5.2",
     "typescript-styled-plugin": "^0.14.0",
-    "webpack": "^4.33.0",
-    "webpack-cli": "^4.10.0"
+    "webpack": "^5.72.1",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.11.1"
   }
 }

webpack.config.js

@@ -7,12 +7,11 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 const observerConfig = {
   entry: './src/observer/index.ts',
-  mode: 'development',
+  mode: 'production',
   output: {
     filename: 'observer.js',
     path: path.resolve(__dirname, 'dist'),
   },
-  devtool: 'source-map',
 
   resolve: {
     extensions: ['.json', '.ts', '.tsx', '.js'],
@@ -43,8 +42,6 @@ const confighubConfig = {
     filename: 'confighub.js',
     path: path.resolve(__dirname, 'dist'),
   },
-  devtool: 'source-map',
-
   resolve: {
     extensions: ['.json', '.ts', '.tsx', '.js'],
   },

webpack.dev.config.js

@@ -0,0 +1,80 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const path = require('path');
+const webpack = require('webpack');
+const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+const observerConfig = {
+  entry: './src/observer/index.ts',
+  mode: 'development',
+  output: {
+    filename: 'observer.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+  devtool: 'source-map',
+
+  resolve: {
+    extensions: ['.json', '.ts', '.tsx', '.js'],
+  },
+  module: {
+    rules: [
+      { test: /\.json$/, use: 'json' },
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  plugins: [
+    new webpack.optimize.ModuleConcatenationPlugin(),
+    new LodashModuleReplacementPlugin(),
+    new HtmlWebpackPlugin({
+      filename: 'observer.html',
+    }),
+  ],
+};
+
+const confighubConfig = {
+  entry: './src/confighub/index.tsx',
+  mode: 'development',
+  output: {
+    filename: 'confighub.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+  devtool: 'source-map',
+
+  resolve: {
+    extensions: ['.json', '.ts', '.tsx', '.js'],
+  },
+  module: {
+    rules: [
+      { test: /\.json$/, use: 'json' },
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
+        loader: 'file-loader',
+      },
+    ],
+  },
+  plugins: [
+    new webpack.optimize.ModuleConcatenationPlugin(),
+    new LodashModuleReplacementPlugin(),
+    new MonacoWebpackPlugin({ languages: ['json'] }),
+    new HtmlWebpackPlugin({
+      template: 'static/confighub.html',
+      filename: 'confighub.html',
+    }),
+  ],
+};
+
+module.exports = [observerConfig, confighubConfig];