Module Bundlers

Table of contents

• Description
  • What is their purpose?
  • When they are used?
  • How does their usually work?
• Bundlers
  • ESBuild
  • Parcel
  • Rollup
  • Webpack
• Demo
  • Details
  • Installation

Description

What is their purpose?

• browsers (or node.js) understand JavaScript, not JSX or TypeScript
• browsers understand CSS, not SASS (SCSS) or LESS
• to deliver optimized code for users - bundled, minified
• etc.

When they are used?

• always 🙂, usually indirectly
• Create React App uses webpack
• Gatsby uses webpack
• Vue CLI uses webpack
• Angular CLI uses webpack (has experimental esbuild support)
• Vite uses rollup

How does their usually work?

Typical config has the following properties:

• entry point (single or multiple)
• output details
  • output file(s) name
  • output directory
  • etc.
• bundling details
  • use minification
  • add source maps
  • etc.
• set of plugins
  • perform manipulations not supported out of the box
  • use lifecycle hooks to inject their logic

Bundlers

ESBuild

• Config example
• Documentation
• Run yarn build:esbuild to bundle the demo app.

Parcel

• Zero configuration build tool.
• Documentation
• Run yarn build:parcel to bundle the demo app (uncomment script in the index.html before).

Rollup

• Config example
• Documentation
• Run yarn build:rollup to bundle the demo app.

Webpack

• Config example
• Documentation
• Run yarn build:webpack to bundle the demo app.

Demo

Details

An example app is close to the real-world infrastructure:

• written in TypeScript;
• imports 3rd party libraries;
• has unused imports (to test tree shaking);
• has lazy loading modules;
• uses CSS preprocessor (SASS);
• uses partially-supported CSS rules, which require vendor prefixes (autoprefixer);

Installation

yarn install --frozen-lockfile