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.dev.js

@@ -1,5 +1,7 @@
 'use strict';
 
+const browserslist = require('browserslist');
+const { resolveToEsbuildTarget } = require('esbuild-plugin-browserslist');
 const ESLintPlugin = require('eslint-webpack-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
@@ -10,7 +12,7 @@ const { merge } = require('webpack-merge');
 
 const HTMLWebpackCSSChunks = require('./plugins/HTMLWebpackCSSChunks');
 const common = require('./webpack.common.js');
-// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const esbuildTargets = resolveToEsbuildTarget(browserslist(), { printUnknownTargets: false });
 
 module.exports = (env = {}) =>
   merge(common, {
@@ -34,10 +36,10 @@ module.exports = (env = {}) =>
         {
           test: /\.tsx?$/,
           use: {
-            loader: 'babel-loader',
+            loader: 'esbuild-loader',
             options: {
-              cacheDirectory: true,
-              cacheCompression: false,
+              loader: 'tsx',
+              target: esbuildTargets,
             },
           },
           exclude: /node_modules/,
@@ -114,8 +116,5 @@ module.exports = (env = {}) =>
           NODE_ENV: JSON.stringify('development'),
         },
       }),
-      // new BundleAnalyzerPlugin({
-      //   analyzerPort: 8889
-      // })
     ],
   });

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(),
       ],