Suggest an editImprove this articleRefine the answer for “What changes when switching between development and production modes?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)Switching Webpack between `development` and `production` modes automatically changes the build's behavior: in `development` the code stays readable and the build is fast, while in `production` the code is minified, tree shaking is enabled, and CSS and JS are optimized. **Key point:** `mode` is a switch for the build logic.Shown above the full answer for quick recall.Answer (EN)ImageSwitching between the `development` and `production` modes automatically changes Webpack's build behavior. ### **In** `development` **mode:** - **The code stays readable**, without minification - **Source maps are enabled by default** (simplifies debugging) - **Fast build**, optimizations are disabled or minimal - **Focus on development comfort**, not bundle size ### **In** `production` **mode:** - **The code is minified** (whitespace is removed, variable names are shortened, etc.) - **Tree shaking is enabled** (removes unused code) - **CSS and JS are optimized** - **Files become smaller** - **Caching is improved** (`filename` with hashes is often used) - **Source maps are either disabled or hidden** ### Brief summary: | Mode | Purpose | Characteristic | |---|---|---| | `development` | development | speed and convenience | | `production` | production | optimization and minimal weight | By default Webpack enables a set of optimizations depending on the mode, so `mode` is a **switch for the build logic**.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.