Webpack

Pronunciation: WEB-pak

Updated October 3, 20262 min read

In short

Webpack is a module bundler that follows an app's imports and combines its JavaScript, CSS, images and other files into optimized bundles for the browser.

What is webpack?

Webpack was first released in 2014 and became the standard build tool of the React and single-page application era. It starts from an entry file, follows every import and require to build a dependency graph of the whole application, and writes the result out as one or more bundle files the browser can load efficiently.

Its power comes from loaders and plugins. Loaders let webpack understand non-JavaScript files: TypeScript through a TypeScript loader, Sass through a Sass loader, images and fonts as assets. Plugins hook into the build to minify code, extract CSS, generate HTML, split code into chunks loaded on demand and remove unused exports through tree shaking.

During development, webpack's dev server rebuilds on every save and can swap changed modules into the running page with hot module replacement. All of this is configured in a webpack.config.js file, which made webpack extremely flexible and also famous for complicated configurations.

A common misconception is that webpack is obsolete. New projects now usually start with faster tools such as Vite or framework-specific bundlers, but a huge number of existing applications still build with webpack, and its ideas, such as loaders, code splitting and hot module replacement, shaped every bundler that came after it.

Key takeaways

Webpack bundles an app's modules and assets into files for the browser.
It builds a dependency graph by following every import from an entry file.
Loaders handle non-JavaScript files; plugins extend the build.
It supports code splitting, tree shaking and hot module replacement.
Newer tools like Vite are faster, but webpack still runs many apps.

Example

A small webpack.config.jsjavascript

// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "production",
  entry: "./src/index.ts",
  output: { filename: "[name].[contenthash].js", clean: true },
  resolve: { extensions: [".ts", ".js"] },
  module: {
    rules: [
      { test: /\.ts$/, use: "ts-loader" },                 // TypeScript
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      { test: /\.(png|svg)$/, type: "asset" },             // images
    ],
  },
  plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })],
};

Readers ask

What is the difference between webpack and Vite?

Webpack bundles the whole application before serving it, even in development. Vite serves source files to the browser as native ES modules during development, so it starts almost instantly, and bundles only for production.

What is a webpack loader?

A transformer that lets webpack import a file type it doesn't understand natively, such as TypeScript, Sass, CSS or images, by converting it into modules it can bundle.

Do I need to configure webpack myself?

Often not. Many frameworks and starter tools configure a bundler for you. You mostly meet webpack configuration directly in older or custom-built projects.

Often compared

Vite vs WebpackWebpack bundles the whole app before serving it, even in development, while Vite serves native ES modules and bundles only for production, so it starts fast.