webpack

webpack is a JavaScript module bundler that starts from an entry file, follows every import to build a dependency graph, and writes the modules a project needs into one or more bundle files. Loaders let the same graph include CSS and TypeScript files, and plugins add jobs such as minifying the output or generating an HTML page. Here’s how a small project moves through those steps:

src/index.js imports cart.js and styles.css, css-loader feeds the CSS into the dependency graph, and plugins minify it into dist/main.js.
Webpack's Path From Entry File to Bundle

The webpack team maintains the bundler in the webpack package and its command-line interface in the separate webpack-cli package. Other bundlers that fill the same role include Vite, Rollup, esbuild, and Rspack, which accepts most webpack configuration options.

Installation and Setup

The webpack documentation recommends installing both packages as project-local dev dependencies:

Shell 
$ npm install --save-dev webpack webpack-cli

The webpack 5 package runs on Node.js 10.13.0 or later, but webpack-cli 7 needs Node.js 20.9.0 or later.

Key Features

  • Builds without a config file by bundling src/index.js into dist/main.js.
  • Transforms files on their way into the bundle through loaders such as css-loader and babel-loader.
  • Removes unused exports and minifies the output in production mode, the default mode.
  • Splits code into chunks that load on demand when the source calls import().
  • Rebuilds on every file change in watch mode, and serves pages through the separate webpack-dev-server package.

Usage

Say a shop’s src/index.js file imports a cartTotal() function from src/cart.js. Without a config file, webpack bundles both modules into dist/main.js. Running it through npx uses the project’s local copy, and --mode picks the production or development defaults:

Shell 
$ npx webpack --mode=production
asset main.js 97 bytes [emitted] [minimized] (name: main)
orphan modules 112 bytes [orphan] 1 module
./src/index.js + 1 modules 205 bytes [built] [code generated]
webpack 5.112.2 compiled successfully in 249 ms

Development mode skips minification and keeps readable module names, which makes the bundle easier to debug:

Shell 
$ npx webpack --mode=development

The --watch flag keeps webpack running and rebuilds the bundle whenever a source file changes:

Shell 
$ npx webpack --watch --mode=development

As the project grows, the settings move into a config file that webpack finds on its own. This webpack.config.mjs file names the entry, the output file, and the mode, and clears out old builds:

JavaScript 
import path from "node:path";

export default {
  mode: "production",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(import.meta.dirname, "dist"),
    clean: true,
  },
};

Most projects then call webpack through an npm script in package.json, so npm run build runs the build:

JSON 
{
  "scripts": {
    "build": "webpack"
  }
}

For every option, loader, and plugin, see the webpack documentation.

A developer loads boxes onto a conveyor feeding a cabinet of module drawers, with a crane arm beside an IMPORT sign and a terminal printing a log.

Course

JavaScript Modules and Scripts for Pythonistas

Have a question about this? Mentor AI can show you examples, compare related terms, and point you to tutorials.

  • Ask Mentor AI
  • Pick a question and Mentor AI takes it from here.
By Leodanis Pozo Ramos • Updated Nov. 6, 2026
JavaScript Tools Share Feedback