Speed up your Webpack build with esbuild! 🔥
esbuild is written in Go, and supports blazing fast ESNext & TypeScript transpilation, and JS minification.
npm i -D esbuild-loaderIn 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()
]
}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()
]
}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()
]
}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
- Possible values:
jsxFactory<String>- What to use instead of React.createElementjsxFragment<String>- What to use instead of React.Fragment
Enable source-maps via devtool
minify<Boolean>(true) - Sets all--minify-*flagsminifyWhitespace<Boolean>- Remove whitespaceminifyIdentifiers<Boolean>- Shorten identifiersminifySyntax<Boolean>- Use equivalent but shorter syntaxsourcemap<Boolean>(defaults to Webpackdevtool)- Whether to emit sourcemaps
- MIT © privatenumber
- MIT © EGOIST (Kevin Titor)