Updated the JS dependencies to the latest

1) Migrate from webpack 4 to webpack 5. This had a lot of breaking changes, so updated multiple webpack plugins and changed the config accordingly. 2) Replaced iconfont-webpack-plugin with a more maintained webfonts-loader. 3) Replaced deprecated babel-eslint with @babel/eslint-parser. 4) Replaced optimize-css-assets-webpack-plugin with a more maintained css-minimizer-webpack-plugin. 5) Updated all other JS packages and made the required code changes. Fixes #6207
2024-11-22 00:37:36 -06:00 · 2021-02-10 12:47:52 +05:30 · 2021-02-10 12:47:52 +05:30 · 1317e4254b
commit 1317e4254b
parent 589663d7d9
48 changed files with 3205 additions and 4039 deletions
--- a/docs/en_US/release_notes_5_0.rst
+++ b/docs/en_US/release_notes_5_0.rst
@ -19,6 +19,7 @@ Housekeeping
 ************

 | `Issue #5017 <https://redmine.postgresql.org/issues/5017>`_ -  Use cheroot as the default production server for pgAdmin4.
+| `Issue #6207 <https://redmine.postgresql.org/issues/6207>`_ -  Updated the JS dependencies to the latest.

 Bug fixes
 *********
--- a/web/.eslintrc.js
+++ b/web/.eslintrc.js
@ -18,16 +18,23 @@ module.exports = {
    'eslint:recommended',
    'plugin:react/recommended',
  ],
-  'parser': 'babel-eslint',
+  'parser': '@babel/eslint-parser',
  'parserOptions': {
+    'requireConfigFile': false,
    'ecmaVersion': 2018,
    'ecmaFeatures': {
-      'jsx': true
+      'jsx': true,
    },
    'sourceType': 'module',
+    'babelOptions': {
+      'plugins': [
+        '@babel/plugin-syntax-jsx',
+      ],
+    },
  },
  'plugins': [
-    'react'
+    'react',
+    '@babel',
  ],
  'globals': {
    '_': true,
@ -36,28 +43,31 @@ module.exports = {
  'rules': {
    'indent': [
      'error',
-      2
+      2,
    ],
    'linebreak-style': 0,
    'quotes': [
      'error',
-      'single'
+      'single',
    ],
    'semi': [
      'error',
-      'always'
+      'always',
    ],
    'comma-dangle': [
      'error',
-      'always-multiline'
+      'only-multiline',
    ],
-    'no-console': ["error", { allow: ["warn", "error"] }],
+    'no-console': ['error', { allow: ['warn', 'error'] }],
    // We need to exclude below for RegEx case
-    "no-useless-escape": 0,
+    'no-useless-escape': 0,
+    'no-prototype-builtins': 0,
+    'no-global-assign': 0,
+    'no-import-assign': 0,
  },
  'settings': {
    'react': {
      'version': 'detect',
    },
-  }
+  },
 };
--- a/web/package.json
+++ b/web/package.json
@ -8,93 +8,96 @@
  "license": "PostgreSQL",
  "devDependencies": {
    "@babel/core": "^7.10.2",
+    "@babel/eslint-parser": "^7.12.13",
+    "@babel/eslint-plugin": "^7.12.13",
    "@babel/plugin-proposal-object-rest-spread": "^7.9.6",
    "@babel/preset-env": "^7.10.2",
    "@emotion/core": "^10.0.14",
    "@emotion/styled": "^10.0.14",
-    "autoprefixer": "^9.6.4",
+    "autoprefixer": "^10.2.4",
    "axios-mock-adapter": "^1.17.0",
-    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.1.0",
-    "copy-webpack-plugin": "^5.1.0",
+    "browserify": "^17.0.0",
+    "buffer": "^6.0.3",
+    "copy-webpack-plugin": "^7.0.0",
    "core-js": "^3.2.1",
-    "cross-env": "^5.2.0",
+    "cross-env": "^7.0.3",
+    "css-minimizer-webpack-plugin": "^1.2.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
-    "eslint": "5.15.1",
+    "eslint": "^7.19.0",
    "eslint-plugin-react": "^7.20.5",
-    "file-loader": "^3.0.1",
-    "iconfont-webpack-plugin": "^4.2.1",
-    "image-webpack-loader": "^4.6.0",
-    "is-docker": "^1.1.0",
-    "jasmine-core": "~3.3.0",
+    "exports-loader": "^2.0.0",
+    "image-minimizer-webpack-plugin": "^2.2.0",
+    "imagemin-gifsicle": "^7.0.0",
+    "imagemin-mozjpeg": "^9.0.0",
+    "imagemin-optipng": "^8.0.0",
+    "imagemin-pngquant": "^9.0.1",
+    "imagemin-svgo": "^8.0.0",
+    "is-docker": "^2.1.1",
+    "jasmine-core": "^3.6.0",
    "jasmine-enzyme": "^7.1.2",
-    "karma": "^4.0.1",
+    "karma": "^6.1.0",
    "karma-babel-preprocessor": "^8.0.0",
-    "karma-browserify": "~6.0.0",
-    "karma-chrome-launcher": "^2.2.0",
-    "karma-jasmine": "~2.0.1",
+    "karma-browserify": "^8.0.0",
+    "karma-chrome-launcher": "^3.1.0",
+    "karma-jasmine": "^4.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "karma-requirejs": "~1.1.0",
    "karma-source-map-support": "^1.4.0",
    "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "~4.0.0-rc.6",
-    "mini-css-extract-plugin": "^0.5.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "karma-webpack": "^5.0.0",
+    "mini-css-extract-plugin": "^1.3.5",
    "popper.js": "^1.14.7",
-    "postcss-loader": "^3.0.0",
+    "postcss-loader": "^5.0.0",
+    "process": "^0.11.10",
    "prop-types": "^15.7.2",
-    "raw-loader": "^3.1.0",
    "resize-observer-polyfill": "^1.5.1",
    "resolve-url-loader": "^3.1.2",
    "sass": "^1.24.4",
-    "sass-loader": "^7.1.0",
+    "sass-loader": "^11.0.0",
    "sass-resources-loader": "^2.0.0",
-    "style-loader": "^0.23.1",
-    "terser-webpack-plugin": "^2.2.2",
-    "url-loader": "^1.1.2",
-    "webpack": "^4.41.2",
-    "webpack-bundle-analyzer": "^3.5.1",
-    "webpack-cli": "^3.3.11",
-    "webpack-require-from": "^1.8.0",
-    "yarn-audit-html": "^1.1.0"
+    "style-loader": "^2.0.0",
+    "terser-webpack-plugin": "^5.1.1",
+    "webfonts-loader": "^7.1.1",
+    "webpack": "^5.21.2",
+    "webpack-bundle-analyzer": "^4.4.0",
+    "webpack-cli": "^4.5.0",
+    "yarn-audit-html": "^2.0.0"
  },
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/preset-react": "^7.10.4",
+    "@babel/preset-react": "^7.12.13",
    "@fortawesome/fontawesome-free": "^5.14.0",
    "@projectstorm/react-diagrams": "^6.3.0",
    "@simonwep/pickr": "^1.5.1",
    "@tippyjs/react": "^4.2.0",
    "acitree": "git+https://github.com/imsurinder90/jquery-aciTree.git#rc.7",
    "alertifyjs": "git+https://github.com/EnterpriseDB/AlertifyJS/#72c1d794f5b6d4ec13a68d123c08f19021afe263",
-    "axios": "^0.18.1",
+    "axios": "^0.21.1",
    "babelify": "~10.0.0",
    "backbone": "1.4.0",
    "backform": "^0.2.0",
    "backgrid-filter": "^0.3.7",
    "backgrid-select-all": "^0.3.5",
-    "bignumber.js": "^8.1.1",
+    "bignumber.js": "^9.0.1",
    "bootstrap": "^4.3.1",
    "bootstrap-datepicker": "^1.8.0",
-    "bootstrap4-toggle": "3.4.0",
-    "bowser": "2.1.2",
-    "browserify": "~16.2.3",
+    "bootstrap4-toggle": "^3.6.1",
    "chart.js": "^2.9.3",
    "closest": "^0.0.1",
-    "codemirror": "^5.54.0",
-    "css-loader": "2.1.0",
+    "codemirror": "^5.59.2",
+    "css-loader": "^5.0.1",
    "cssnano": "^4.1.10",
    "dagre": "^0.8.4",
-    "dropzone": "^5.5.1",
-    "exports-loader": "~0.7.0",
+    "dropzone": "^5.7.4",
    "html2canvas": "^1.0.0-rc.7",
    "immutability-helper": "^3.0.0",
-    "imports-loader": "^0.8.0",
-    "ip-address": "^5.8.9",
+    "imports-loader": "^2.0.0",
+    "ip-address": "^7.1.0",
    "istanbul-instrumenter-loader": "^3.0.1",
    "jquery": "^3.5.1",
-    "jquery-contextmenu": "^2.8.0",
+    "jquery-contextmenu": "^2.9.2",
    "jquery-ui": "^1.12.1",
    "json-bignumber": "^1.0.1",
    "karma-coverage": "^2.0.3",
@ -102,27 +105,26 @@
    "lodash": "4.*",
    "ml-matrix": "^6.5.0",
    "moment": "^2.24.0",
-    "moment-timezone": "^0.5.23",
+    "moment-timezone": "^0.5.33",
    "mousetrap": "^1.6.3",
    "pathfinding": "^0.4.18",
    "paths-js": "^0.4.9",
+    "postcss": "^8.2.4",
    "raf": "^3.4.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-to-print": "^2.10.3",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
    "requirejs": "~2.3.6",
-    "select2": "^4.0.6-rc.1",
+    "select2": "^4.0.13",
    "shim-loader": "^1.0.1",
    "slickgrid": "git+https://github.com/6pac/SlickGrid.git#2.3.16",
-    "snapsvg": "^0.5.1",
+    "snapsvg-cjs": "^0.0.6",
    "split.js": "^1.5.10",
    "tablesorter": "^2.31.2",
    "tempusdominus-bootstrap-4": "^5.1.2",
    "tempusdominus-core": "^5.0.3",
    "underscore": "^1.9.1",
-    "watchify": "~3.11.1",
    "webcabin-docker": "git+https://github.com/EnterpriseDB/wcDocker/#c4a3398b89588408dc705895675bce7bd7660d36",
-    "wkx": "^0.4.6"
+    "wkx": "^0.5.0"
  },
  "scripts": {
    "linter": "yarn eslint --no-eslintrc -c .eslintrc.js --ext .js .",
--- a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/constraints/foreign_key/static/js/foreign_key.js
+++ b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/constraints/foreign_key/static/js/foreign_key.js
@ -920,7 +920,7 @@ define('pgadmin.node.foreign_key', [
              self.listenTo(collection, 'remove', self.render);
            },
            formatter: {
-              fromRaw: function (rawValue,model,) {
+              fromRaw: function (rawValue,model) {
                var remote_tables = [],
                  m = model.get('columns');
                if (m.length > 0) {
--- a/web/pgadmin/browser/static/css/browser.css
+++ b/web/pgadmin/browser/static/css/browser.css
@ -47,16 +47,3 @@
 .pgadmin_header_logo {
  cursor: default;
 }
-
-.icon-drop-cascade:before  {
-  font-icon: url('../img/drop_cascade.svg');
-  font-size: 1.6em !important;
-}
-
-.icon-filter-table-toolbar:before  {
-  font-icon: url('../img/row_filter.svg');
-}
-
-.icon-query-tool:before  {
-  font-icon: url('../img/query_tool.svg');
-}
--- a/web/pgadmin/browser/static/js/collection.js
+++ b/web/pgadmin/browser/static/js/collection.js
@ -54,7 +54,7 @@ define([
              name: 'show_query_tool', node: this.type, module: this,
              applies: ['context'], callback: 'show_query_tool',
              priority: 998, label: gettext('Query Tool'),
-              icon: 'pg-font-icon icon-query-tool',
+              icon: 'pg-font-icon icon-query_tool',
            }]);

            // show search objects same as query tool
@ -261,7 +261,7 @@ define([
          type: 'delete',
          tooltip: gettext('Drop Cascade'),
          extraClasses: ['btn-primary-icon m-1', 'delete_multiple_cascade'],
-          icon: 'pg-font-icon icon-drop-cascade',
+          icon: 'pg-font-icon icon-drop_cascade',
          disabled: (_.isFunction(that.canDropCascade)) ? !(that.canDropCascade.apply(self, [data, item])) : (!that.canDropCascade),
          register: function(btn) {
            btn.on('click',() => {
--- a/web/pgadmin/browser/static/js/node.js
+++ b/web/pgadmin/browser/static/js/node.js
@ -198,7 +198,7 @@ define('pgadmin.browser.node', [
          callback: 'show_query_tool',
          priority: 998,
          label: gettext('Query Tool'),
-          icon: 'pg-font-icon icon-query-tool',
+          icon: 'pg-font-icon icon-query_tool',
          enable: enable,
        }]);

--- a/web/pgadmin/browser/static/js/preferences.js
+++ b/web/pgadmin/browser/static/js/preferences.js
@ -47,23 +47,10 @@ _.extend(pgBrowser, {
  /* Get cached preference */
  get_preference: function(module, preference){
    const self = this;
-    // If cache is not yet loaded then keep checking
-    if(_.size(self.preferences_cache) == 0) {
-      var check_preference = function() {
-          if(self.preferences_cache.length > 0) {
-            clearInterval(preferenceTimeout);
-            return _.findWhere(
-              self.preferences_cache, {'module': module, 'name': preference}
-            );
-          }
-        },
-        preferenceTimeout = setInterval(check_preference, 1000);
-    }
-    else {
-      return _.findWhere(
-        self.preferences_cache, {'module': module, 'name': preference}
-      );
-    }
+
+    return _.findWhere(
+      self.preferences_cache, {'module': module, 'name': preference}
+    );
  },

  /* Get all the preferences of a module */
--- a/web/pgadmin/browser/static/js/toolbar.js
+++ b/web/pgadmin/browser/static/js/toolbar.js
@ -20,7 +20,7 @@ let _defaultToolBarButtons = [
  {
    label: gettext('Query Tool'),
    ariaLabel: gettext('Query Tool'),
-    btnClass: 'pg-font-icon icon-query-tool',
+    btnClass: 'pg-font-icon icon-query_tool',
    text: '',
    toggled: false,
    toggleClass: '',
@ -30,7 +30,7 @@ let _defaultToolBarButtons = [
  {
    label: gettext('View Data'),
    ariaLabel: gettext('View Data'),
-    btnClass: 'pg-font-icon sql-icon-lg icon-view-data',
+    btnClass: 'pg-font-icon sql-icon-lg icon-view_data',
    text: '',
    toggled: false,
    toggleClass: '',
@ -40,7 +40,7 @@ let _defaultToolBarButtons = [
  {
    label: gettext('Filtered Rows'),
    ariaLabel: gettext('Filtered Rows'),
-    btnClass: 'pg-font-icon icon-filter-table-toolbar',
+    btnClass: 'pg-font-icon icon-row_filter',
    text: '',
    toggled: false,
    toggleClass: '',
--- a/web/pgadmin/feature_tests/query_tool_journey_test.py
+++ b/web/pgadmin/feature_tests/query_tool_journey_test.py
@ -373,7 +373,7 @@ class QueryToolJourneyTest(BaseFeatureTest):
            icon_classes = query_history_selected_icon.get_attribute('class')
            icon_classes = icon_classes.split(" ")
            self.assertTrue(
-                icon in icon_classes or 'icon-save-data-changes' in
+                icon in icon_classes or 'icon-save_data_changes' in
                icon_classes or 'icon-commit' in icon_classes or
                'fa-play' in icon_classes)
            # Move to next entry
--- a/web/pgadmin/misc/bgprocess/static/css/bgprocess.css
+++ b/web/pgadmin/misc/bgprocess/static/css/bgprocess.css
@ -57,7 +57,3 @@ ol.pg-bg-process-logs {
 .pg-bg-bgprocess:hover .bg-close {
  opacity: 0.95;
 }
-
-.icon-storage-manager:before {
-  font-icon: url('../img/storage_manager.svg');
-}
--- a/web/pgadmin/misc/bgprocess/static/js/bgprocess.js
+++ b/web/pgadmin/misc/bgprocess/static/js/bgprocess.js
@ -428,7 +428,7 @@ define('misc.bgprocess', [
        if(self.current_storage_dir && isServerMode) { //for backup & exports with server mode, operate over storage manager

          if($btn_storage_manager.length == 0) {
-            var str_storage_manager_btn = '<button id="bg-process-storage-manager" class="btn btn-secondary bg-process-storage-manager" title="Click to open file location" aria-label="Storage Manager" tabindex="0" disabled><span class="pg-font-icon icon-storage-manager" role="img"></span></button>&nbsp;';
+            var str_storage_manager_btn = '<button id="bg-process-storage-manager" class="btn btn-secondary bg-process-storage-manager" title="Click to open file location" aria-label="Storage Manager" tabindex="0" disabled><span class="pg-font-icon icon-storage_manager" role="img"></span></button>&nbsp;';
            container.find('.bg-process-details .bg-btn-section').prepend(str_storage_manager_btn);
            $btn_storage_manager = container.find('.bg-process-storage-manager');
          }
--- a/web/pgadmin/misc/static/explain/js/explain.js
+++ b/web/pgadmin/misc/static/explain/js/explain.js
@ -1209,8 +1209,8 @@ define('pgadmin.misc.explain', [
    // Assumption container is a jQuery object
    DrawJSONPlan: function(container, plan, isDownload, _ctx) {
      let self = this;
-      require.ensure(['snapsvg'], function(require) {
-        var module = require('snapsvg');
+      require.ensure(['snap.svg'], function(require) {
+        var module = require('snap.svg');
        initSnap(module);
        self.goForDraw(container, plan, isDownload, _ctx);
      }, function(error){
--- a/web/pgadmin/static/css/style.css
+++ b/web/pgadmin/static/css/style.css
@ -1,23 +1,23 @@
-@import '~alertifyjs/build/css/alertify.css';
-@import '~alertifyjs/build/css/themes/bootstrap.css';
-@import '~@fortawesome/fontawesome-free/css/all.css';
-@import '~bootstrap-datepicker/dist/css/bootstrap-datepicker3.css';
-@import '~tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.css';
-@import '~bootstrap4-toggle/css/bootstrap4-toggle.css';
-@import '~backgrid-filter/backgrid-filter.css';
-@import '~jquery-contextmenu/dist/jquery.contextMenu.css';
-@import '~webcabin-docker/Build/wcDocker.css';
-@import '~acitree/css/aciTree.css';
-@import '~leaflet/dist/leaflet.css';
-@import '../../../node_modules/select2/dist/css/select2.css';
+@import 'node_modules/alertifyjs/build/css/alertify.css';
+@import 'node_modules/alertifyjs/build/css/themes/bootstrap.css';
+@import 'node_modules/@fortawesome/fontawesome-free/css/all.css';
+@import 'node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css';
+@import 'node_modules/tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.css';
+@import 'node_modules/bootstrap4-toggle/css/bootstrap4-toggle.min.css';
+@import 'node_modules/backgrid-filter/backgrid-filter.css';
+@import 'node_modules/jquery-contextmenu/dist/jquery.contextMenu.css';
+@import 'node_modules/webcabin-docker/Build/wcDocker.css';
+@import 'node_modules/acitree/css/aciTree.css';
+@import 'node_modules/select2/dist/css/select2.min.css';
+@import 'node_modules/leaflet/dist/leaflet.css';

-@import '~codemirror/lib/codemirror.css';
-@import '~codemirror/addon/dialog/dialog.css';
-@import '~codemirror/addon/scroll/simplescrollbars.css';
+@import 'node_modules/codemirror/lib/codemirror.css';
+@import 'node_modules/codemirror/addon/dialog/dialog.css';
+@import 'node_modules/codemirror/addon/scroll/simplescrollbars.css';

-@import '~slickgrid/slick.grid.css';
-@import '~slickgrid/slick-default-theme.css';
-@import '~slickgrid/css/smoothness/jquery-ui-1.11.3.custom.css';
+@import 'node_modules/slickgrid/slick.grid.css';
+@import 'node_modules/slickgrid/slick-default-theme.css';
+@import 'node_modules/slickgrid/css/smoothness/jquery-ui-1.11.3.custom.css';

@import '../vendor/backgrid/backgrid.css';
@import '../vendor/backgrid/backgrid-select-all.css';
--- a/web/pgadmin/tools/sqleditor/static/img/commit.svg
+++ b/web/pgadmin/tools/sqleditor/static/img/commit.svg
--- a/web/pgadmin/tools/schema_diff/static/img/compare.svg
+++ b/web/pgadmin/tools/schema_diff/static/img/compare.svg
--- a/web/pgadmin/tools/sqleditor/static/img/connect.svg
+++ b/web/pgadmin/tools/sqleditor/static/img/connect.svg
--- a/web/pgadmin/tools/sqleditor/static/img/disconnect.svg
+++ b/web/pgadmin/tools/sqleditor/static/img/disconnect.svg
--- a/web/pgadmin/static/img/fonticon/drop_cascade.svg
+++ b/web/pgadmin/static/img/fonticon/drop_cascade.svg
--- a/web/pgadmin/static/img/fonticon/query_tool.svg
+++ b/web/pgadmin/static/img/fonticon/query_tool.svg
--- a/web/pgadmin/tools/sqleditor/static/img/rollback.svg
+++ b/web/pgadmin/tools/sqleditor/static/img/rollback.svg
--- a/web/pgadmin/static/img/fonticon/row_filter.svg
+++ b/web/pgadmin/static/img/fonticon/row_filter.svg
--- a/web/pgadmin/tools/sqleditor/static/img/save_data_changes.svg
+++ b/web/pgadmin/tools/sqleditor/static/img/save_data_changes.svg
--- a/web/pgadmin/misc/bgprocess/static/img/storage_manager.svg
+++ b/web/pgadmin/misc/bgprocess/static/img/storage_manager.svg
--- a/web/pgadmin/tools/sqleditor/static/img/view_data.svg
+++ b/web/pgadmin/tools/sqleditor/static/img/view_data.svg
--- a/web/pgadmin/static/js/browser/server_groups/servers/model_validation.js
+++ b/web/pgadmin/static/js/browser/server_groups/servers/model_validation.js
@ -113,11 +113,15 @@ export class ModelValidation {

  checkForValidIp(ipAddress, msg) {
    if (ipAddress) {
-      const isIpv6Address = new Address6(ipAddress).isValid();
-      const isIpv4Address = new Address4(ipAddress).isValid();
-      if (!isIpv4Address && !isIpv6Address) {
-        this.err['hostaddr'] = msg;
-        this.errmsg = msg;
+      try {
+        new Address4(ipAddress);
+      } catch(e) {
+        try {
+          new Address6(ipAddress);
+        } catch(e) {
+          this.err['hostaddr'] = msg;
+          this.errmsg = msg;
+        }
      }
    } else {
      this.model.errorModel.unset('hostaddr');
--- a/web/pgadmin/static/js/pgadmin.fonticon.js
+++ b/web/pgadmin/static/js/pgadmin.fonticon.js
@ -0,0 +1,11 @@
+module.exports = {
+  'files': [
+    '../img/fonticon/*.svg',
+  ],
+  'css': false,
+  'fontName': 'pgfonticon',
+  'classPrefix': 'icon-',
+  'baseSelector': '.pg-font-icon',
+  'types': ['eot', 'woff', 'woff2', 'ttf', 'svg'],
+  'embed': true,
+};
--- a/web/pgadmin/static/js/sqleditor/history/query_sources.js
+++ b/web/pgadmin/static/js/sqleditor/history/query_sources.js
@ -21,15 +21,15 @@ export const QuerySources = {
    ICON_CSS_CLASS: 'fa fa-list-alt',
  },
  COMMIT: {
-    ICON_CSS_CLASS: 'icon-commit',
+    ICON_CSS_CLASS: 'pg-font-icon icon-commit',
  },
  ROLLBACK: {
-    ICON_CSS_CLASS: 'icon-rollback',
+    ICON_CSS_CLASS: 'pg-font-icon icon-rollback',
  },
  SAVE_DATA: {
-    ICON_CSS_CLASS: 'icon-save-data-changes',
+    ICON_CSS_CLASS: 'pg-font-icon icon-save_data_changes',
  },
  VIEW_DATA: {
-    ICON_CSS_CLASS: 'icon-view-data',
+    ICON_CSS_CLASS: 'pg-font-icon picon-view_data',
  },
 };
--- a/web/pgadmin/static/js/sqleditor_utils.js
+++ b/web/pgadmin/static/js/sqleditor_utils.js
@ -135,7 +135,7 @@ define(['jquery', 'underscore', 'sources/gettext', 'sources/url_for'],
                if(sqlEditorUtils.previousStatus != status &&
                        !$status_el.hasClass('fa-query_tool_connected')) {
                  $status_el.removeClass()
-                    .addClass('pg-font-icon icon-query-tool-connected');
+                    .addClass('pg-font-icon icon-connected');
                  is_status_changed = true;
                }
              }
@ -153,10 +153,10 @@ define(['jquery', 'underscore', 'sources/gettext', 'sources/url_for'],
              msg = gettext('An unexpected error occurred - ' +
                          'ensure you are logged into the application.');
              $el.attr('data-content', msg);
-              if(!$status_el.hasClass('icon-query-tool-disconnected')) {
+              if(!$status_el.hasClass('icon-disconnected')) {
                $el.popover('hide');
                $status_el.removeClass()
-                  .addClass('pg-icon-font icon-query-tool-disconnected');
+                  .addClass('pg-icon-font icon-disconnected');
              }
            }
          })
@ -173,10 +173,10 @@ define(['jquery', 'underscore', 'sources/gettext', 'sources/url_for'],
            // Set bootstrap popover
            $el.attr('data-content', msg);
            // Add error class
-            if(!$status_el.hasClass('icon-query-tool-disconnected')) {
+            if(!$status_el.hasClass('icon-disconnected')) {
              $el.popover('hide');
              $status_el.removeClass()
-                .addClass('pg-font-icon icon-query-tool-disconnected');
+                .addClass('pg-font-icon icon-disconnected');
            }
          });
      },
--- a/web/pgadmin/static/scss/_pgadmin.style.scss
+++ b/web/pgadmin/static/scss/_pgadmin.style.scss
@ -1064,11 +1064,6 @@ table.table-empty-rows{

 .pg-font-icon {
  &:before {
-    font-style: normal;
-    font-weight: normal;
-    font-stretch: normal;
-    font-size: 100%;
-    line-height: 1;
    vertical-align: middle;
  }
 }
--- a/web/pgadmin/static/scss/_tippy.overrides.scss
+++ b/web/pgadmin/static/scss/_tippy.overrides.scss
@ -1,4 +1,4 @@
-@import "~node_modules/tippy.js/dist/tippy.css";
+@import "node_modules/tippy.js/dist/tippy.css";

 .tippy-box {
  background-color: $popover-bg;
--- a/web/pgadmin/static/scss/pgadmin.scss
+++ b/web/pgadmin/static/scss/pgadmin.scss
@ -12,7 +12,7 @@ $theme-colors: (
  --border-color: #{$border-color};
 }

-@import "node_modules/bootstrap/scss/bootstrap";
+@import "bootstrap/scss/bootstrap";
@import 'webcabin.pgadmin';
@import 'bootstrap.overrides';
@import 'backgrid.overrides';
--- a/web/pgadmin/templates/base.html
+++ b/web/pgadmin/templates/base.html
@ -26,16 +26,14 @@
     <!--View specified stylesheets-->
    {% block css_link %}{% endblock %}

-    <script>
+    <script type="application/javascript">
        /* This is used to change publicPath of webpack at runtime */
-        window.getChunkURL = function() {
-            return "{{ url_for('static', filename='js') }}/generated/";
-        };
+        window.resourceBasePath = "{{ url_for('static', filename='js') }}/generated/";
    </script>
    <!-- Base template scripts -->
-    <script type="text/javascript"
+    <script type="application/javascript"
            src="{{ url_for('static', filename='vendor/require/require.js' if config.DEBUG else 'vendor/require/require.min.js') }}"></script>
-    <script type="text/javascript">
+    <script type="application/javascript">
            require.config({
                baseUrl: '',
 {% if config.APP_VERSION_PARAM is not none and config.APP_VERSION_PARAM != '' %}
@ -59,9 +57,9 @@
    </script>

    <!-- View specified scripts -->
-    <script type="text/javascript" src="{{ url_for('static', filename='js/generated/vendor.main.js') }}" ></script>
-    <script type="text/javascript" src="{{ url_for('static', filename='js/generated/vendor.others.js') }}" ></script>
-    <script type="text/javascript" src="{{ url_for('static', filename='js/generated/pgadmin_commons.js') }}" ></script>
+    <script type="application/javascript" src="{{ url_for('static', filename='js/generated/vendor.main.js') }}" ></script>
+    <script type="application/javascript" src="{{ url_for('static', filename='js/generated/vendor.others.js') }}" ></script>
+    <script type="application/javascript" src="{{ url_for('static', filename='js/generated/pgadmin_commons.js') }}" ></script>

 </head>
 <body>
@ -71,7 +69,7 @@
 <![endif]-->

 {% block body %}{% endblock %}
-<script>
+<script type="application/javascript">
            {% block init_script %}{% endblock %}

 </script>
--- a/web/pgadmin/tools/datagrid/static/js/datagrid.js
+++ b/web/pgadmin/tools/datagrid/static/js/datagrid.js
@ -112,7 +112,7 @@ define('pgadmin.datagrid', [
          enable: query_tool_menu_enabled,
          priority: 1,
          label: gettext('Query Tool'),
-          icon: 'pg-font-icon icon-query-tool',
+          icon: 'pg-font-icon icon-query_tool',
          data:{
            data_disabled: gettext('Please select a database from the browser tree to access Query Tool.'),
          },
--- a/web/pgadmin/tools/datagrid/static/js/datagrid_panel_title.js
+++ b/web/pgadmin/tools/datagrid/static/js/datagrid_panel_title.js
@ -64,11 +64,11 @@ export function setQueryToolDockerTitle(panel, is_query_tool, panel_title, is_fi
  else if (is_query_tool == 'false' || is_query_tool == false) {
    // Edit grid titles
    panel_tooltip = gettext('View/Edit Data - ') + panel_title;
-    panel_icon = 'pg-font-icon icon-view-data';
+    panel_icon = 'pg-font-icon icon-view_data';
  } else {
    // Query tool titles
    panel_tooltip = gettext('Query Tool - ') + panel_title;
-    panel_icon = 'pg-font-icon icon-query-tool';
+    panel_icon = 'pg-font-icon icon-query_tool';
  }

  panel.title('<span title="'+ _.escape(panel_tooltip) +'">'+ _.escape(panel_title) +'</span>');
--- a/web/pgadmin/tools/datagrid/templates/datagrid/index.html
+++ b/web/pgadmin/tools/datagrid/templates/datagrid/index.html
@ -22,7 +22,7 @@
                        title=""
                        aria-label="show query tool"
                        tabindex="0">
-                    <i class="pg-font-icon icon-query-tool" aria-hidden="true" role="img"></i>
+                    <i class="pg-font-icon icon-query_tool" aria-hidden="true" role="img"></i>
                </button>
            </div>
            <div class="btn-group mr-1" role="group" aria-label="">
@ -60,7 +60,7 @@
                        title=""
                        accesskey=""
                        tabindex="0" disabled>
-                    <i class="pg-font-icon icon-save-data-changes sql-icon-lg" aria-hidden="true" role="img"></i>
+                    <i class="pg-font-icon icon-save_data_changes sql-icon-lg" aria-hidden="true" role="img"></i>
                </button>
            </div>
            <div class="btn-group mr-1" role="group" aria-label="">
@ -416,7 +416,7 @@
                 data-panel-visible="visible"
                 accesskey=""
                 tabindex="0">
-                <i class="pg-font-icon icon-query-tool-disconnected obtaining-conn d-flex m-auto" aria-hidden="true"
+                <i class="pg-font-icon icon-disconnected obtaining-conn d-flex m-auto" aria-hidden="true"
                    title="" role="img">
                </i>
            </div>
--- a/web/pgadmin/tools/erd/static/js/erd_tool/ui_components/ConnectionBar.jsx
+++ b/web/pgadmin/tools/erd/static/js/erd_tool/ui_components/ConnectionBar.jsx
@ -30,8 +30,8 @@ export default function ConnectionBar({statusId, status, bgcolor, fgcolor, title
        data-panel-visible="visible"
        tabIndex="0">
        <span className={'pg-font-icon d-flex m-auto '
-            + (status == STATUS.CONNECTED ? 'icon-query-tool-connected' : '')
-            + (status == (STATUS.DISCONNECTED || STATUS.FAILED) ? 'icon-query-tool-disconnected ' : '')
+            + (status == STATUS.CONNECTED ? 'icon-connected' : '')
+            + (status == (STATUS.DISCONNECTED || STATUS.FAILED) ? 'icon-disconnected ' : '')
            + (status == STATUS.CONNECTING ? 'obtaining-conn' : '')}
        aria-hidden="true" title="" role="img">
        </span>
--- a/web/pgadmin/tools/schema_diff/static/css/schema_diff.css
+++ b/web/pgadmin/tools/schema_diff/static/css/schema_diff.css
@ -1,5 +1,4 @@
-.icon-schema-diff:before {
-  font-icon: url('../img/compare.svg');
+.icon-compare:before {
  font-size: 1.3em !important;
 }

--- a/web/pgadmin/tools/schema_diff/static/js/schema_diff.backform.js
+++ b/web/pgadmin/tools/schema_diff/static/js/schema_diff.backform.js
@ -59,7 +59,7 @@ let SchemaDiffSqlControl =
      Backform.TextareaControl.prototype.initialize.apply(this, arguments);
      this.sqlCtrl = null;

-      _.bindAll(this, 'onFocus', 'onBlur', 'refreshTextArea', 'copyData',);
+      _.bindAll(this, 'onFocus', 'onBlur', 'refreshTextArea', 'copyData');
    },
    render: function() {
      let obj = Backform.SqlFieldControl.prototype.render.apply(this, arguments);
@ -317,7 +317,7 @@ let SchemaDiffHeaderView = Backform.Form.extend({
      <div class="col-6 target row"></div>
      <div class="col-5 target-buttons">
          <div class="action-btns d-flex">
-              <button class="btn btn-primary mr-auto"><span class="pg-font-icon icon-schema-diff sql-icon-lg"></span>&nbsp;` + gettext('Compare') + `</button>
+              <button class="btn btn-primary mr-auto"><span class="pg-font-icon icon-compare sql-icon-lg"></span>&nbsp;` + gettext('Compare') + `</button>
              <button id="generate-script" class="btn btn-primary-icon mr-1" disabled><i class="fa fa-file-code sql-icon-lg"></i>&nbsp;` + gettext('Generate Script') + `</button>
              <div class="btn-group mr-1" role="group" aria-label="">
                <button id="btn-filter" type="button" class="btn btn-primary-icon"
--- a/web/pgadmin/tools/schema_diff/static/js/schema_diff.js
+++ b/web/pgadmin/tools/schema_diff/static/js/schema_diff.js
@ -134,7 +134,7 @@ define('pgadmin.schemadiff', [

        // Set panel title and icon
        schemaDiffPanel.title('<span title="'+panel_tooltip+'">'+panel_title+'</span>');
-        schemaDiffPanel.icon('pg-font-icon icon-schema-diff');
+        schemaDiffPanel.icon('pg-font-icon icon-compare');
        schemaDiffPanel.focus();

        var openSchemaDiffURL = function(j) {
--- a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
+++ b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
@ -251,30 +251,6 @@ input.editor-checkbox:focus {
  width: 40px;
 }

-.icon-query-tool-connected:before {
-  font-icon: url('../img/connect.svg');
-}
-
-.icon-query-tool-disconnected:before {
-  font-icon: url('../img/disconnect.svg');
-}
-
-.icon-commit:before {
-  font-icon: url('../img/commit.svg');
-}
-
-.icon-rollback:before {
-  font-icon: url('../img/rollback.svg');
-}
-
-.icon-save-data-changes:before {
-  font-icon: url('../img/save_data_changes.svg');
-}
-
-.icon-view-data:before {
-  font-icon: url('../img/view_data.svg');
-}
-
 .ajs-body .warn-header {
  font-size: 13px;
  font-weight: bold;
--- a/web/pgadmin/tools/sqleditor/static/js/sqleditor.js
+++ b/web/pgadmin/tools/sqleditor/static/js/sqleditor.js
@ -6,6 +6,10 @@
 // This software is released under the PostgreSQL Licence
 //
 //////////////////////////////////////////////////////////////
+/* This is used to change publicPath of webpack at runtime for loading chunks */
+/* eslint-disable */
+__webpack_public_path__ = window.resourceBasePath;
+/* eslint-enable */

 import {launchDataGrid} from 'tools/datagrid/static/js/show_query_tool';

--- a/web/regression/javascript/browser/activity_spec.js
+++ b/web/regression/javascript/browser/activity_spec.js
@ -7,9 +7,9 @@
 //
 //////////////////////////////////////////////////////////////

+import pgAdmin from 'sources/pgadmin';
 import {pgBrowser} from 'pgadmin.browser.activity';
 import { getEpoch } from 'sources/utils';
-import pgAdmin from 'sources/pgadmin';

 describe('For Activity', function(){
  beforeEach(function(){
--- a/web/regression/javascript/search_objects/search_objects_dialog_spec.js
+++ b/web/regression/javascript/search_objects/search_objects_dialog_spec.js
@ -10,7 +10,6 @@ import SearchObjectsDialog from 'tools/search_objects/static/js/search_objects_d
 import {TreeFake} from '../tree/tree_fake';
 import MockAdapter from 'axios-mock-adapter';
 import axios from 'axios/index';
-import {pgBrowser} from 'pgadmin.browser.preferences';

 const context = describe;

@ -28,6 +27,7 @@ describe('SearchObjectsDialog', () => {
  let soDialog;
  let jquerySpy;
  let alertifySpy;
+  let pgBrowser = {};

  beforeEach(() => {
    pgBrowser.preferences_cache = dummy_cache;
@ -124,6 +124,10 @@ describe('SearchObjectsDialog', () => {
      );

      pgBrowser.get_preference = jasmine.createSpy('get_preferences');
+      pgBrowser.get_preferences_for_module =
+        jasmine.createSpy('get_preferences_for_module').and.returnValue({
+          [dummy_cache[0]['name']]: dummy_cache[0]['value'],
+        });
    });

    afterEach(() => {
--- a/web/webpack.config.js
+++ b/web/webpack.config.js
@ -17,18 +17,16 @@ const sourceDir = __dirname + '/pgadmin/static';
 // and other util function used in CommonsChunksPlugin.
 const webpackShimConfig = require('./webpack.shim');
 const PRODUCTION = process.env.NODE_ENV === 'production';
-const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const extractStyle = new MiniCssExtractPlugin({
  filename: '[name].css',
  chunkFilename: '[name].css',
-  allChunks: true,
 });
-const WebpackRequireFromPlugin = require('webpack-require-from');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const CopyPlugin = require('copy-webpack-plugin');
-const IconfontWebpackPlugin = require('iconfont-webpack-plugin');
+const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

 const envType = PRODUCTION ? 'production': 'development';
 const devToolVal = PRODUCTION ? false : 'eval';
@ -51,18 +49,6 @@ const providePlugin = new webpack.ProvidePlugin({
  'window.moment':'moment',
 });

-// Optimize CSS Assets by removing comments while bundling
-const optimizeAssetsPlugin = new OptimizeCssAssetsPlugin({
-  assetNameRegExp: /\.css$/g,
-  cssProcessor: require('cssnano'),
-  cssProcessorOptions: {
-    discardComments: {
-      removeAll: true,
-    },
-  },
-  canPrint: true,
-});
-
 // Helps in debugging each single file, it extracts the module files
 // from bundle so that they are accessible by search in Chrome's sources panel.
 // Reference: https://webpack.js.org/plugins/source-map-dev-tool-plugin/#components/sidebar/sidebar.jsx
@ -72,27 +58,35 @@ const sourceMapDevToolPlugin = new webpack.SourceMapDevToolPlugin({
  columns: false,
 });

-// Supress errors while compiling as the getChunkURL method will be available
-// on runtime. window.getChunkURL is defined in base.html
-const webpackRequireFrom = new WebpackRequireFromPlugin({
-  methodName: 'getChunkURL',
-  supressErrors: true,
-});
-
 // can be enabled using bundle:analyze
 const bundleAnalyzer = new BundleAnalyzerPlugin({
  analyzerMode: analyzerMode,
  reportFilename: 'analyze_report.html',
 });

-const copyFiles = new CopyPlugin([
-  pgadminThemesJson,
-  {
-    from: './pgadmin/static/scss/resources/**/*.png',
-    to: outputPath + '/img',
-    flatten: true,
+const copyFiles = new CopyPlugin({
+  patterns: [
+    pgadminThemesJson,
+    {
+      from: './pgadmin/static/scss/resources/**/*.png',
+      to: outputPath + '/img',
+    },
+  ],
+});
+
+const imageMinimizer = new ImageMinimizerPlugin({
+  test: /\.(jpe?g|png|gif|svg)$/i,
+  minimizerOptions: {
+    // Lossless optimization with custom option
+    // Feel free to experiment with options for better result for you
+    plugins: [
+      ['gifsicle', { interlaced: true }],
+      ['mozjpeg', { progressive: true }],
+      ['optipng', { optimizationLevel: 7 }],
+      ['pngquant', {quality: [0.75, .9], speed: 3}],
+    ],
  },
-]);
+});

 function cssToBeSkiped(curr_path) {
  /** Skip all templates **/
@ -148,6 +142,7 @@ for(let i=0; i<webpackShimConfig.css_bundle_include.length; i++) {

 pushModulesStyles(path.join(__dirname,'./pgadmin'), pgadminScssStyles, '.scss');
 pushModulesStyles(path.join(__dirname,'./pgadmin'), pgadminCssStyles, '.css');
+pgadminCssStyles.push(path.join(__dirname,'./pgadmin/static/js/pgadmin.fonticon.js'));

 /* Get all the themes */

@ -166,7 +161,7 @@ fs.readdirSync(all_themes_dir).map(function(curr_dir) {

  if(stats.isDirectory()) {
    /* Theme directory found */
-    let cssfile = 'pgadmin.theme.'+curr_dir;
+    let cssfile = 'pure|pgadmin.theme.'+curr_dir;

    let disp_name = curr_dir;

@ -184,42 +179,22 @@ fs.writeFileSync(pgadminThemesJson, JSON.stringify(pgadminThemes, null, 4));
 var themeCssRules = function(theme_name) {
  return [{
    test: /\.(jpe?g|png|gif|svg)$/i,
-    loaders: [{
-      loader: 'url-loader',
-      options: {
-        emitFile: true,
-        name: 'img/[name].[ext]',
-        limit: 4096,
+    type: 'asset',
+    parser: {
+      dataUrlCondition: {
+        maxSize: 4 * 1024, // 4kb
      },
-    }, {
-      loader: 'image-webpack-loader',
-      query: {
-        bypassOnDebug: true,
-        mozjpeg: {
-          progressive: true,
-        },
-        gifsicle: {
-          interlaced: false,
-        },
-        optipng: {
-          optimizationLevel: 7,
-        },
-        pngquant: {
-          quality: '75-90',
-          speed: 3,
-        },
-      },
-    }],
+    },
+    generator: {
+      filename: 'img/[name].[ext]',
+    },
    exclude: /vendor/,
  }, {
    test: /\.(eot|svg|ttf|woff|woff2)$/,
-    loaders: [{
-      loader: 'file-loader',
-      options: {
-        name: 'fonts/[name].[ext]',
-        emitFile: true,
-      },
-    }],
+    type: 'asset/resource',
+    generator: {
+      filename: 'fonts/[name].[ext]',
+    },
    include: [
      /node_modules/,
      path.join(sourceDir, '/css/'),
@ -230,15 +205,21 @@ var themeCssRules = function(theme_name) {
  }, {
    test: /\.scss$/,
    use: [
-      {loader: MiniCssExtractPlugin.loader},
+      {
+        loader: MiniCssExtractPlugin.loader,
+        options: {
+          publicPath: '',
+        },
+      },
      {loader: 'css-loader'},
      {
        loader: 'postcss-loader',
        options: {
-          plugins: (loader) => [
-            require('autoprefixer')(),
-            new IconfontWebpackPlugin(loader),
-          ],
+          postcssOptions: () =>({
+            plugins: [
+              require('autoprefixer')(),
+            ],
+          }),
        },
      },
      {loader: 'sass-loader'},
@ -261,15 +242,21 @@ var themeCssRules = function(theme_name) {
  }, {
    test: /\.css$/,
    use: [
-      MiniCssExtractPlugin.loader,
+      {
+        loader: MiniCssExtractPlugin.loader,
+        options: {
+          publicPath: '',
+        },
+      },
      'css-loader',
      {
        loader: 'postcss-loader',
        options: {
-          plugins: (loader) => [
-            require('autoprefixer')(),
-            new IconfontWebpackPlugin(loader),
-          ],
+          postcssOptions: () =>({
+            plugins: [
+              require('autoprefixer')(),
+            ],
+          }),
        },
      },
    ],
@ -295,6 +282,7 @@ var getThemeWebpackConfig = function(theme_name) {
      path: outputPath,
      filename: '[name].js',
      libraryExport: 'default',
+      publicPath: '',
    },
    // Templates files which contains python code needs to load dynamically
    // Such files specified in externals are loaded at first and defined in
@ -307,6 +295,21 @@ var getThemeWebpackConfig = function(theme_name) {
      //
      rules: themeCssRules(theme_name),
    },
+    optimization: {
+      minimize: true,
+      minimizer: [
+        new CssMinimizerPlugin({
+          minimizerOptions: {
+            preset: [
+              'default',
+              {
+                discardComments: { removeAll: true },
+              },
+            ],
+          }
+        }),
+      ],
+    },
    resolve: {
      alias: webpackShimConfig.resolveAlias,
      modules: ['node_modules', '.'],
@ -326,7 +329,6 @@ var getThemeWebpackConfig = function(theme_name) {
    // Ref:https://webpack.js.org/concepts/plugins/#components/sidebar/sidebar.jsx
    plugins: PRODUCTION ? [
      extractStyle,
-      optimizeAssetsPlugin,
      sourceMapDevToolPlugin,
    ]: [
      extractStyle,
@ -343,7 +345,7 @@ Object.keys(pgadminThemes).map((theme_name)=>{
 module.exports = [{
  mode: envType,
  devtool: devToolVal,
-  stats: { children: false },
+  stats: { children: false, builtAt: true, chunks: true, timings: true },
  // The base directory, an absolute path, for resolving entry points and loaders
  // from configuration.
  context: __dirname,
@ -369,6 +371,7 @@ module.exports = [{
    filename: '[name].js',
    chunkFilename: '[name].chunk.js',
    libraryExport: 'default',
+    publicPath: '',
  },
  // Templates files which contains python code needs to load dynamically
  // Such files specified in externals are loaded at first and defined in
@ -381,10 +384,22 @@ module.exports = [{
    //
    // imports-loader: it adds dependent modules(use:imports-loader?module1)
    // at the beginning of module it is dependency of like:
-    // var jQuery = require('jquery'); var browser = require('pgadmin.browser')
+    // var jQuery = require('jquery'); var browser = require('pure|pgadmin.browser')
    // It solves number of problems
    // Ref: http:/github.com/webpack-contrib/imports-loader/
    rules: [{
+      test: /\.fonticon\.js/,
+      use: [
+        MiniCssExtractPlugin.loader,
+        {
+          loader: 'css-loader',
+          options: {
+            url: false,
+          },
+        },
+        'webfonts-loader',
+      ],
+    },{
      test: /\.jsx?$/,
      exclude: [/node_modules/, /vendor/],
      use: {
@ -410,103 +425,118 @@ module.exports = [{
      test: /\.js/,
      exclude: [/external_table/],
      loader: 'shim-loader',
-      query: webpackShimConfig,
+      options: webpackShimConfig,
      include: path.join(__dirname, '/pgadmin/browser'),
    }, {
      // imports-loader: it adds dependent modules(use:imports-loader?module1)
      // at the beginning of module it is dependency of like:
-      // var jQuery = require('jquery'); var browser = require('pgadmin.browser')
+      // var jQuery = require('jquery'); var browser = require('pure|pgadmin.browser')
      // It solves number of problems
      // Ref: http:/github.com/webpack-contrib/imports-loader/
      test: require.resolve('./pgadmin/tools/datagrid/static/js/datagrid'),
      use: {
-        loader: 'imports-loader?' +
-        'pgadmin.dashboard' +
-        ',pgadmin.browser.quick_search' +
-        ',pgadmin.tools.user_management' +
-        ',pgadmin.browser.object_statistics' +
-        ',pgadmin.browser.dependencies' +
-        ',pgadmin.browser.dependents' +
-        ',pgadmin.browser.object_sql' +
-        ',pgadmin.browser.bgprocess' +
-        ',pgadmin.node.server_group' +
-        ',pgadmin.node.server' +
-        ',pgadmin.node.database' +
-        ',pgadmin.node.role' +
-        ',pgadmin.node.cast' +
-        ',pgadmin.node.publication' +
-        ',pgadmin.node.subscription' +
-        ',pgadmin.node.tablespace' +
-        ',pgadmin.node.resource_group' +
-        ',pgadmin.node.event_trigger' +
-        ',pgadmin.node.extension' +
-        ',pgadmin.node.language' +
-        ',pgadmin.node.foreign_data_wrapper' +
-        ',pgadmin.node.foreign_server' +
-        ',pgadmin.node.user_mapping' +
-        ',pgadmin.node.schema' +
-        ',pgadmin.node.catalog' +
-        ',pgadmin.node.catalog_object' +
-        ',pgadmin.node.collation' +
-        ',pgadmin.node.domain' +
-        ',pgadmin.node.domain_constraints' +
-        ',pgadmin.node.foreign_table' +
-        ',pgadmin.node.fts_configuration' +
-        ',pgadmin.node.fts_dictionary' +
-        ',pgadmin.node.fts_parser' +
-        ',pgadmin.node.fts_template' +
-        ',pgadmin.node.function' +
-        ',pgadmin.node.procedure' +
-        ',pgadmin.node.edbfunc' +
-        ',pgadmin.node.edbproc' +
-        ',pgadmin.node.edbvar' +
-        ',pgadmin.node.edbvar' +
-        ',pgadmin.node.trigger_function' +
-        ',pgadmin.node.package' +
-        ',pgadmin.node.sequence' +
-        ',pgadmin.node.synonym' +
-        ',pgadmin.node.type' +
-        ',pgadmin.node.rule' +
-        ',pgadmin.node.index' +
-        ',pgadmin.node.row_security_policy' +
-        ',pgadmin.node.trigger' +
-        ',pgadmin.node.catalog_object_column' +
-        ',pgadmin.node.view' +
-        ',pgadmin.node.mview' +
-        ',pgadmin.node.table' +
-        ',pgadmin.node.partition' +
-        ',pgadmin.node.compound_trigger',
+        loader: 'imports-loader',
+        options: {
+          type: 'commonjs',
+          imports: [
+            'pure|pgadmin.dashboard',
+            'pure|pgadmin.browser.quick_search',
+            'pure|pgadmin.tools.user_management',
+            'pure|pgadmin.browser.object_statistics',
+            'pure|pgadmin.browser.dependencies',
+            'pure|pgadmin.browser.dependents',
+            'pure|pgadmin.browser.object_sql',
+            'pure|pgadmin.browser.bgprocess',
+            'pure|pgadmin.node.server_group',
+            'pure|pgadmin.node.server',
+            'pure|pgadmin.node.database',
+            'pure|pgadmin.node.role',
+            'pure|pgadmin.node.cast',
+            'pure|pgadmin.node.publication',
+            'pure|pgadmin.node.subscription',
+            'pure|pgadmin.node.tablespace',
+            'pure|pgadmin.node.resource_group',
+            'pure|pgadmin.node.event_trigger',
+            'pure|pgadmin.node.extension',
+            'pure|pgadmin.node.language',
+            'pure|pgadmin.node.foreign_data_wrapper',
+            'pure|pgadmin.node.foreign_server',
+            'pure|pgadmin.node.user_mapping',
+            'pure|pgadmin.node.schema',
+            'pure|pgadmin.node.catalog',
+            'pure|pgadmin.node.catalog_object',
+            'pure|pgadmin.node.collation',
+            'pure|pgadmin.node.domain',
+            'pure|pgadmin.node.domain_constraints',
+            'pure|pgadmin.node.foreign_table',
+            'pure|pgadmin.node.fts_configuration',
+            'pure|pgadmin.node.fts_dictionary',
+            'pure|pgadmin.node.fts_parser',
+            'pure|pgadmin.node.fts_template',
+            'pure|pgadmin.node.function',
+            'pure|pgadmin.node.procedure',
+            'pure|pgadmin.node.edbfunc',
+            'pure|pgadmin.node.edbproc',
+            'pure|pgadmin.node.edbvar',
+            'pure|pgadmin.node.trigger_function',
+            'pure|pgadmin.node.package',
+            'pure|pgadmin.node.sequence',
+            'pure|pgadmin.node.synonym',
+            'pure|pgadmin.node.type',
+            'pure|pgadmin.node.rule',
+            'pure|pgadmin.node.index',
+            'pure|pgadmin.node.row_security_policy',
+            'pure|pgadmin.node.trigger',
+            'pure|pgadmin.node.catalog_object_column',
+            'pure|pgadmin.node.view',
+            'pure|pgadmin.node.mview',
+            'pure|pgadmin.node.table',
+            'pure|pgadmin.node.partition',
+            'pure|pgadmin.node.compound_trigger',
+          ],
+        },
      },
    }, {
      test: require.resolve('./node_modules/acitree/js/jquery.aciTree.min'),
      use: {
-        loader: 'imports-loader?this=>window',
+        loader: 'imports-loader',
+        options: {
+          wrapper: 'window',
+        },
      },
    }, {
      test: require.resolve('./node_modules/acitree/js/jquery.aciPlugin.min'),
      use: {
-        loader: 'imports-loader?this=>window',
+        loader: 'imports-loader',
+        options: {
+          wrapper: 'window',
+        },
      },
    }, {
      test: require.resolve('./pgadmin/static/bundle/browser'),
      use: {
-        loader: 'imports-loader?' +
-        'pgadmin.about' +
-        ',pgadmin.preferences' +
-        ',pgadmin.file_manager' +
-        ',pgadmin.settings' +
-        ',pgadmin.tools.backup' +
-        ',pgadmin.tools.restore' +
-        ',pgadmin.tools.grant_wizard' +
-        ',pgadmin.tools.maintenance' +
-        ',pgadmin.tools.import_export' +
-        ',pgadmin.tools.debugger.controller' +
-        ',pgadmin.tools.debugger.direct' +
-        ',pgadmin.node.pga_job' +
-        ',pgadmin.tools.schema_diff' +
-        ',pgadmin.tools.storage_manager' +
-        ',pgadmin.tools.search_objects' +
-        ',pgadmin.tools.erd_module',
+        loader: 'imports-loader',
+        options: {
+          type: 'commonjs',
+          imports: [
+            'pure|pgadmin.about',
+            'pure|pgadmin.preferences',
+            'pure|pgadmin.file_manager',
+            'pure|pgadmin.settings',
+            'pure|pgadmin.tools.backup',
+            'pure|pgadmin.tools.restore',
+            'pure|pgadmin.tools.grant_wizard',
+            'pure|pgadmin.tools.maintenance',
+            'pure|pgadmin.tools.import_export',
+            'pure|pgadmin.tools.debugger.controller',
+            'pure|pgadmin.tools.debugger.direct',
+            'pure|pgadmin.node.pga_job',
+            'pure|pgadmin.tools.schema_diff',
+            'pure|pgadmin.tools.storage_manager',
+            'pure|pgadmin.tools.search_objects',
+            'pure|pgadmin.tools.erd_module',
+          ],
+        },
      },
    }, {
      test: require.resolve('snapsvg'),
@ -536,42 +566,14 @@ module.exports = [{
    minimizer: [
      new TerserPlugin({
        parallel: true,
-        cache: true,
+        extractComments: true,
        terserOptions: {
          compress: true,
-          extractComments: true,
-          output: {
-            comments: false,
-          },
        },
      }),
    ],
    splitChunks: {
      cacheGroups: {
-        slickgrid: {
-          name: 'slickgrid',
-          filename: 'slickgrid.js',
-          chunks: 'all',
-          reuseExistingChunk: true,
-          priority: 9,
-          minChunks: 2,
-          enforce: true,
-          test(module) {
-            return webpackShimConfig.matchModules(module, 'slickgrid');
-          },
-        },
-        codemirror: {
-          name: 'codemirror',
-          filename: 'codemirror.js',
-          chunks: 'all',
-          reuseExistingChunk: true,
-          priority: 8,
-          minChunks: 2,
-          enforce: true,
-          test(module) {
-            return webpackShimConfig.matchModules(module, 'codemirror');
-          },
-        },
        vendor_main: {
          name: 'vendor_main',
          filename: 'vendor.main.js',
@ -626,16 +628,14 @@ module.exports = [{
  plugins: PRODUCTION ? [
    extractStyle,
    providePlugin,
-    optimizeAssetsPlugin,
    sourceMapDevToolPlugin,
-    webpackRequireFrom,
    bundleAnalyzer,
    copyFiles,
+    imageMinimizer,
  ]: [
    extractStyle,
    providePlugin,
    sourceMapDevToolPlugin,
-    webpackRequireFrom,
    copyFiles,
  ],
 }].concat(pgadminThemesWebpack);
--- a/web/webpack.shim.js
+++ b/web/webpack.shim.js
@ -137,13 +137,13 @@ var webpackShimConfig = {
    'alertify': path.join(__dirname, './node_modules/alertifyjs/build/alertify'),
    'moment': path.join(__dirname, './node_modules/moment/moment'),
    'jquery.event.drag': path.join(__dirname, './node_modules/slickgrid/lib/jquery.event.drag-2.3.0'),
-    'jquery.ui': path.join(__dirname, './node_modules/slickgrid/lib/jquery-ui-1.11.3'),
+    'jquery.ui': path.join(__dirname, './node_modules/slickgrid/lib/jquery-ui-1.11.3.min'),
    'jqueryui.position': path.join(__dirname, './node_modules/jquery-contextmenu/dist/jquery.ui.position'),
    'jquery.contextmenu': path.join(__dirname, './node_modules/jquery-contextmenu/dist/jquery.contextMenu'),
    'dropzone': path.join(__dirname, './node_modules/dropzone/dist/dropzone'),
    'bignumber': path.join(__dirname, './node_modules/bignumber.js/bignumber'),
    'json-bignumber': path.join(__dirname, './node_modules/json-bignumber/dist/JSONBigNumber.min'),
-    'snap.svg': path.join(__dirname, './node_modules/snapsvg/dist/snap.svg-min'),
+    'snap.svg': path.join(__dirname, './node_modules/snapsvg-cjs/dist/snap.svg-cjs'),
    'color-picker': path.join(__dirname, './node_modules/@simonwep/pickr/dist/pickr.es5.min'),
    'mousetrap': path.join(__dirname, './node_modules/mousetrap'),
    'tablesorter-metric': path.join(__dirname, './node_modules/tablesorter/dist/js/parsers/parser-metric.min'),
@ -164,7 +164,7 @@ var webpackShimConfig = {
    'backform': path.join(__dirname, './pgadmin/static/vendor/backform/backform'),
    'backgrid': path.join(__dirname, './pgadmin/static/vendor/backgrid/backgrid'),
    'bootstrap.datetimepicker': path.join(__dirname, './node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min'),
-    'bootstrap.toggle': path.join(__dirname, './node_modules/bootstrap4-toggle/js/bootstrap4-toggle'),
+    'bootstrap.toggle': path.join(__dirname, './node_modules/bootstrap4-toggle/js/bootstrap4-toggle.min'),
    'select2': path.join(__dirname, './node_modules/select2/dist/js/select2.full'),
    'backgrid.filter': path.join(__dirname, './node_modules/backgrid-filter/backgrid-filter'),
    'backgrid.select.all': path.join(__dirname, './pgadmin/static/vendor/backgrid/backgrid-select-all'),
--- a/web/webpack.test.config.js
+++ b/web/webpack.test.config.js
@ -10,6 +10,7 @@
 /* eslint-env node */
 const path = require('path');
 const webpack = require('webpack');
+const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

 const sourcesDir = path.resolve(__dirname, 'pgadmin/static');
 const nodeModulesDir = path.resolve(__dirname, 'node_modules');
@ -25,6 +26,21 @@ module.exports = {
      'window.jQuery': 'jquery',
      'moment': 'moment',
      'window.moment':'moment',
+      process: 'process/browser',
+      Buffer: ['buffer', 'Buffer'],
+    }),
+    new ImageMinimizerPlugin({
+      test: /\.(jpe?g|png|gif|svg)$/i,
+      minimizerOptions: {
+        // Lossless optimization with custom option
+        // Feel free to experiment with options for better result for you
+        plugins: [
+          ['gifsicle', { interlaced: true }],
+          ['mozjpeg', { progressive: true }],
+          ['optipng', { optimizationLevel: 7 }],
+          ['pngquant', {quality: [0.75, .9], speed: 3}],
+        ],
+      },
    }),
  ],

@ -43,57 +59,76 @@ module.exports = {
        },
      }, {
        test: /\.css$/,
-        use: [ 'style-loader', 'raw-loader' ],
+        type: 'asset/source',
+        use: ['style-loader'],
      }, {
        test: /\.(jpe?g|png|gif|svg)$/i,
-        loaders: [{
-          loader: 'url-loader',
-          options: {
-            emitFile: true,
-            name: 'img/[name].[ext]',
-            limit: 4096,
+        type: 'asset',
+        parser: {
+          dataUrlCondition: {
+            maxSize: 4 * 1024, // 4kb
          },
-        }, {
-          loader: 'image-webpack-loader',
-          query: {
-            bypassOnDebug: true,
-            mozjpeg: {
-              progressive: true,
-            },
-            gifsicle: {
-              interlaced: false,
-            },
-            optipng: {
-              optimizationLevel: 7,
-            },
-            pngquant: {
-              quality: '75-90',
-              speed: 3,
-            },
-          },
-        }],
+        },
+        generator: {
+          filename: 'img/[name].[ext]',
+        },
        exclude: /vendor/,
      }, {
        test: /.*slickgrid[\\\/]+slick\.(?!core)*/,
-        loader: 'imports-loader?' +
-        'jquery.ui' +
-        ',jquery.event.drag' +
-        ',slickgrid',
+        use:[
+          {
+            loader: 'imports-loader',
+            options: {
+              type: 'commonjs',
+              imports: [
+                'pure|jquery.ui',
+                'pure|jquery.event.drag',
+                'pure|slickgrid',
+              ],
+            },
+          },
+        ],
      }, {
        test: /.*slickgrid\.plugins[\\\/]+slick\.cellrangeselector/,
-        loader: 'imports-loader?' +
-        'jquery.ui' +
-        ',jquery.event.drag' +
-        ',slickgrid' +
-        '!exports-loader?' +
-        'Slick.CellRangeSelector',
+        use:[
+          {
+            loader: 'imports-loader',
+            options: {
+              type: 'commonjs',
+              imports: [
+                'pure|jquery.ui',
+                'pure|jquery.event.drag',
+                'pure|slickgrid',
+              ],
+            },
+          }, {
+            loader: 'exports-loader',
+            options: {
+              type: 'commonjs',
+              exports: 'single|Slick.CellRangeSelector',
+            },
+          },
+        ],
      }, {
        test: /.*slickgrid[\\\/]+slick\.core.*/,
-        loader: 'imports-loader?' +
-        'jquery.ui' +
-        ',jquery.event.drag' +
-        '!exports-loader?' +
-        'Slick',
+        use:[
+          {
+            loader: 'imports-loader',
+            options: {
+              type: 'commonjs',
+              imports: [
+                'pure|jquery.ui',
+                'pure|jquery.event.drag',
+              ],
+            },
+          }, {
+            loader: 'exports-loader',
+            options: {
+              type: 'commonjs',
+              exports: 'single|Slick',
+            },
+          },
+        ],
      },
      {
        test: /\.js$|\.jsx$/,
@ -119,7 +154,7 @@ module.exports = {
      'color-picker': path.join(__dirname, './node_modules/@simonwep/pickr/dist/pickr.min'),
      'bignumber': path.join(__dirname, './node_modules/bignumber.js/bignumber'),
      'bootstrap.datetimepicker': path.join(__dirname, './node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min'),
-      'bootstrap.toggle': path.join(__dirname, './node_modules/bootstrap4-toggle/js/bootstrap4-toggle'),
+      'bootstrap.toggle': path.join(__dirname, './node_modules/bootstrap4-toggle/js/bootstrap4-toggle.min'),
      'backbone': path.join(__dirname, './node_modules/backbone/backbone'),
      'backform': path.join(__dirname, './node_modules/backform/src/backform'),
      'backgrid': path.join(__dirname, './pgadmin/static/vendor/backgrid/backgrid'),
--- a/web/yarn.lock
+++ b/web/yarn.lock