> ## Documentation Index
> Fetch the complete documentation index at: https://docs.webpack.js.org/llms.txt
> Use this file to discover all available pages before exploring further.
# Configuration Overview
> Overview of webpack configuration options and structure
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:
```javascript webpack.config.js theme={null}
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [/* ... */]
},
plugins: [/* ... */]
};
```
## Core Configuration Options
Configure entry points and base directory for resolving modules
Control how webpack writes compiled files to disk
Configure how different module types are processed
Configure how modules are resolved
Customize webpack's optimization behavior
Add additional functionality through plugins
Configure the webpack development server
Control source map generation for debugging
## Advanced Configuration
Exclude dependencies from the output bundles
Configure performance hints and budgets
Configure Node.js polyfills and mocks
Control compilation output statistics
## Top-Level Options
Sets the mode webpack will use. This enables different default optimizations.
```javascript theme={null}
mode: 'production'
```
The base directory (absolute path) for resolving entry points and loaders.
```javascript theme={null}
context: path.resolve(__dirname, 'src')
```
Default: `process.cwd()`
Environment to build for (e.g., 'web', 'node', 'electron-main').
```javascript theme={null}
target: 'web'
```
Fail out on the first error instead of tolerating it.
```javascript theme={null}
bail: true
```
Default: `false`
Enable watch mode to rebuild on file changes.
```javascript theme={null}
watch: true
```
Default: `false`
Customize watch mode behavior. See [Watch Options](#watch-options) below.
Name of the configuration, used when loading multiple configurations.
```javascript theme={null}
name: 'my-app'
```
Limit the number of parallel processed modules.
```javascript theme={null}
parallelism: 100
```
Default: `100`
Capture timing information for each module.
```javascript theme={null}
profile: true
```
Default: `false`
## Watch Options
Delay rebuilds after the first change (in milliseconds).
```javascript theme={null}
watchOptions: {
aggregateTimeout: 300
}
```
Default: `200`
Enable polling for file changes. Can specify interval in milliseconds.
```javascript theme={null}
watchOptions: {
poll: 1000 // Check for changes every second
}
```
Files or directories to exclude from watching.
```javascript theme={null}
watchOptions: {
ignored: /node_modules/
}
```
## Multiple Configurations
You can export an array of configurations to run multiple builds:
```javascript webpack.config.js theme={null}
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:
```javascript webpack.config.js theme={null}
module.exports = (env, argv) => {
return {
mode: env.production ? 'production' : 'development',
entry: './src/index.js',
// ... other options
};
};
```
## Environment Variables
Access environment variables in your configuration:
```bash theme={null}
webpack --env production --env api=http://api.example.com
```
```javascript webpack.config.js theme={null}
module.exports = (env) => {
console.log(env.production); // true
console.log(env.api); // 'http://api.example.com'
return {
// configuration
};
};
```