Skip to main content
Webpack can be configured using a JavaScript configuration file that exports a configuration object. This section provides an overview of all available configuration options.

​
Configuration File

Webpack uses a webpack.config.js file (or other variants) to define how your application should be bundled:
webpack.config.js
module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [/* ... */]
  },
  plugins: [/* ... */]
};

​
Core Configuration Options

Entry and Context

Configure entry points and base directory for resolving modules

Output

Control how webpack writes compiled files to disk

Module

Configure how different module types are processed

Resolve

Configure how modules are resolved

Optimization

Customize webpack’s optimization behavior

Plugins

Add additional functionality through plugins

Dev Server

Configure the webpack development server

DevTool

Control source map generation for debugging

​
Advanced Configuration

Externals

Exclude dependencies from the output bundles

Performance

Configure performance hints and budgets

Node

Configure Node.js polyfills and mocks

Stats

Control compilation output statistics

​
Top-Level Options

​
mode
'development' | 'production' | 'none'
Sets the mode webpack will use. This enables different default optimizations.
mode: 'production'
​
context
string
The base directory (absolute path) for resolving entry points and loaders.
context: path.resolve(__dirname, 'src')
Default: process.cwd()
​
target
string | string[]
Environment to build for (e.g., ‘web’, ‘node’, ‘electron-main’).
target: 'web'
​
bail
boolean
Fail out on the first error instead of tolerating it.
bail: true
Default: false
​
watch
boolean
Enable watch mode to rebuild on file changes.
watch: true
Default: false
​
watchOptions
object
Customize watch mode behavior. See Watch Options below.
​
name
string
Name of the configuration, used when loading multiple configurations.
name: 'my-app'
​
parallelism
number
Limit the number of parallel processed modules.
parallelism: 100
Default: 100
​
profile
boolean
Capture timing information for each module.
profile: true
Default: false

​
Watch Options

​
watchOptions.aggregateTimeout
number
Delay rebuilds after the first change (in milliseconds).
watchOptions: {
  aggregateTimeout: 300
}
Default: 200
​
watchOptions.poll
boolean | number
Enable polling for file changes. Can specify interval in milliseconds.
watchOptions: {
  poll: 1000 // Check for changes every second
}
​
watchOptions.ignored
string | RegExp | string[]
Files or directories to exclude from watching.
watchOptions: {
  ignored: /node_modules/
}

​
Multiple Configurations

You can export an array of configurations to run multiple builds:
webpack.config.js
module.exports = [
  {
    name: 'client',
    entry: './src/client.js',
    output: { filename: 'client.js' }
  },
  {
    name: 'server',
    entry: './src/server.js',
    output: { filename: 'server.js' },
    target: 'node'
  }
];

​
Configuration as a Function

Export a function to dynamically generate configuration:
webpack.config.js
module.exports = (env, argv) => {
  return {
    mode: env.production ? 'production' : 'development',
    entry: './src/index.js',
    // ... other options
  };
};

​
Environment Variables

Access environment variables in your configuration: 
webpack --env production --env api=http://api.example.com
webpack.config.js
module.exports = (env) => {
  console.log(env.production); // true
  console.log(env.api); // 'http://api.example.com'
  
  return {
    // configuration
  };
};