build: use ESBuild for transpiling and minimizing in Webpack

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

2 files changed, 57 insertions, 23 deletions

diff --git a/webpack.common.config.js b/webpack.common.config.js
index b64cce5e2..72456490e 100644
--- a/webpack.common.config.js
+++ b/webpack.common.config.js
@@ -20,28 +20,48 @@
  */
 
 const BabelLoaderExcludeNodeModulesExcept = require('babel-loader-exclude-node-modules-except')
+const { mergeWithRules } = require('webpack-merge')
 
 const nextcloudWebpackRules = require('@nextcloud/webpack-vue-config/rules')
 
-// Edit JS rule
-nextcloudWebpackRules.RULE_JS.exclude = BabelLoaderExcludeNodeModulesExcept([
-	'@nextcloud/event-bus',
-	'ansi-regex',
-	'fast-xml-parser',
-	'hot-patcher',
-	'nextcloud-vue-collections',
-	'semver',
-	'strip-ansi',
-	'tributejs',
-	'webdav',
-])
-
-module.exports = {
+// Replace rules with the same modules
+module.exports = mergeWithRules({
+	module: {
+		rules: {
+			test: 'match',
+			loader: 'replace',
+			options: 'replace',
+		},
+	},
+})({
+	module: {
+		// Reuse @nextcloud/webpack-vue-config/rules
+		rules: Object.values(nextcloudWebpackRules),
+	},
+},
+{
 	module: {
 		rules: [
-			// Reuse @nextcloud/webpack-vue-config/rules
-			...Object.values(nextcloudWebpackRules),
-
+			{
+				test: /\.js$/,
+				loader: 'esbuild-loader',
+				options: {
+					// Implicitly set as JS loader for only JS parts of Vue SFCs will be transpiled
+					loader: 'js',
+					target: 'es2020',
+				},
+				exclude: BabelLoaderExcludeNodeModulesExcept([
+					'@nextcloud/event-bus',
+					'ansi-regex',
+					'fast-xml-parser',
+					'hot-patcher',
+					'nextcloud-vue-collections',
+					'semver',
+					'strip-ansi',
+					'tributejs',
+					'webdav',
+				]),
+			},
 			{
 				test: /\.wasm$/i,
 				type: 'asset/resource',
@@ -56,4 +76,4 @@ module.exports = {
 			},
 		],
 	},
-}
+})
diff --git a/webpack.config.js b/webpack.config.js
index 1a60631d6..970115584 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,16 +1,22 @@
 const path = require('node:path')
 
+const { EsbuildPlugin } = require('esbuild-loader')
 const webpack = require('webpack')
-const { merge } = require('webpack-merge')
+const { mergeWithRules } = require('webpack-merge')
 
 const nextcloudWebpackConfig = require('@nextcloud/webpack-vue-config')
 
 const commonWebpackConfig = require('./webpack.common.config.js')
 
-// Rules from @nextcloud/webpack-vue-config/rules already added by commonWebpackConfig
-nextcloudWebpackConfig.module.rules = []
-
-module.exports = merge(nextcloudWebpackConfig, commonWebpackConfig, {
+module.exports = mergeWithRules({
+	module: {
+		// Rules from @nextcloud/webpack-vue-config/rules already added by commonWebpackConfig
+		rules: 'replace',
+	},
+	optimization: {
+		minimizer: 'replace',
+	},
+})(nextcloudWebpackConfig, commonWebpackConfig, {
 	entry: {
 		'admin-settings': path.join(__dirname, 'src', 'mainAdminSettings.js'),
 		collections: path.join(__dirname, 'src', 'collections.js'),
@@ -32,6 +38,14 @@ module.exports = merge(nextcloudWebpackConfig, commonWebpackConfig, {
 		assetModuleFilename: '[name][ext]?v=[contenthash]',
 	},
 
+	optimization: {
+		minimizer: [
+			new EsbuildPlugin({
+				target: 'es2020',
+			}),
+		],
+	},
+
 	plugins: [
 		new webpack.DefinePlugin({ IS_DESKTOP: false }),
 	],