Webpack Cheatsheet - Frontend Build Tool Configuration Reference

Webpack’s power is real and its config is where that power lives or hides. This reference covers entry/output, Loaders for each asset type, Plugins, dev-server/HMR, code splitting and optimizations, plus mode/environment. Use it when a new asset type won't load, HMR dies, or a bundle is inexplicably huge. Rather than echo boilerplate, it points to the flag or plugin that addresses the failure. After reading you configure and tune a build without reading the full Webpack docs.

Languages·45 commands·Last updated 2026-07-21

Entry & Output 6

entry: "./src/index.js"

Single entry file

entry: { app: "./src/app.js", vendor: "./src/vendor.js" }

Multi-entry config

output.filename: "[name].[contenthash].js"

Output filename (content hash)

output.path: path.resolve(__dirname, "dist")

Output dir (absolute path)

output.publicPath: "/assets/"

Public path prefix

output.clean: true

Clean dist before build (Webpack 5)

Loaders 8

{ test: /\.css$/, use: ["style-loader", "css-loader"] }

Inline CSS into DOM

{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"] }

Extract CSS + PostCSS

{ test: /\.js$/, exclude: /node_modules/, use: "babel-loader" }

Transpile JS with Babel

{ test: /\.tsx?$/, use: "ts-loader" }

Handle TypeScript

{ test: /\.(png|jpg|gif)$/, type: "asset/resource" }

Image assets (asset modules)

{ test: /\.svg$/, type: "asset/source" }

Inline SVG as string

{ test: /\.(woff2?|ttf|eot)$/, type: "asset/resource" }

Font assets

{ test: /\.(js|ts)$/, enforce: "pre", use: "source-map-loader" }

Load existing source maps

Plugins 7

new HtmlWebpackPlugin({ template: "./src/index.html" })

Auto-generate HTML

new MiniCssExtractPlugin({ filename: "[name].[contenthash].css" })

Extract CSS to a file

new DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") })

Inject global env vars

new CopyWebpackPlugin({ patterns: [{ from: "public", to: "." }] })

Copy static files to dist

new ProvidePlugin({ _: "lodash" })

Auto-load a module (no import)

new HotModuleReplacementPlugin()

HMR plugin

new BannerPlugin({ banner: "Built at " + new Date().toISOString() })

Add a banner comment

Dev Server 6

devServer.hot: true

Enable HMR

devServer.historyApiFallback: true

SPA history fallback to index

devServer.port: 5000, open: true

Set port and auto-open

devServer.static: path.join(__dirname, "public")

Static file dir

devServer.proxy: { "/api": "http://localhost:3000" }

Proxy API to backend

devServer.proxy: { "/api": { target: "http://localhost:3000", pathRewrite: { "^/api": "" } } }

Proxy and rewrite path

Optimization 7

optimization.splitChunks: { chunks: "all" }

Auto-split shared code

optimization.minimize: true

Enable minification

optimization.minimizer: [new TerserPlugin({ extractComments: false })]

Custom JS minifier

optimization.runtimeChunk: "single"

Split runtime to a file

import("./module").then(m => m.default)

Dynamic import (lazy route)

/* webpackChunkName: "vendor" */

Magic comment chunk name

/* webpackPrefetch: true */

Prefetch lazy chunk

Mode & Environment 6

mode: "production" | "development" | "none"

Three built-in modes

webpack --config webpack.prod.js --mode production

CLI config and mode

module.exports = (env, argv) => ({ mode: argv.mode })

Function config reads argv

devtool: argv.mode === "development" ? "eval-cheap-source-map" : "source-map"

Toggle source map by mode

const { merge } = require("webpack-merge"); merge(common, prodConfig)

Merge common and env config

new webpack.EnvironmentPlugin(["NODE_ENV", "API_URL"])

Bulk-inject process.env vars

Build Analysis 5

new BundleAnalyzerPlugin({ analyzerMode: "static" })

Static bundle analysis report

stats: "minimal" | "normal" | "detailed"

Control log verbosity

performance: { hints: "warning", maxAssetSize: 250000 }

Asset-size performance hint

webpack --json > stats.json

Export stats JSON

devtool: "source-map" | "eval-cheap-module-source-map"

Source map speed vs quality

Tips

Webpack 5 has built-in asset modules, replacing file-loader and url-loader.
devServer.hot enables HMR for a smoother dev experience.
splitChunks splits code by vendor/common to shrink first-load size.
webpack-bundle-analyzer visualizes bundle size.
Production mode enables tree shaking, which needs ESM imports/exports.
[name].[contenthash].js gives long-term caching; unchanged files keep their hash and hit the browser cache.

Official References

Each command links to its official documentation below, so you can verify the latest usage and read deeper.

Node.js Docs

Maintained by LaoHand

Publicly updated on Jul 21, 2026, continuously proofread against official docs.

Contact Us

Wrong command or description? Send us corrections, business inquiries or product feedback by email.