Modules

Common JS vs EsModule

Module Bundlers

Bundles assets and scripts.

Rollup, Parcel, Webpack, Vite,

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.

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.