diff --git a/buildtools/webpack.api.js b/buildtools/webpack.api.js
index 6cbc28aa5648..eb20757dd07b 100644
--- a/buildtools/webpack.api.js
+++ b/buildtools/webpack.api.js
@@ -39,9 +39,13 @@ module.exports = (env, argv) => {
             options: {
               babelrc: false,
               comments: false,
-              plugins: [
-                require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'),
-                require.resolve('@babel/plugin-proposal-optional-chaining'),
+              presets: [
+                '@babel/preset-env',
+                {
+                  targets: require('./webpack.share').browsers,
+                  modules: false,
+                  loose: true,
+                },
               ],
             },
           },
diff --git a/buildtools/webpack.commons.js b/buildtools/webpack.commons.js
index 47408cb53a2f..6af0c4f7175d 100644
--- a/buildtools/webpack.commons.js
+++ b/buildtools/webpack.commons.js
@@ -49,6 +49,14 @@ module.exports = function (config) {
     $: 'jquery',
   });
 
+  const babelPresetEnv = [
+    require.resolve('@babel/preset-env'),
+    {
+      targets: config.browsers || require('./webpack.share').browsers,
+      loose: true,
+    },
+  ];
+
   // Expose corejs-typeahead as window.Bloodhound
   const typeaheadRule = {
     test: require.resolve('corejs-typeahead'),
@@ -144,6 +152,7 @@ module.exports = function (config) {
         assumptions: {
           setPublicClassFields: true,
         },
+        presets: [babelPresetEnv],
         plugins: [
           [
             require.resolve('@babel/plugin-transform-typescript'),
@@ -151,9 +160,6 @@ module.exports = function (config) {
             {allowDeclareFields: true},
           ],
           [require.resolve('@babel/plugin-proposal-decorators'), {decoratorsBeforeExport: true}],
-          require.resolve('@babel/plugin-proposal-class-properties'),
-          require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'),
-          require.resolve('@babel/plugin-proposal-optional-chaining'),
         ],
       },
     },
@@ -173,11 +179,8 @@ module.exports = function (config) {
       options: {
         babelrc: false,
         comments: false,
-        plugins: [
-          require.resolve('babel-plugin-angularjs-annotate'),
-          require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'),
-          require.resolve('@babel/plugin-proposal-optional-chaining'),
-        ],
+        presets: [babelPresetEnv],
+        plugins: [require.resolve('babel-plugin-angularjs-annotate')],
       },
     },
   };
@@ -200,10 +203,7 @@ module.exports = function (config) {
       options: {
         babelrc: false,
         comments: false,
-        plugins: [
-          require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'),
-          require.resolve('@babel/plugin-proposal-optional-chaining'),
-        ],
+        presets: [babelPresetEnv],
       },
     },
   };
diff --git a/buildtools/webpack.config.dll.js b/buildtools/webpack.config.dll.js
index 10283f2e8d4b..332e25780b3b 100644
--- a/buildtools/webpack.config.dll.js
+++ b/buildtools/webpack.config.dll.js
@@ -41,9 +41,15 @@ module.exports = {
           options: {
             babelrc: false,
             comments: false,
-            plugins: [
-              require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'),
-              require.resolve('@babel/plugin-proposal-optional-chaining'),
+            presets: [
+              [
+                require.resolve('@babel/preset-env'),
+                {
+                  targets: require('./webpack.share').browsers,
+                  modules: false,
+                  loose: true,
+                },
+              ],
             ],
           },
         },