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)!
Curious how much faster your build will be? See what our users are saying.
If you like this project, please star it & follow me to see what other cool projects I'm working on! ❤️
npm i -D esbuild-loader
In webpack.config.js
:
module.exports = {
module: {
rules: [
- {
- test: /\.js$/,
- use: 'babel-loader',
- },
+ {
+ test: /\.js$/,
+ loader: 'esbuild-loader',
+ options: {
+ loader: 'jsx', // Remove this if you're not using JSX
+ target: 'es2015' // Syntax to compile to (see options below for possible values)
+ }
+ },
...
],
},
}
In webpack.config.js
:
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'
+ }
+ },
...
]
},
}
If you have a tsconfig.json
file, esbuild-loader will automatically detect it. Alternatively, you can pass it in via the tsconfigRaw
option.
Note, esbuild only supports a subset of tsconfig
options (see TransformOptions
interface) and does not do type checks.
{
test: /\.tsx?$/,
loader: 'esbuild-loader',
options: {
loader: 'tsx',
target: 'es2015',
+ tsconfigRaw: require('./tsconfig.json')
}
}
You can replace JS minifiers like Terser or UglifyJs. Checkout the benchmarks to see how much faster esbuild is. The target
option tells esbuild that it can use newer JS syntax to perform better minification.
In webpack.config.js
:
+ const { ESBuildMinifyPlugin } = require('esbuild-loader')
module.exports = {
...,
+ optimization: {
+ minimize: true,
+ minimizer: [
+ new ESBuildMinifyPlugin({
+ target: 'es2015' // Syntax to compile to (see options below for possible values)
+ })
+ ]
+ },
}
If you're not using TypeScript, JSX, or any syntax unsupported by Webpack, you can also leverage the minifier for transpilation (as an alternative to Babel). 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. Simply set the target
option on the minifier to specify which support level you want.
If you'd like to see working Webpack builds that use esbuild-loader for basic JS, React, TypeScript, or Next.js, check out the examples repo.
The loader supports options from esbuild.
target
String
(es2015
) - Environment target (e.g. es2016, chrome80, esnext)loader
String
(js
) - Which loader to use to handle file- Possible values:
js
,jsx
,ts
,tsx
,json
,text
,base64
,file
,dataurl
,binary
- Possible values:
jsxFactory
String
- What to use instead of React.createElementjsxFragment
String
- What to use instead of React.Fragment
Enable source-maps via devtool
target
String
(esnext
) - Environment target (e.g. es2016, chrome80, esnext)minify
Boolean
(true
) - Sets allminify
flagsminifyWhitespace
Boolean
- Remove whitespaceminifyIdentifiers
Boolean
- Shorten identifiersminifySyntax
Boolean
- Use equivalent but shorter syntaxsourcemap
Boolean
(defaults to Webpackdevtool
) - Whether to emit sourcemapsinclude
String|RegExp|Array<String|RegExp>
- Filter assets for inclusion in minificationexclude
String|RegExp|Array<String|RegExp>
- Filter assets for exclusion in minification
- MIT © privatenumber
- MIT © EGOIST (Kevin Titor)