# Configuration and modes — Webpack

Source: https://www.geekswithgeeks.com/en/webpack/webpack-06

> Fine-tune Webpack with configuration options.

## Development vs production

**Development mode** disables optimizations for readability and fast rebuild times. Sourcemaps are generated. **Production mode** enables code minification, tree-shaking, and scope hoisting. Choose mode based on your current task. You can override settings per environment.

## Environment-based configuration

Use environment variables to switch configurations.

```javascript
module.exports = (env, argv) => {
  const isDev = argv.mode === 'development';
  
  return {
    mode: argv.mode || 'production',
    devtool: isDev ? 'source-map' : false,
    optimization: {
      minimize: !isDev,
      usedExports: true
    }
  };
};
```

Output:

```
Configuration adjusts based on build mode parameter
```

## Sourcemaps for debugging

Enable sourcemaps in development with 'source-map' or 'eval-source-map'. Sourcemaps map bundled code back to original sources for easier debugging. Disable in production to keep bundle size small.

Quick check

**Quiz:** When should you use production mode?

- [x] For final deployments to minimize bundle size.
- [ ] During development for fast rebuilds.
- [ ] To enable better debugging.

*Answer:* For final deployments to minimize bundle size.. Production mode optimizes for size and performance, making bundles suitable for deployment. Development mode prioritizes rebuild speed and debugging.