Webpack 5 Config Cheat Sheet

Quick reference guide for Webpack 5: Entry/output, loaders, plugins, code splitting, and dev server.

Build Tools
webpack
bundler
javascript

Webpack is a static module bundler for modern JavaScript applications that builds a dependency graph mapping every module your project needs.

Configuration Structure Example (`webpack.config.js`)

javascript
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: "production",
  entry: "./src/index.ts",
  output: {
    filename: "[name].[contenthash].js",
    path: path.resolve(__dirname, "dist"),
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      }
    ]
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"]
  },
  plugins: [
    new HtmlWebpackPlugin({ template: "./public/index.html" }),
    new MiniCssExtractPlugin({ filename: "[name].[contenthash].css" })
  ]
};

Essential Core Concepts

Table
ConceptPurposeConfiguration Key
EntryPoint where Webpack starts building internal dependency graphentry: './src/index.js'
OutputTells Webpack where to emit the bundled assets and filesoutput: { path, filename }
LoadersTransform non-JS files (CSS, TypeScript, Images) into valid modulesmodule: { rules: [...] }
PluginsPerform wide-range tasks like bundle optimization, asset managementplugins: [...]
OptimizationConfigure code splitting (splitChunks) and minificationoptimization: { splitChunks }

Essential CLI Commands

Table
CommandAction / Purpose
npx webpackBuild project using default webpack.config.js
npx webpack --mode=developmentRun build in development mode with sourcemaps
npx webpack serveStart local webpack-dev-server with HMR enabled

Common Pitfalls & Tips

[!WARNING] Webpack loader order matters! Rules in use: ['style-loader', 'css-loader', 'sass-loader'] are evaluated right-to-left (or bottom-to-top).

[!TIP] Use output.contenthash in production filenames ([name].[contenthash].js) to enforce aggressive browser caching with automatic cache-busting.

Related tools

CSS & JS MinifierHTML Minifier