esbuild-plugin-global-externals VS esbuild-loader

The only thing that tripped me up was the difference between esbuild's `externals` and webpack's `externals`. In webpack you can use the externals config to skip bundling a module and instead get it from another source such as a Node module or, in my case, from a global variable in the browser. In esbuild, an external module is only for the first situation (getting a module from Node instead of bundling it), so I was confused about how I can transfer the desired behavior over to esbuild. Luckily I found a plugin that does exactly what I want: [0].

Other than that, I'm pretty darn satisfied with what esbuild can do out of the box. I don't use any other plugins except global externals, and I don't find myself missing anything from webpack. So far it's just better in every way (for myself at least).

[0]: https://github.com/fal-works/esbuild-plugin-global-externals

i see. there are a loaders like https://github.com/privatenumber/esbuild-loader that works with webpack but i haven't given it a try yet.

you can use it with webpack didn't try it myself

If you are a webpack user and have heard about esbuild speed, you may start questioning your js-bundler choices. Luckily, you don't have to drop your hand-crafted webpack config just now. Thanks to esbuild-loader, you can get part of the speed improvement without doing a whole migration.

esbuild-loader (secret sauce!) fork-ts-checker-webpack-plugin (helps us with typechecking) nodemon-webpack-plugin (We can also use webpack-dev-server)

For people already on webpack, there's esbuild-loader (https://github.com/privatenumber/esbuild-loader)

esbuild is a JS and TS bundler that promises ultra-fast build times. We use webpack, and there is support to leverage esbuild with esbuild-loader.

The first thing I did was replace babel-loader and Terser (minification tool) with esbuild-loader. This made our JS compile around 12 times faster, it went down to 1.4 seconds. It was a good start.

In fact, the create-react-app-esbuild is only an encapsulation of esbuild-loader.

I just started using this: privatenumber/esbuild-loader: ⚡️ Speed up your Webpack build with esbuild (github.com)

Both would be good to file. I’m happy to investigate myself if you don’t have the time.

One thing to be aware of is that some other tools that integrate esbuild do so incorrectly. For example, the 3rd-party integration of esbuild into Webpack mis-configures esbuild in a way that causes issues with JSX: https://github.com/privatenumber/esbuild-loader/pull/107. This isn’t a problem with esbuild itself.