Webpack Cheat Sheet

Covers webpack configuration basics, loaders, plugins, code splitting, and optimization techniques for bundling modern JavaScript apps.

3 PagesAdvancedMar 15, 2026

Basic Configuration

Core entry, output, and dev server setup.

javascript

// webpack.config.jsconst path = require('path');module.exports = {  mode: 'production',              // 'development' | 'production' | 'none'  entry: './src/index.js',  output: {    filename: '[name].[contenthash].js',    path: path.resolve(__dirname, 'dist'),    clean: true,                   // clear dist/ before each build  },  resolve: {    extensions: ['.js', '.jsx'],  },  devServer: {    static: './dist',    port: 3000,    hot: true,  },};

Loaders & Plugins

Transforming files and extending the build.

javascript

const HtmlWebpackPlugin = require('html-webpack-plugin');const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = {  module: {    rules: [      {        test: /\.jsx?$/,        exclude: /node_modules/,        use: 'babel-loader',      },      {        test: /\.css$/,        use: [MiniCssExtractPlugin.loader, 'css-loader'],      },      {        test: /\.(png|svg|jpg)$/,        type: 'asset/resource', // built-in asset module (webpack 5+)      },    ],  },  plugins: [    new HtmlWebpackPlugin({ template: './src/index.html' }),    new MiniCssExtractPlugin(),  ],};

Code Splitting & Optimization

Splitting vendor code and lazy-loading chunks.

javascript

module.exports = {  optimization: {    splitChunks: {      chunks: 'all',   // split shared/vendor code into separate chunks    },    runtimeChunk: 'single',  },};// Dynamic import creates an automatic split pointimport('./chart').then(({ renderChart }) => renderChart());

CLI & Key Concepts

Core terminology and common commands.

webpack --mode production- build once with production optimizations enabled (minification, tree shaking)
webpack serve- run webpack-dev-server with hot module replacement
entry- the starting module(s) webpack uses to build its dependency graph
output- where and how the resulting bundles are emitted to disk
loader- transforms non-JS files (CSS, images, TypeScript) into modules webpack can bundle
plugin- hooks into the compilation lifecycle for broader tasks like emitting HTML or extracting CSS
tree shaking- dead code elimination based on static ES module imports/exports

Pro Tip

Run webpack-bundle-analyzer after every major dependency change to visualize what's actually in your bundle: it's the fastest way to catch an accidentally duplicated dependency or an oversized import before it ships to production.

Was this cheat sheet helpful?

Chakra UI Cheat Sheet

Vite Cheat Sheet