Webpack Cheatsheet - Frontend Build Tool Configuration Reference

Long-term caching. With output.filename: "[name].[contenthash].js" the asset name changes with its content: an unchanged chunk keeps the same hash and the browser is free to reuse its strong cache, while any edit changes the hash and therefore the URL, so users pick up the new file without clearing caches and never run stale code. A fixed name like bundle.js instead pins the browser to the old file. Three settings support this: output.path must be absolute (path.resolve(__dirname, "dist")), output.publicPath: "/assets/" sets the URL prefix, and output.clean: true makes Webpack 5 purge dist before building so stale hashed files do not pile up. The CSS side follows the same pattern with MiniCssExtractPlugin emitting [name].[contenthash].css.

It depends on whether the CSS is injected at runtime or emitted as its own file. During development use { test: /\.css$/, use: ["style-loader", "css-loader"] }: style-loader injects the CSS into the DOM and, with devServer.hot: true, gives you hot style replacement so edits appear immediately with no extra request. For production switch to { test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"] }, which extracts a real file and lets PostCSS in, then name it with new MiniCssExtractPlugin({ filename: "[name].[contenthash].css" }). The reasoning is simple: the inline approach cannot use the browser cache and causes a flash of unstyled content, so built output should always be extracted.

No. Asset modules are built in and replace file-loader and url-loader. Images use { test: /\.(png|jpg|gif)$/, type: "asset/resource" } to emit a separate file and return a URL; SVG, when you want it as a string, uses { test: /\.svg$/, type: "asset/source" }; fonts follow the same resource pattern with { test: /\.(woff2?|ttf|eot)$/, type: "asset/resource" }. There is also { test: /\.(js|ts)$/, enforce: "pre", use: "source-map-loader" } which runs in the pre stage to pick up source maps shipped by dependencies, so stack traces from minified code can still be traced back to the original TypeScript. To copy a whole static directory, use new CopyWebpackPlugin({ patterns: [{ from: "public", to: "." }] }).

Each symptom has its own option. historyApiFallback: true rewrites unmatched SPA history routes to index.html, so opening /users/123 directly is handled by the front-end router and a refresh no longer 404s. For cross-origin calls, proxy the request: { "/api": "http://localhost:3000" } solves most cases, and when the path needs rewriting use the object form { "/api": { target: "http://localhost:3000", pathRewrite: { "^/api": "" } } } to strip the prefix before forwarding, so the backend needs no dev-only /api prefix. Related settings: devServer.hot: true for HMR, devServer.port: 5000 with open: true to pick a port and launch the browser, and devServer.static pointing at the public directory.

Four settings work together. optimization.splitChunks: { chunks: "all" } automatically lifts shared code out of each entry; optimization.runtimeChunk: "single" extracts the webpack runtime so it is not duplicated inside every chunk; optimization.minimize: true turns on minification, and the custom form is optimization.minimizer: [new TerserPlugin({ extractComments: false })]. Route-level lazy loading uses the dynamic import import("./module").then(m => m.default), combined with the magic comments /* webpackChunkName: "vendor" */ to name the chunk and /* webpackPrefetch: true */ to fetch it during idle time. Production mode enables tree shaking automatically, but it only bites when the code is written with ESM import/export.