Webpack Cheat Sheet
Quick reference for Webpack configuration. Entry, output, loaders, plugins, dev server, optimization, and common patterns — all in one page.
Entry & Output
| entry: "./src/index.js" | Single entry point |
| entry: { app: "./src/app.js", vendor: "./src/vendor.js" } | Multiple entry points |
| output: { filename: "bundle.js", path: path.resolve(__dirname, "dist") } | Output file and directory |
| output: { filename: "[name].[contenthash].js" } | Content-hashed filenames for caching |
| output: { publicPath: "/assets/" } | Public URL prefix for assets |
| output: { clean: true } | Clean output directory before build |
| output: { library: { name: "MyLib", type: "umd" } } | Build as UMD library |
| context: path.resolve(__dirname, "src") | Base directory for resolving entry points |
Loaders
| { test: /\.css$/, use: ["style-loader", "css-loader"] } | Load CSS files into JS bundle |
| { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] } | Load Sass/SCSS files |
| { test: /\.jsx?$/, use: "babel-loader", exclude: /node_modules/ } | Transpile JS/JSX with Babel |
| { test: /\.tsx?$/, use: "ts-loader" } | Compile TypeScript files |
| { test: /\.(png|jpg|gif)$/, type: "asset/resource" } | Emit image files to output dir |
| { test: /\.svg$/, type: "asset/inline" } | Inline SVG as data URI |
| { test: /\.(woff|woff2)$/, type: "asset/resource" } | Load font files |
| { test: /\.txt$/, type: "asset/source" } | Import file as raw string |
Plugins
| new HtmlWebpackPlugin({ template: "./src/index.html" }) | Generate HTML with script tags injected |
| new MiniCssExtractPlugin({ filename: "[name].[contenthash].css" }) | Extract CSS into separate files |
| new DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }) | Define compile-time constants |
| new CopyWebpackPlugin({ patterns: [{ from: "public" }] }) | Copy static files to output |
| new BundleAnalyzerPlugin() | Visualize bundle size breakdown |
| new ESLintPlugin({ extensions: ["js", "jsx"] }) | Run ESLint during build |
| new webpack.ProvidePlugin({ $: "jquery" }) | Auto-import modules as globals |
| new webpack.ProgressPlugin() | Show build progress percentage |
Dev Server
| devServer: { port: 3000 } | Set dev server port |
| devServer: { hot: true } | Enable Hot Module Replacement |
| devServer: { open: true } | Open browser on server start |
| devServer: { proxy: { "/api": "http://localhost:8080" } } | Proxy API requests to backend |
| devServer: { historyApiFallback: true } | Fallback to index.html for SPA routing |
| devServer: { static: "./public" } | Serve static files from directory |
| devServer: { compress: true } | Enable gzip compression |
| devServer: { https: true } | Serve over HTTPS with self-signed cert |
Optimization
| mode: "production" | Enable minification and tree shaking |
| mode: "development" | Enable source maps and readable output |
| devtool: "source-map" | Full source maps for debugging |
| devtool: "eval-source-map" | Fast rebuild source maps for dev |
| optimization: { splitChunks: { chunks: "all" } } | Split vendor and app bundles |
| optimization: { runtimeChunk: "single" } | Extract runtime into separate chunk |
| optimization: { minimize: true } | Enable TerserPlugin minification |
| resolve: { extensions: [".js", ".jsx", ".ts", ".tsx"] } | Auto-resolve file extensions |
| resolve: { alias: { "@": path.resolve(__dirname, "src") } } | Create import path aliases |
Step-by-Step Guide
Read Guide →