esbuild-loader

What is esbuild-loader?

esbuild-loader is a Webpack loader that leverages the esbuild bundler to perform fast JavaScript and TypeScript transpilation and bundling. It is designed to significantly speed up the build process by using esbuild's highly optimized and parallelized architecture.

What are esbuild-loader's main functionalities?

JavaScript and TypeScript Transpilation

This feature allows you to transpile JavaScript and TypeScript files using esbuild. The code sample demonstrates how to configure esbuild-loader in a Webpack configuration to handle `.tsx` and `.ts` files, targeting ES2015 syntax.

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'esbuild-loader',
        options: {
          loader: 'tsx', // Or 'ts' if you don't need tsx
          target: 'es2015' // Syntax to compile to (see options below for possible values)
        }
      }
    ]
  }
};

Minification

esbuild-loader can also be used to minify JavaScript code. The code sample shows how to use the `EsbuildPlugin` to enable minification in a Webpack configuration, targeting ES2015 syntax.

const EsbuildPlugin = require('esbuild-loader').EsbuildPlugin;

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new EsbuildPlugin({
        target: 'es2015' // Syntax to compile to (see options below for possible values)
      })
    ]
  }
};

CSS Loading

esbuild-loader can also handle CSS files. The code sample demonstrates how to configure esbuild-loader to load and minify CSS files in a Webpack configuration.

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'esbuild-loader',
            options: {
              loader: 'css',
              minify: true
            }
          }
        ]
      }
    ]
  }
};

Other packages similar to esbuild-loader

babel-loader

babel-loader is a Webpack loader that uses Babel to transpile JavaScript and TypeScript files. While babel-loader is highly configurable and supports a wide range of plugins and presets, it is generally slower than esbuild-loader due to Babel's single-threaded architecture.

ts-loader

ts-loader is a Webpack loader specifically designed for TypeScript transpilation using the TypeScript compiler (tsc). It provides fine-grained control over TypeScript compilation but is slower compared to esbuild-loader, which uses esbuild's faster, parallelized architecture.

terser-webpack-plugin

terser-webpack-plugin is a Webpack plugin used for minifying JavaScript files using Terser. While it is highly configurable and widely used, it is generally slower than esbuild-loader's minification capabilities, which leverage esbuild's optimized performance.

README

esbuild-loader

esbuild is by far one of the fastest TS/ESNext to ES6 compilers, so it makes sense to use it over Babel/TSC with webpack to take advantage of both worlds (Speed and the webpack ecosytem).

You might also like maho, a React framework powered by esbuild.

Install

npm i -D esbuild-loader

or

yarn add --dev esbuild-loader

Usage

Transpiling

In webpack.config.js:

const { ESBuildPlugin } = require('esbuild-loader')

module.exports = {
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        loader: 'esbuild-loader',
        options: {
          target: 'es2015', // default, or 'es20XX', 'esnext'
        },
      },
      {
        test: /\.tsx$/,
        loader: 'esbuild-loader',
        options: {
          loader: 'tsx',
          target: 'es2015',
        },
      },
    ],
  },
  plugins: [
    new ESBuildPlugin()
  ]
}

Minifying

In webpack.config.js:

const { ESBuildPlugin, ESBuildMinifyPlugin } = require('esbuild-loader')

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new ESBuildMinifyPlugin()
    ],
  },

  plugins: [
    new ESBuildPlugin()
  ],
}

Options

Loader

The loader supports options from esbuild.

• target <String> (es2015) - Environment target (e.g. es2017, chrome80, esnext)
• loader <String> (js) - Which loader to use to handle file
  • Possible values: js, jsx, ts, tsx, json, text, base64, file, dataurl, binary
• jsxFactory <String> - What to use instead of React.createElement
• jsxFragment <String> - What to use instead of React.Fragment
• Enable source-maps via devtool

MinifyPlugin

• minify <Boolean> (true) - Sets all --minify-* flags
• minifyWhitespace <Boolean> - Remove whitespace
• minifyIdentifiers <Boolean> - Shorten identifiers
• minifySyntax <Boolean> - Use equivalent but shorter syntax
• sourcemap <Boolean> (defaults to Webpack devtool)- Whether to emit sourcemaps

License

MIT © EGOIST (Kevin Titor)