{"id":13132,"library":"esbuild-loader","title":"esbuild-loader for Webpack","description":"esbuild-loader is a Webpack loader that integrates esbuild, a high-performance JavaScript bundler written in Go, into the Webpack build process. Its primary purpose is to significantly accelerate transpilation for ESNext and TypeScript, as well as JavaScript minification, offering a faster alternative to traditional tools like babel-loader, ts-loader, and Terser. The current stable version is 4.4.3 (as of April 2026), with releases occurring several times a year, primarily focusing on bug fixes and upgrading its internal esbuild dependency to leverage the latest performance improvements and features. Key differentiators include its exceptional speed, efficient handling of both JavaScript and TypeScript out-of-the-box, and a smaller footprint compared to multi-tool setups. It supports Webpack 4 and 5 as a peer dependency, making it a drop-in replacement for many common transpilation and minification workflows.","status":"active","version":"4.4.3","language":"javascript","source_language":"en","source_url":"https://github.com/privatenumber/esbuild-loader","tags":["javascript","esbuild","webpack","loader","typescript","esnext"],"install":[{"cmd":"npm install esbuild-loader","lang":"bash","label":"npm"},{"cmd":"yarn add esbuild-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add esbuild-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for esbuild-loader to function as a Webpack loader.","package":"webpack","optional":false}],"imports":[{"note":"Used in Webpack `module.rules` to apply the loader to matching files. No direct JavaScript `import` statement for the loader itself.","symbol":"esbuild-loader (loader string)","correct":"loader: 'esbuild-loader'"},{"note":"Used in Webpack `optimization.minimizer` to enable esbuild-based minification. This module is ESM-first, so `require` might lead to issues in some setups.","wrong":"const { EsbuildPlugin } = require('esbuild-loader')","symbol":"EsbuildPlugin","correct":"import { EsbuildPlugin } from 'esbuild-loader'"},{"note":"While not a direct import, this JSDoc type import allows for type checking and autocompletion for the loader's options object within `webpack.config.js`.","symbol":"TypeScript types (for loader options)","correct":"/** @type {import('esbuild-loader').Options} */"}],"quickstart":{"code":"const { EsbuildPlugin } = require('esbuild-loader');\n\nmodule.exports = {\n  mode: 'development',\n  entry: './src/index.ts',\n  output: {\n    filename: 'bundle.js',\n    path: require('path').resolve(__dirname, 'dist'),\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.[jt]sx?$/,\n        loader: 'esbuild-loader',\n        options: {\n          loader: 'tsx', // Or 'ts', 'jsx', 'js'\n          target: 'es2018', // JavaScript version to compile to\n        },\n      },\n    ],\n  },\n  resolve: {\n    extensions: ['.tsx', '.ts', '.js'],\n  },\n  optimization: {\n    minimizer: [\n      new EsbuildPlugin({\n        target: 'es2018',\n        css: true, // Enable CSS minification\n      }),\n    ],\n  },\n};\n","lang":"typescript","description":"This configuration demonstrates how to use esbuild-loader for both transpilation and minification in a Webpack project, replacing `ts-loader` and `TerserPlugin` for faster builds."},"warnings":[{"fix":"Remove `babel-loader` and `ts-loader` rules from `module.rules`. `esbuild-loader` handles both JavaScript and TypeScript.","message":"When migrating to esbuild-loader, ensure you remove existing transpilers like `babel-loader` and `ts-loader` from your Webpack configuration to avoid conflicts and ensure `esbuild-loader` is used.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Consider using alternative `devtool` configurations (e.g., `source-map` or `cheap-source-map`) if you rely heavily on the `define` option for environment variables, or carefully test your setup.","message":"Using the `define` option in `esbuild-loader` with `eval`-based devtools (e.g., `devtool: 'eval-source-map'` in Webpack) can lead to unexpected behavior or incorrect variable definitions.","severity":"gotcha","affected_versions":">=4.4.2"},{"fix":"Set `options.target` to a value that matches your runtime environment's supported features (e.g., `es2018` for modern browsers, `node14` for Node.js 14+). You can specify an array for multiple targets, e.g., `['chrome58', 'firefox57', 'safari11']`.","message":"The `target` option in `esbuild-loader` (and `EsbuildPlugin`) specifies the ECMAScript version to compile to. An incorrect `target` can result in output code that is not compatible with your intended browser or Node.js environments, or conversely, produces larger bundles than necessary.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"If `.js` files contain JSX, set `options: { loader: 'jsx' }`. If `.ts` files contain TSX, ensure `options: { loader: 'tsx' }` is used. Generally, let esbuild infer from file extension unless specific overrides are needed.","message":"The `loader` option within `esbuild-loader`'s configuration explicitly tells esbuild how to interpret a file (e.g., `jsx`, `tsx`, `js`, `ts`), overriding its default behavior based on file extension. Misconfiguring this can lead to syntax errors.","severity":"gotcha","affected_versions":">=4.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `esbuild-loader` is configured with a `test` regex that matches the problematic file, and verify the `options.target` is sufficiently high (e.g., `es2018` or `esnext`). Also, check for conflicting loaders.","cause":"Webpack is trying to process a file (e.g., TypeScript or modern JavaScript) without `esbuild-loader` being correctly applied, or `esbuild-loader`'s `target` option is too low for the syntax.","error":"Module parse failed: Unexpected token (XX:YY)\nYou may need an appropriate loader to handle this file type, currently no loaders are configured to process this file."},{"fix":"Install the missing peer dependency: `npm install webpack` (or `yarn add webpack`) for Webpack, and ensure `esbuild-loader` has installed its internal `esbuild` dependency, or `npm install esbuild` if you use it directly.","cause":"`webpack` or `esbuild` (the underlying bundler) are missing from your project's `node_modules`.","error":"Error: Cannot find module 'webpack' or Error: Cannot find module 'esbuild'"},{"fix":"Ensure `esbuild-loader` is installed as a development dependency: `npm install -D esbuild-loader` or `yarn add -D esbuild-loader`.","cause":"`esbuild-loader` is not installed or Webpack cannot resolve its path.","error":"Webpack compilation error: 'esbuild-loader' is not recognized as a valid loader name."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":""}