esbuild-loader

Speed up your Webpack build with esbuild! 🔥

esbuild is a JavaScript bundler written in Go that supports blazing fast ESNext & TypeScript transpilation and JS minification.

esbuild-loader lets you harness the speed of esbuild in your Webpack build by offering faster alternatives for transpilation (eg. babel-loader/ts-loader) and minification (eg. Terser)!

_{If you like this project, please star it & follow me to see what other cool projects I'm working on! ❤️}

🚀 Install

``bash
npm i -D esbuild-loader
`

🚦 Quick Setup

$3


In webpack.config.js:

`diff
+ 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()
]
}
`

$3


In webpack.config.js:

`diff
+ 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()
]
}
`

#### Configuration
If you have a tsconfig.json file, you can pass it in via the tsconfigRaw option. Note, esbuild only supports a subset of tsconfig options and does not do type checks.

`diff
{
test: /\.tsx?$/,
loader: 'esbuild-loader',
options: {
loader: 'tsx',
target: 'es2015',
+ tsconfigRaw: require('./tsconfig.json')
}
}
`

$3

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

In webpack.config.js:

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

module.exports = {
...,

+ optimization: {
+ minimize: true,
+ minimizer: [
+ new ESBuildMinifyPlugin({
+ target: 'es2015' // Syntax to compile to (see options below for possible values)
+ })
+ ]
+ },

plugins: [
+ new ESBuildPlugin()
]
}
`

> _💁‍♀️ Protip: Use the minify plugin in-place of the loader to transpile your JS_
>
> The target option tells _esbuild_ that it can use newer JS syntax to perform better minification. If you're not using TypeScript or any syntax unsupported by Webpack, you can also leverage this as a transpilation step. It will be faster because there's less files to work on and will produce a smaller output because the polyfills will only be bundled once for the entire build instead of per file.

⚙️ Options

$3


The loader supports options from esbuild.
- target (es2015) - Environment target (e.g. es2016, chrome80, esnext)
- loader (js) - Which loader to use to handle file
- Possible values: js, jsx, ts, tsx, json, text, base64, file, dataurl, binary
- jsxFactory - What to use instead of React.createElement
- jsxFragment - What to use instead of React.Fragment

Enable source-maps via devtool

$3


- target (esnext) - Environment target (e.g. es2016, chrome80, esnext)
- minify (true) - Sets all minify flags
- minifyWhitespace - Remove whitespace
- minifyIdentifiers - Shorten identifiers
- minifySyntax - Use equivalent but shorter syntax
- sourcemap (defaults to Webpack devtool`)- Whether to emit sourcemaps

💼 License

- MIT © privatenumber
- MIT © EGOIST (Kevin Titor)