esbuild VS webpack

I will use TypeScript with esbuild bundler, which is a fast and highly efficient builder for JavaScript and TypeScript.

Bundling extensions — in general, custom extension formats require custom bundling tools. Currently, as it’s still early, I put everything into a single JSON file with Node.js and esbuild bundler, but I’m exploring how to develop a custom Vite plugin for this purpose;

Chris favours using the ESBuild bundler to work out the shortcomings. ESBuild can bundle CSS files into a single CSS file. ESBuild can transform your natively nested CSS to "flat" CSS -- this is important since nesting is not in Firefox currently. Therefore, with the aid of ESBuild, Chris has feature parity for his usage of Sass. The other Sass features like mixins and inheritance do not appeal to Chris.

Rollup is highly configurable via plugins. It also supports a wide range of transpilation targets. However, it's written in JavaScript (well, TypeScript) so there's a ceiling on how fast it can go. esbuild and swc are orders-of-magnitude faster than Rollup.

Note that `deno bundle` is deprecated. You can almost replace it with esbuild but it currently lacks builtin support for import maps:

    deno run --allow-all https://deno.land/x/[email protected]/mod.js --bundle app.js --outfile=bundle.js. # errors, see: https://github.com/evanw/esbuild/issues/2230

Want to import a package / file conveniently from esm.sh or unpkg or directly from a GitHub repo for a one-off script (for example). To do this I created a custom ESBuild plugin to handle HTTP imports - that worked for ,js files. To support running both ESM and CJS, I use tsx.

esbuild – is an easy-to-configure bundler,

As we iterate on the definition, we are going to want a better developer experience for rebuilding the package on changes. Typically, for a “library” or “utility” style package, I’d reach for either unbuild’s stub concept or use esbuild/tsup/rollup to implement a more traditional watch/rebuild, but in this case, I’m watching a proto file that lives outsides of the source, which breaks assumptions of those tools.

I use ESBuild (https://esbuild.github.io/) as a library for my almost pure Go toolchain, and it covers my requirements for almost 2 years now. ESBuild is the Go tool used in Vite, an incredible tool that I stopped using when I discovered that ESBuild covered all my needs.

As we can see, we have two external dependencies and one internal tool. In the modern way of packaging our application, we would be of course required to package this project using some bundler like ESBuild or Rollup. But with import maps, we can instead utilize CDN's to deliver our packages and completely eliminate the bundling step.

The main reason for writing this post is that although Vite is an excellent tool, it is still relatively new and sometimes lacks extensive documentation. When I initially had to set up a Vite npm package, it took me more time than I'd care to admit to get it working properly. Therefore, I've decided to create this post to help individuals who may be facing a similar situation and are looking for an alternative to Webpack.

i was pleased to see webpack continuing to push out releases recently, i am just speculating but maybe there was a passing of the torch because all previous releases before march of this year were done by sokra and now done by thelarkinn (https://github.com/webpack/webpack/releases)

Webpack supports the imports field starting from v5.0. Path aliases work without any additional configuration. Here is the Webpack configuration I used to build a test project with TypeScript:

Run webpack compilation to generate a browser-compatible bundle and emit bundle size metrics

Even, there are several bundling tools available, including popular ones like Webpack and Snowpack.

The webpack pull request that introduced the cacheWebWorker experiment: https://github.com/webpack/webpack/pull/13262

Issue I found recently working on a security suite build

Webpack is a static module bundler for modern JavaScript applications. On processing your application - Webpack internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets from which content is served.

The other option I want to highlight is packaging the project using something like Webpack or esbuild. JS Bundlers transpile all of your separate files and classes (along with all node_modules) into one single file, a practice originally developed to reduce package size for frontend applications. This helps improve the cold start time in Lambda, as unimported files can be pruned and the entire handler becomes one file.