📖 Guide
Webpack — Complete Reference
Module bundler for JavaScript — CLI, loaders, plugins, dev server, optimization, code splitting, and configuration patterns.
65 commands across 10 categories
CLIConfiguration BasicsEntry & OutputLoadersPluginsDev ServerOptimizationCode SplittingModule ResolutionCommon Patterns
CLI
| Command | Description |
|---|---|
npx webpack | Run webpack with default config |
npx webpack --config webpack.prod.js | Use a custom config file |
npx webpack --mode production | Set mode (development/production/none) |
npx webpack --watch | Watch files and rebuild on changes |
npx webpack --stats detailed | Show detailed build statistics |
npx webpack --profile --json > stats.json | Generate stats file for analysis |
npx webpack --env production --env goal=deploy | Pass environment variables to config |
Configuration Basics
| Command | Description |
|---|---|
module.exports = { mode: 'development' } | Set build mode in webpack.config.js |
module.exports = (env, argv) => ({ ... }) | Export a function for dynamic config |
const { merge } = require('webpack-merge')e.g. merge(commonConfig, prodConfig) | Merge multiple configs together |
target: 'node' | Set build target (web, node, electron-main, etc.) |
devtool: 'source-map' | Generate full source maps |
devtool: 'eval-source-map' | Fast source maps for development |
Entry & Output
| Command | Description |
|---|---|
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' } | Cache-busting with content hash |
output: { clean: true } | Clean output directory before build |
output: { publicPath: '/assets/' } | Set public URL path for assets |
Loaders
| Command | Description |
|---|---|
{ test: /\.css$/, use: ['style-loader', 'css-loader'] } | Process CSS files (loaders run right to left) |
{ test: /\.tsx?$/, use: 'ts-loader' } | Compile TypeScript files |
{ test: /\.s[ac]ss$/, use: ['style-loader', 'css-loader', 'sass-loader'] } | Process SCSS/Sass files |
{ test: /\.(png|jpg|gif)$/, type: 'asset/resource' } | Emit images as separate files (Webpack 5) |
{ test: /\.svg$/, type: 'asset/inline' } | Inline SVGs as data URIs |
{ test: /\.(js|jsx)$/, use: 'babel-loader', exclude: /node_modules/ } | Transpile JS/JSX with Babel |
{ test: /\.txt$/, type: 'asset/source' } | Import file content as string |
Plugins
| Command | Description |
|---|---|
new HtmlWebpackPlugin({ template: './src/index.html' }) | Generate HTML with injected bundles |
new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' }) | Extract CSS into separate files |
new webpack.DefinePlugin({ 'process.env.API': JSON.stringify(url) }) | Define compile-time constants |
new CopyWebpackPlugin({ patterns: [{ from: 'public' }] }) | Copy static files to output |
new BundleAnalyzerPlugin() | Visualize bundle size (webpack-bundle-analyzer) |
new webpack.ProvidePlugin({ React: 'react' }) | Auto-import modules when used |
new ESLintPlugin({ extensions: ['js', 'jsx', 'ts', 'tsx'] }) | Run ESLint during build |
Dev Server
| Command | Description |
|---|---|
npx webpack serve | Start the 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: [{ context: ['/api'], target: 'http://localhost:5000' }] } | Proxy API requests to backend |
devServer: { historyApiFallback: true } | Serve index.html for all 404s (SPA routing) |
devServer: { static: './public' } | Serve static files from a directory |
Optimization
| Command | Description |
|---|---|
optimization: { minimize: true } | Enable minification (default in production) |
optimization: { splitChunks: { chunks: 'all' } } | Extract shared code into separate chunks |
optimization: { runtimeChunk: 'single' } | Extract webpack runtime into a separate chunk |
optimization: { usedExports: true } | Enable tree shaking (mark unused exports) |
optimization: { moduleIds: 'deterministic' } | Stable module IDs for long-term caching |
new TerserPlugin({ parallel: true }) | Minify JS with parallel processing |
new CssMinimizerPlugin() | Minify CSS in production builds |
Code Splitting
| Command | Description |
|---|---|
import(/* webpackChunkName: 'lodash' */ 'lodash') | Dynamic import with named chunk |
import(/* webpackPrefetch: true */ './HeavyComponent') | Prefetch a chunk (load during idle time) |
import(/* webpackPreload: true */ './Critical') | Preload a chunk (load in parallel) |
splitChunks: { cacheGroups: { vendor: { test: /node_modules/, name: 'vendors' } } } | Split vendor libraries into a separate bundle |
splitChunks: { maxSize: 244000 } | Split chunks larger than ~244KB |
splitChunks: { minSize: 20000, minChunks: 1 } | Minimum size and usage for splitting |
Module Resolution
| Command | Description |
|---|---|
resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx'] } | Auto-resolve these file extensions |
resolve: { alias: { '@': path.resolve(__dirname, 'src') } } | Create import path aliases |
resolve: { modules: ['node_modules', 'src'] } | Additional module search directories |
resolve: { fallback: { path: require.resolve('path-browserify') } } | Polyfill Node.js built-ins for browser |
externals: { react: 'React' } | Exclude dependencies from bundle (use CDN) |
resolve: { mainFields: ['browser', 'module', 'main'] } | Priority order for package.json entry fields |
Common Patterns
| Command | Description |
|---|---|
sideEffects: false | Mark package as side-effect-free in package.json for tree shaking |
cache: { type: 'filesystem' } | Enable persistent file system cache (Webpack 5) |
experiments: { topLevelAwait: true } | Enable top-level await support |
stats: 'errors-only' | Only show errors in build output |
infrastructureLogging: { level: 'error' } | Reduce infrastructure log noise |
new webpack.IgnorePlugin({ resourceRegExp: /^\.\/locale$/, contextRegExp: /moment$/ }) | Ignore moment.js locales to reduce bundle size |
📖 Free, searchable command reference. Bookmark this page for quick access.