Build: Replace babel-loader with esbuild-loader (#57837)

* build(webpack): replace babel-loader with esbuild-loader

* build(webpack): add esbuild minifier to production builds

* Wip

* Removed ngInject and replaced with manual inject params

* chore: bump esbuild to 0.15.13

* Fixed angular issues

* build(frontend): update esbuild to 0.16.16

* chore(webpack): support browserslist for esbuild

* build(esbuild): unify versions of esbuild to 0.16.17 and esbuild-loader to 2.21.0

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

scripts/webpack/webpack.prod.js

@@ -1,15 +1,18 @@
 'use strict';
 
+const browserslist = require('browserslist');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const { ESBuildMinifyPlugin } = require('esbuild-loader');
+const { resolveToEsbuildTarget } = require('esbuild-plugin-browserslist');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const path = require('path');
-const TerserPlugin = require('terser-webpack-plugin');
 const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
 const { merge } = require('webpack-merge');
 
 const HTMLWebpackCSSChunks = require('./plugins/HTMLWebpackCSSChunks');
 const common = require('./webpack.common.js');
+const esbuildTargets = resolveToEsbuildTarget(browserslist(), { printUnknownTargets: false });
 
 module.exports = (env = {}) =>
   merge(common, {
@@ -27,15 +30,13 @@ module.exports = (env = {}) =>
         {
           test: /\.tsx?$/,
           exclude: /node_modules/,
-          use: [
-            {
-              loader: 'babel-loader',
-              options: {
-                cacheDirectory: true,
-                cacheCompression: false,
-              },
+          use: {
+            loader: 'esbuild-loader',
+            options: {
+              loader: 'tsx',
+              target: esbuildTargets,
             },
-          ],
+          },
         },
         require('./sass.rule.js')({
           sourceMap: false,
@@ -47,8 +48,8 @@ module.exports = (env = {}) =>
       nodeEnv: 'production',
       minimize: parseInt(env.noMinify, 10) !== 1,
       minimizer: [
-        new TerserPlugin({
-          parallel: false,
+        new ESBuildMinifyPlugin({
+          target: esbuildTargets,
         }),
         new CssMinimizerPlugin(),
       ],