Switch from webpack to esbuild

packages/cli/CHANGELOG.md

@@ -8,6 +8,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Removed
 - fs-extra dependency in favour of fs (#2824)
 
+### Changed
+- Switch build command from webpack to esbuild and support projects using pnpm (#2825)
+
 ## [5.12.0] - 2025-06-12
 ### Changed
 - Update `oclif` dependency (#2817)

packages/cli/package.json

@@ -14,26 +14,21 @@
     "@subql/utils": "workspace:*",
     "chalk": "^4",
     "ejs": "^3.1.10",
+    "esbuild": "^0.25.5",
     "fuzzy": "^0.1.3",
     "glob": "^10.4",
     "json5": "^2.2.3",
-    "jsonc-parser": "^3.3.1",
     "ora": "^5.4.1",
     "rimraf": "^5.0.10",
     "semver": "^7.6.3",
     "simple-git": "^3.25.0",
-    "terser-webpack-plugin": "^5.3.10",
     "ts-loader": "^9.5.1",
     "ts-node": "^10.9.2",
-    "tsconfig-paths-webpack-plugin": "^4.2.0",
     "tslib": "^2.6.3",
     "typescript": "^5.7.3",
     "update-notifier": "^5.1.0",
-    "webpack": "^5.94.0",
-    "webpack-merge": "^6.0.1",
     "websocket": "^1.0.35",
-    "yaml": "^2.5.0",
-    "yaml-loader": "^0.8.1"
+    "yaml": "^2.5.0"
   },
   "devDependencies": {
     "@subql/common-algorand": "^4.3.1",

packages/cli/src/commands/build/index.ts

@@ -5,7 +5,7 @@
 import {existsSync, lstatSync} from 'fs';
 import path from 'path';
 import {Command, Flags} from '@oclif/core';
-import {getBuildEntries, runWebpack} from '../../controller/build-controller';
+import {getBuildEntries, runBundle} from '../../controller/build-controller';
 import {resolveToAbsolutePath, buildManifestFromLocation, getTsManifest} from '../../utils';
 
 export default class Build extends Command {
@@ -43,12 +43,12 @@
       const buildEntries = getBuildEntries(directory);
       const outputDir = path.resolve(directory, flags.output ?? 'dist');
 
-      await runWebpack(buildEntries, directory, outputDir, isDev, true);
+      await runBundle(buildEntries, directory, outputDir, isDev, true);
       if (!flags.silent) {
         this.log('Building and packing code ...');
         this.log('Done!');
       }
     } catch (e: any) {
       this.error(e);
     }
   }

packages/cli/src/controller/build-controller.spec.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0
 
 import path from 'path';
-import {getBuildEntries, loadTsConfig} from './build-controller';
+import {getBuildEntries} from './build-controller';
 
 describe('build controller', () => {
   it('picks up test and export files', () => {
@@ -13,14 +13,4 @@ describe('build controller', () => {
     expect(entries['test/mappingHandler.test']).toEqual(path.resolve(dir, './src/test/mappingHandler.test.ts'));
     expect(entries.chaintypes).toEqual(path.resolve(dir, './src/chainTypes.ts'));
   });
-
-  it('loads tsconfig in json format', () => {
-    const config = loadTsConfig(path.resolve(__dirname, '../../test/build'));
-    expect(config).toBeDefined();
-  });
-
-  it('loads tsconfig in jsonc format', () => {
-    const config = loadTsConfig(path.resolve(__dirname, '../../test/jsoncConfig'));
-    expect(config).toBeDefined();
-  });
 });

packages/cli/src/controller/build-controller.ts

@@ -1,117 +1,64 @@
 // Copyright 2020-2025 SubQuery Pte Ltd authors & contributors
 // SPDX-License-Identifier: GPL-3.0
 
-import assert from 'assert';
-import {readFileSync, existsSync} from 'fs';
-import path from 'path';
+import fs from 'node:fs';
+import path from 'node:path';
+import * as esbuild from 'esbuild';
 import {globSync} from 'glob';
-import {parse} from 'jsonc-parser';
-import TerserPlugin from 'terser-webpack-plugin';
-import {TsconfigPathsPlugin} from 'tsconfig-paths-webpack-plugin';
-import webpack, {Configuration} from 'webpack';
-import {merge} from 'webpack-merge';
+import * as yaml from 'js-yaml';
 
-const getBaseConfig = (
-  buildEntries: Configuration['entry'],
-  projectDir: string,
-  outputDir: string,
-  development?: boolean
-): webpack.Configuration => ({
-  target: 'node',
-  mode: development ? 'development' : 'production',
-  context: projectDir,
-  entry: buildEntries,
-  devtool: 'inline-source-map',
-  optimization: {
-    minimize: true,
-    minimizer: [
-      new TerserPlugin({
-        terserOptions: {
-          sourceMap: true,
-          format: {
-            beautify: true,
-          },
-        },
-      }),
-    ],
-  },
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        exclude: /node_modules/,
-        loader: require.resolve('ts-loader'),
-        options: {
-          compilerOptions: {
-            declaration: false,
-          },
-        },
-      },
-      {
-        test: /\.ya?ml$/,
-        use: 'yaml-loader',
-      },
-    ],
-  },
-
-  resolve: {
-    extensions: ['.tsx', '.ts', '.js', '.json'],
-    plugins: [],
-  },
-
-  output: {
-    path: outputDir,
-    filename: '[name].js',
-    libraryTarget: 'commonjs',
-  },
-});
-
-export function loadTsConfig(projectDir: string): any | undefined {
-  const tsconfigPath = path.join(projectDir, 'tsconfig.json');
-  if (existsSync(tsconfigPath)) {
-    const tsconfig = readFileSync(tsconfigPath, 'utf-8');
-    const tsconfigJson = parse(tsconfig);
-
-    return tsconfigJson;
-  }
-}
-
-export async function runWebpack(
-  buildEntries: Configuration['entry'],
+export async function runBundle(
+  buildEntries: Record<string, string>,
   projectDir: string,
   outputDir: string,
   isDev = false,
   clean = false
 ): Promise<void> {
-  const config = merge(
-    getBaseConfig(buildEntries, projectDir, outputDir, isDev),
-    {output: {clean}}
-    // Can allow projects to override webpack config here
-  );
-
-  const tsConfig = loadTsConfig(projectDir);
-  if (tsConfig?.compilerOptions?.paths && config.resolve && config.resolve.plugins) {
-    config.resolve.plugins.push(new TsconfigPathsPlugin());
+  // Create output directory if it doesn't exist
+  if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, {recursive: true});
+  } else if (clean) {
+    // Simple clean implementation - could be enhanced for more selective cleaning
+    const files = fs.readdirSync(outputDir);
+    files.forEach((file) => {
+      fs.rmSync(path.join(outputDir, file), {force: true, recursive: true});
+    });
   }
 
-  await new Promise((resolve, reject) => {
-    webpack(config).run((error, stats) => {
-      if (error) {
-        reject(error);
-        return;
-      }
-      assert(stats, 'Webpack stats is undefined');
-
-      if (stats.hasErrors()) {
-        const info = stats.toJson();
-
-        reject(info.errors?.map((e) => e.message).join('\n') ?? 'Unknown error');
-        return;
-      }
+  // Setup plugins for yaml support
+  const yamlPlugin = {
+    name: 'yaml',
+    setup(build: esbuild.PluginBuild) {
+      build.onLoad({filter: /\.ya?ml$/}, (args) => {
+        const source = fs.readFileSync(args.path, 'utf8');
+        const contents = `export default ${JSON.stringify(yaml.load(source))}`;
+        return {contents, loader: 'js'};
+      });
+    },
+  };
 
-      resolve(true);
-    });
+  // Build each entry point separately
+  const buildPromises = Object.entries(buildEntries).map(async ([name, entry]) => {
+    try {
+      await esbuild.build({
+        entryPoints: [entry],
+        bundle: true,
+        platform: 'node',
+        outfile: path.join(outputDir, `${name}.js`),
+        sourcemap: 'inline',
+        minify: !isDev,
+        treeShaking: true,
+        format: 'cjs',
+        plugins: [yamlPlugin],
+        tsconfig: path.join(projectDir, 'tsconfig.json'),
+        target: 'node22',
+      });
+    } catch (error) {
+      throw new Error(`Error building ${name}: ${error}`);
+    }
   });
+
+  await Promise.all(buildPromises);
 }
 
 export function getBuildEntries(directory: string): Record<string, string> {
@@ -132,7 +79,7 @@ export function getBuildEntries(directory: string): Record<string, string> {
   });
 
   // Get the output location from the project package.json main field
-  const pjson = JSON.parse(readFileSync(path.join(directory, 'package.json')).toString());
+  const pjson = JSON.parse(fs.readFileSync(path.join(directory, 'package.json')).toString());
   if (pjson.exports && typeof pjson.exports !== 'string') {
     buildEntries = Object.entries(pjson.exports as Record<string, string>).reduce(
       (acc, [key, value]) => {