esbuild-loader

Speed up your Webpack build with esbuild! 🔥

esbuild is written in Go, and supports blazing fast ESNext & TypeScript transpilation, and JS minification.

🚀 Install

npm i -D esbuild-loader

🚦 Quick Setup

Javascript transpilation (eg. Babel)

In webpack.config.js:

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

  module.exports = {
    module: {
      rules: [
-       {
-         test: /\.js$/,
-         use: 'babel-loader',
-       },
+       {
+         test: /\.js$/,
+         loader: 'esbuild-loader',
+         options: {
+           target: 'es2015', // Syntax to compile to (see options below for possible values)
+         },
+       },

        ...
      ],
    },
    plugins: [
+     new ESBuildPlugin()
    ]
  }

TypeScript & TSX

In webpack.config.js:

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

  module.exports = {
    module: {
      rules: [
-       {
-         test: /\.tsx?$/,
-         use: 'ts-loader',
-       },
+       {
+         test: /\.tsx?$/,
+         loader: 'esbuild-loader',
+         options: {
+           loader: 'tsx', // Or 'ts' if you don't need tsx
+           target: 'es2015',
+         },
+       },

        ...
      ],
    },
    plugins: [
+     new ESBuildPlugin()
    ]
  }

Minification (eg. Terser)

You can replace JS minifiers like Terser or UglifyJs. Checkout the benchmarks to see how much faster esbuild is.

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 © privatenumber
• MIT © EGOIST (Kevin Titor)