How to set up Webpack to minify JS with esbuild
Webpack is one of the most popular JavaScript bundler tools. It uses a Terser compressor to process JavaScript files by default. Terser was a reasonable replacement of UglifyJS since it added support of next-generation JavaScript syntax and performed faster on benchmarks and production. Terser was a big step forward for JavaScript bundling solutions, but is it still a great choice today?
Esbuild is a modern JavaScript bundler toolkit written in Go. It supports ESNext, JSX, TypeScript syntax, tree shaking, and blazing fast cacheless minification. Esbuild has amazing performance and JavaScript compatible API makes it possible to integrate its utilities with existing JavaScript bundlers. There is a plugin that brings esbuild transpilation and minification alternatives in Webpack called esbuild-loader. This article shows a few basic examples of integrating esbuild-loader in Webpack, and also replacing Terser minifier with esbuild.
Load esbuild in Webpack
esbuild-loader provides a module that performs JavaScript transpilation instead of your current module. If you are using babel-loader remove the lines from the project webpack.config.js file rules section:
{
test: /\.js$/,
use: 'babel-loader',
}
Remove these lines if you are using TypeScript code transpiler:
{
test: /\.ts$/,
use: 'ts-loader',
}
Load esbuild instead by adding these lines:
{
test: /\.js$/,
loader: 'esbuild-loader',
options: {
loader: 'js',
target: 'es2015'
}
}
The updated configuration file should like this:
module.exports = {
module: {
rules: [
{
test: /\.js$/,
loader: 'esbuild-loader',
options: {
loader: 'js',
target: 'es2015'
}
},
...
],
},
}
Notice that in this example esbuild-loader accepts two configuration options:
loaderaccepts a string with a loader name to handle files. Possible values are'js' | 'jsx' | 'ts' | 'tsx' | 'css' | 'json' | 'text' | 'base64' | 'file' | 'dataurl' | 'binary' | 'default'. Default value isjs;targetaccepts a string to specify an identifier of the environment (chrome, firefox, safari, edge, or node) or ECMAScript version (es2015, es2016, or esnext).
Minify JavaScript with esbuild
To enable JavaScript minification export the required esbuild plugin in the project webpack.config.js:
const { ESBuildMinifyPlugin } = require('esbuild-loader');
In the optimization section of webpack configuration add include exported minimizer:
minimizer: [
new ESBuildMinifyPlugin({
target: 'es2015'
})
]
You can specify the target option value to the latest versions of JavaScript for better optimization results.
After the above, webpack.config.js should look like this:
const { ESBuildMinifyPlugin } = require('esbuild-loader')
module.exports = {
...,
optimization: {
minimizer: [
new ESBuildMinifyPlugin({
target: 'es2015' // Syntax to compile to (see options below for possible values)
})
]
},
}
Conslusion
This article describes Webpack configuration of the eslint-loader module. Two basic examples showcase the use of eslint-loader to perform transpilation and minimization tasks.
Published on Feb 05, 2022 by Oleh Pratsko