Front-end Web Development Build Tools Syllabus

What are Yarn/npm workspaces used for?

Managing a monorepo: multiple packages within a single repository share one install, hoisting common dependencies and enabling cross-package linking.

What is Webpack?

Webpack is a static module bundler for JavaScript applications. It builds a dependency graph from entry points and bundles modules (JS, CSS, images, etc.) into optimized output files.

What is the entry point in Webpack?

The module Webpack uses to start building its internal dependency graph (default ./src/index.js); from it Webpack determines which other modules and libraries the entry depends on.

What is the output configuration in Webpack?

It tells Webpack where to emit the bundles and how to name them (default ./dist/main.js with output path ./dist).

What are loaders in Webpack?

Loaders let Webpack process and transform non-JavaScript files (e.g. transpile via babel-loader, handle CSS via css-loader) so they can be added to the dependency graph as modules.

What are plugins in Webpack and how do they differ from loaders?

Plugins perform broader build tasks across the whole bundle (e.g. asset optimization, injecting HTML, defining env variables). Loaders transform individual files; plugins act on the bundling process as a whole.

What is the difference between Webpack's development and production modes?

mode: 'development' optimizes for build speed and debugging (readable output, source maps); mode: 'production' enables optimizations like minification and tree shaking for smaller, faster bundles.

What is tree shaking in Webpack?

A dead-code elimination technique that removes unused exports from the final bundle. It relies on ES module static import/export syntax to detect what code is actually used.

What is code splitting in Webpack?

Breaking the bundle into multiple smaller chunks that can be loaded on demand (e.g. via dynamic import()), reducing initial load time.

What is the default config file name for Webpack?

webpack.config.js.

What is Hot Module Replacement (HMR) in Webpack?

A feature that swaps, adds, or removes modules in a running application without a full page reload, preserving application state during development.

What are the four core concepts of Webpack configuration?

Entry, Output, Loaders (module.rules), and Plugins. (Mode and devServer are also commonly configured.)

What is webpack-dev-server?

A development server that serves the bundle from memory, provides live reloading and HMR, and speeds up the develop-test loop.

What is Parcel?

Parcel is a zero-configuration web application bundler. It works out of the box without a config file, automatically handling assets, transforms, and dependencies.

What is Parcel's main selling point compared to Webpack?

Zero configuration — Parcel auto-detects and configures transforms, so developers can bundle apps without writing a config file, whereas Webpack typically requires explicit configuration.

How does Parcel achieve fast build times?

It uses multicore/parallel processing across CPU cores and a filesystem cache that persists between builds for fast incremental rebuilds.

How do you typically start a Parcel project from an HTML entry?

parcel index.html — Parcel treats the HTML file as the entry point, follows its asset references, and serves it with a dev server and hot reloading.

What is Gulp?

Gulp is a JavaScript task runner and build automation tool that uses code-over-configuration and Node.js streams to automate tasks like minification, compilation, and image optimization.

What programming approach does Gulp use to define its build pipeline?

Streaming, code-over-configuration: tasks are JS functions that pipe file streams through transformations using .pipe(), processing files in memory without temporary files.

What is Gulp's configuration file named?

gulpfile.js.

What is the role of .pipe() in Gulp?

It chains transformations together, passing the stream of files from one plugin to the next (e.g. gulp.src().pipe(sass()).pipe(gulp.dest())), avoiding intermediate files on disk.

What do gulp.src() and gulp.dest() do?

gulp.src() reads matching files into a stream (the source); gulp.dest() writes the processed stream to an output directory (the destination).

What is Grunt?

Grunt is a JavaScript task runner that automates repetitive build tasks using a configuration-over-code approach driven by a large plugin ecosystem.

What is Grunt's configuration file named?

Gruntfile.js (where tasks are configured via grunt.initConfig).

What is the main architectural difference between Gulp and Grunt?

Gulp uses code-over-configuration with in-memory streams (piping), while Grunt uses configuration-over-code where each plugin reads from and writes intermediate files to disk between steps.

How does Gulp's file handling typically make it faster than Grunt?

Gulp pipes files through transformations in memory (streams) without writing intermediate files to disk, whereas Grunt writes temporary files between each task, adding I/O overhead.

What is the fundamental difference between a package manager and a module bundler?

A package manager (npm, Yarn) installs and manages project dependencies; a module bundler (Webpack, Parcel) combines source modules and assets into optimized files for the browser.

What is the difference between a task runner and a module bundler?

A task runner (Gulp, Grunt) automates discrete build tasks (linting, compiling, copying) via a pipeline; a module bundler (Webpack, Parcel) specifically resolves a module dependency graph and outputs bundles.

Classify these build tools by category: npm, Yarn, Webpack, Parcel, Gulp, Grunt.

Package managers: npm, Yarn. Module bundlers: Webpack, Parcel. Task runners: Gulp, Grunt.

What is minification, a common output of build tools?

Removing unnecessary characters (whitespace, comments, shortening variable names) from code without changing functionality, to reduce file size and improve load performance.