Webpack Cheat Sheet

How to use this Webpack cheat sheet

Every Webpack build starts with entry and output, then chains loaders (transform) and plugins (side effects). Mode toggles defaults: development favors fast rebuilds and source maps; production enables minification, tree shaking, and long-term caching via content hashes.

Resolve aliases shorten imports; splitChunks extracts vendor code; devServer proxies API calls during local work. Production builds benefit from deterministic module IDs, runtime chunk separation, and analyzing bundle size before shipping.

Quick Webpack example

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    clean: true,
  },
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    ],
  },
  plugins: [new HtmlWebpackPlugin({ template: './public/index.html' })],
  devServer: { port: 3000, hot: true, historyApiFallback: true },
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
};

Entry & Output

Common Loaders

Plugins & Optimization

Resolve & DevServer

Environment-specific configs

module.exports = (env, argv) => ({
  mode: argv.mode,
  devtool: argv.mode === 'production' ? 'source-map' : 'eval-cheap-module-source-map',
  optimization: {
    minimize: argv.mode === 'production',
    splitChunks: { chunks: 'all', cacheGroups: { vendor: { test: /node_modules/, name: 'vendors' } } },
  },
});

Export a function to branch on CLI mode and env flags.

Dynamic import code splitting

button.addEventListener('click', () => {
  import(/* webpackChunkName: "chart" */ './chart.js')
    .then(({ renderChart }) => renderChart(data));
});

Magic comments name chunks; Webpack emits separate async bundles.

Production cache headers pattern

output: {
  filename: '[name].[contenthash:8].js',
  chunkFilename: '[name].[contenthash:8].js',
},
optimization: {
  moduleIds: 'deterministic',
  runtimeChunk: 'single',
},

Content hashes plus runtime chunk keep vendor bundles cacheable across deploys.

Common mistakes

• Forgetting to exclude node_modules from babel-loader, slowing builds dramatically.
• Using style-loader in production instead of MiniCssExtractPlugin, blocking render.
• Setting publicPath incorrectly so lazy-loaded chunks 404 in production.
• Disabling splitChunks and shipping one giant bundle with poor cache efficiency.

Key takeaways

• Entry defines the graph; output.filename with contenthash enables long-term caching.
• Loaders transform; plugins orchestrate side effects and optimization.
• splitChunks and runtimeChunk separate vendor code from app code.
• devServer proxy and HMR keep local development fast without CORS hacks.