Webpack

webpack 3,824 , first published in 2012, made the JavaScript entry point the center of a front-end build: CSS, images and fonts are imported from JavaScript and become modules in the same graph. Many large applications still build with webpack 5 (5.111 in September 2026), and its loader and plugin API lives on in Rspack (esbuild, Rollup and Others). Four concepts cover most configurations: entry (where the graph starts), output (where bundles go), loaders (transform non-JavaScript files into modules) and plugins (act on the whole compilation, such as generating HTML).

webpack.config.js for an app that imports CSS and an SVG logoJavaScript

import path from 'node:path';
import HtmlWebpackPlugin from 'html-webpack-plugin';
export default (env, argv) => ({
  entry: './src/app.js',
  output: {
    path: path.resolve(import.meta.dirname, 'dist'),
    filename: '[name].[contenthash:8].js',
    clean: true,                        // empty dist/ before each build
  },
  devtool: argv.mode === 'production' ? 'source-map' : 'eval-cheap-module-source-map',
  module: {
    rules: [
      { test: /\.css$/i, use: ['style-loader', 'css-loader'] },   // loaders run right to left
      { test: /\.(png|jpe?g|gif|svg)$/i, type: 'asset/resource' },
    ],
  },
  plugins: [new HtmlWebpackPlugin({ title: 'webpack demo' })],
  devServer: { port: 8080, hot: true },
});

After npm 2,036 install -D webpack webpack-cli webpack-dev-server html-webpack-plugin css-loader style-loader, and with "build": "webpack --mode production" and "dev": "webpack serve --mode development" in package.json, a build prints:

Output of 48

asset main.f085c272.js 5.82 KiB [emitted] [immutable] [minimized] (name: main) 1 related asset
asset index.html 204 bytes [emitted] [minimized]
asset a9aace96a098fd0bd70e.svg 111 bytes [emitted] [immutable] [from: src/logo.svg]
  ./src/app.js + 9 modules 7.26 KiB [built] [code generated]
webpack 5.111.0 compiled successfully in 963 ms

--mode production turns on minification (Terser 9,344 ), scope hoisting and tree shaking of unused exports; development favors fast rebuilds and readable output. style-loader injects the CSS through a <style> tag at run time, which is why the JavaScript is 5.8 KiB; mini-css-extract-plugin writes a real .css file instead.

MENU