Bundlers

Bundlers bundle assets and scripts.

• e.g. Rollup, Parcel, Webpack, Vite.

Bundling assets combine multiple file dependencies and combine them into one or more optimized files (bundles).

• effect = reduces number of requests and load times.

Many modules with dependencies (graph of modules with many connections amongst themselves) become bundled to fewer static assets.

• e.g. multiple JS files to a single JS file

Bundler like webpack creates a dependency graph to track how to put everything together.

You need to tell Webpack where to find the entrypoint and it'll piece all dependencies and imports together into that single file.

Builders

In JS ecosystem, bundlers and builders are used interachangeably and are synonymous.

However, some builders do more than just bundle packages.

Vite, for example,

Builders also rebuild the app when a change is pushed to a remote branch.

• Allowing rebuilding of app live almost instantly.

Hybrids

Some builders like Vite use EsBuild underneath for benefits of using multiple different tools.

• some are advantageous for Dev Reload while others are better for Production build.

What are devDependencies

When you are actively developing the application locally, importing external modules from npm are not supported.

import "some-package"

You need to use a bundler like webpack so other files can get bundled to a single JS file to be executed by the browser.

package.json

In package.json file, the scripts field which may contain build, start, and any other executable commands are aliases for module bundler execution code.

Executing the webpack command will analyze the index.js file and compile codes to generate a dist folder which contains the code to ship to the end-user in the browser.

Browser would point to this dist folder content using script tag in html to execute the bundled JS files.

webpack.config.js

This webpack file is a plain Js file that module.exports configurations.

Code splitting entrypoints using entry.

• Code splitting is done to load split bundles by pointing to different entrypoints.

output is what we want to compile our JS code to.

Loaders

Loaders pre-process files that are not native JS.

Loaders process the corresponding file type it can process then injects it to the DOM.

plugin

Taps into lifecycle of the webpack bundler itself.

dev server

Webpaack dev server allows you to configure things like hot module replacement, port, and compression when developing locally.