esbuild-plugin-webpack-bridge

0.4.0 verified Fri May 01 auth: no javascript

A plugin that enables using webpack loaders within esbuild builds. Current stable version is 0.4.0. Release cadence is irregular; the project is still under development with API subject to change. Key differentiator: bridges the gap between esbuild's speed and webpack's extensive loader ecosystem, allowing reuse of loaders like babel-loader, sass-loader, and postcss-loader without a full webpack setup. Works with ESM and CommonJS esbuild configurations.

Common errors

error TypeError: Cannot read properties of undefined (reading 'compilation') ↓

cause Some webpack loaders expect a full webpack compilation object, which is not provided by this plugin.

fix

Check if the loader relies on webpack internals; consider using a different loader or a workaround.

error Error: Could not resolve 'webpack' ↓

cause The plugin depends on webpack internally but it is not installed.

fix

Install webpack as a dev dependency: npm install --save-dev webpack

error Module parse failed: Unexpected token (1:0) - You may need an appropriate loader to handle this file type. ↓

cause The webpackBridge plugin might not be correctly applied or the rule's test doesn't match the file.

fix

Verify that the esbuildLoader property matches the expected content type (e.g., 'js' for JavaScript, 'css' for stylesheets).

Warnings

breaking API changes in minor versions: the plugin is under development and the configuration format may break without major version bump. ↓

fix Pin exact version in package.json and monitor releases for breaking changes.

gotcha Only a subset of webpack loader features are supported; for example, pitch loaders and inline matchResource may not work. ↓

fix Check test/ folder for supported features. Loaders expecting full webpack context may behave unexpectedly.

gotcha Requires Node.js >= 12 and esbuild >= 0.8; cannot be used in browsers. ↓

fix Ensure Node version and esbuild peer dependency are satisfied.

Install

npm install esbuild-plugin-webpack-bridge

yarn add esbuild-plugin-webpack-bridge

pnpm add esbuild-plugin-webpack-bridge

Imports

webpackBridge

wrong

const webpackBridge = require('esbuild-plugin-webpack-bridge')

correct

import webpackBridge from 'esbuild-plugin-webpack-bridge'

Package does not provide a CommonJS export; use default import.

webpackBridge

wrong

const { webpackBridge } = require('esbuild-plugin-webpack-bridge')

correct

import webpackBridge from 'esbuild-plugin-webpack-bridge'

Named import does not exist; use default import.

esbuild
wrong
```
const esbuild = require('esbuild')
```
correct
```
import * as esbuild from 'esbuild'
```
esbuild is ESM-only; use dynamic import or import statement.

Quickstart

Shows how to use esbuild-plugin-webpack-bridge with a Babel loader for JSX/JS files.

import esbuild from 'esbuild';
import webpackBridge from 'esbuild-plugin-webpack-bridge';

await esbuild.build({
  entryPoints: ['src/index.jsx'],
  bundle: true,
  outfile: 'dist/bundle.js',
  plugins: [
    webpackBridge({
      module: {
        rules: [
          {
            test: /\.jsx?$/,
            esbuildLoader: 'js',
            use: [
              {
                loader: 'babel-loader',
                options: {
                  presets: [['@babel/preset-env', { targets: { ie: 11 } }]],
                },
              },
            ],
          },
        ],
      },
    }),
  ],
});