Configure options below — the preview updates in real time.

Core Options

Fundamental settings that control Webpack's mode, entry points, and core behavior.

Tells Webpack to use its built-in optimizations for the selected environment.

The entry point(s) for bundling. Provide a path string for a single entry.

The base directory (absolute path) for resolving entry points and loaders.

Name of the configuration. Useful when using an array of configurations.

Instructs Webpack to target a specific environment.

BailFail out on the first error instead of tolerating it.
ProfileCapture timing information for each module.

Limits the number of parallel processed modules.

WatchTurn on watch mode to rebuild automatically on file changes.

Output

Configure how and where Webpack outputs the bundles and assets.

The output directory as an absolute path.

The name of each output bundle. Supports template strings like [name], [hash], [contenthash].

The base path for all assets within your application.

The filename template for Asset Modules.

CleanClean the output directory before emit.

The name of non-initial chunk files.

Format of chunks for loading.

The method to load chunks at runtime.

Global variable used by Webpack for chunk loading.

Enable cross-origin loading of chunks.

The filename template for extracted CSS.

The filename for non-initial CSS chunks.

The global object used when initializing the runtime (self for web, global for node).

Name for the exported library. Used when building reusable libraries.

Format for exporting a bundle as a consumable library.

Output ModuleWhether to output ES modules.
Path InfoInclude comments with information about the contained modules.

The filename template for source maps.

The encoding to use for hash digest.

The prefix length of the hash digest to use.

The hashing algorithm to use.

The type attribute for injected script tags.

DevTool

Controls if and how source maps are generated.

Choose a style of source mapping to enhance debugging. Different values significantly affect build and rebuild speed.

Dev Server

Configuration for webpack-dev-server providing live reloading during development.

Specify a host to use for the dev server.

Specify the port number for the dev server.

Enable Hot Module Replacement feature.

Live ReloadReload/refresh the page when file changes are detected.
Open BrowserOpen the browser after server had been started.
CompressEnable gzip compression for everything served.
History API FallbackServe index.html for any 404 responses, needed for Single Page Applications.

Set the server protocol type.

Proxy API requests to a separate backend server during development.

Add custom headers to all responses.

Whitelist of hosts allowed to access the dev server.

BonjourBroadcast the server via ZeroConf networking on start.
Client OverlayShow a full-screen overlay in the browser on compilation errors.
Client ProgressShow compilation progress in the browser.

Log level in the browser console.

Number of times the client should try to reconnect. Set to true for unlimited retries, or a number for a specific count.

Directory to serve static files from (replaces old contentBase).

URL prefix for static content.

Serve IndexServe directory index file when browsing.
Watch Static FilesWatch files in the static directory for changes.

Resolve

Configure how Webpack resolves modules and file imports.

Create aliases to import or require modules more easily.

File extensions to resolve in order when importing without extension.

.js.json.wasm

Directories to search when resolving modules.

node_modules

Fields in package.json to check when importing from npm packages.

browsermodulemain

Filenames to use when resolving directories.

index

Fields in package.json used to alias requests.

browser

Condition names for exports field resolution in package.json.

JSON files to use for module descriptions.

package.json
Enforce ExtensionRequire extensions for all file requests.
Resolve SymlinksWhether to resolve symlinks to their symlinked location.

Redirect module requests when normal resolution fails. Used to polyfill Node.js core modules.

Prefer RelativePrefer relative paths for module resolution.
Prefer AbsolutePrefer absolute paths for module resolution.

Optimization

Fine-tune how Webpack optimizes, splits chunks, and tree-shakes the output.

MinimizeEnable or disable bundle minimization using Terser or other minimizers.
Concatenate ModulesHoist modules into a single scope (Scope Hoisting) for smaller bundles.

Which chunks will be selected for optimization.

Minimum size in bytes for a chunk to be generated.

Maximum size in bytes before a chunk is split further.

Minimum number of chunks that must share a module before splitting.

Maximum number of parallel requests when on-demand loading.

Maximum number of parallel requests at an entry point.

Delimiter for auto-generated chunk names.

Algorithm to determine module IDs.

Algorithm to determine chunk IDs.

Create a separate chunk for the Webpack runtime code.

Side EffectsRecognize the sideEffects flag in package.json for tree shaking.
Used ExportsTell Webpack to determine used exports for each module for tree shaking.
Inner GraphConduct inner graph analysis for unused exports.
Emit on ErrorsEmit assets even when there are compilation errors.
Merge Duplicate ChunksMerge chunks that contain the same modules.
Remove Available ModulesRemove modules from chunks if already available in parent chunks.
Remove Empty ChunksRemove empty chunks after compilation.

Control export mangling to reduce bundle size.

Sets process.env.NODE_ENV to a specific value. Matches mode by default.

Performance

Control how Webpack warns about large assets and entry points.

Controls the type of performance hint shown.

Maximum size in bytes for an entry point before a warning is shown.

Maximum size in bytes for an individual asset before a warning is shown.

Module / Loaders

Configure module parsing and loader rules for processing different file types.

Regex patterns for files Webpack should not parse. Improves build speed for large standalone libraries.

Externals

Prevent bundling of certain packages, relying on external dependencies at runtime.

Map of module names to external variable names. These modules are excluded from the bundle.

Default type for externals.

Externals Preset: NodeTreat node.js built-in modules as external and load them via require when used.
Externals Preset: WebTreat references to http(s) external URLs as external and load them via async import.
Externals Preset: Electron MainTreat electron built-in modules as external for the main process.
Externals Preset: Electron RendererTreat electron built-in modules as external for the renderer process.
Externals Preset: Electron PreloadTreat electron built-in modules as external for the preload process.

Watch Options

Options for controlling watch mode behavior.

Delay (in ms) before rebuilding once the first file changes.

Use polling for file system changes (in ms interval). Useful in VMs or containers.

Follow SymlinksFollow symlinks while looking for files.

Patterns or paths to exclude from watching.

Cache

Cache generated modules and chunks to improve build speed.

Type of caching to use.

Base directory for the filesystem cache.

Version string for the cache. Change this to invalidate the entire cache.

Experiments

Enable or disable experimental Webpack features.

Async WebAssemblyEnable support for async WebAssembly modules.
Sync WebAssemblyEnable support for sync WebAssembly modules (deprecated, use async).
Output ModuleEnable output as ES module.
Top Level AwaitEnable top-level await in modules.
LayersEnable module layers support.
Lazy CompilationCompile entrypoints and dynamic imports only when they are in use.
Native CSSEnable native CSS support.
Build HTTPAllow building remote resources that begin with http(s): protocol.
Future DefaultsUse defaults of the next major webpack version. Shows warnings for problematic areas.

Stats

Control what bundle information gets displayed.

Use a preset to control the amount of build information displayed.

Infrastructure Logging

Options for Webpack's internal infrastructure logging.

Log level for infrastructure output.

Append OnlyOnly append log lines instead of updating existing output.
ColorsEnable colorful output for infrastructure logging.

Node

Configure polyfills or mocks for Node.js globals and modules.

GlobalPolyfill or mock the Node.js global variable.

Configure __dirname behavior.

Configure __filename behavior.