docs: improve explanation of configuration defaults for dev and prod modes

Author: prithvisingh01-tech

src/content/contribute/writers-guide.mdx

@@ -154,8 +154,31 @@ Please do not assume things are simple. Avoid words like 'just', 'simply'.
 ```
 
 ### Configuration defaults and types
+
+
 Webpack configuration defaults can vary depending on the selected mode. The two most common modes are `development` and `production`, and each applies different default optimizations.
 
+#### Development mode defaults
+
+- Optimized for debugging
+- Includes useful warnings and error messages
+- Output is more readable and not minified
+- Faster incremental builds
+
+#### Production mode defaults
+
+- Optimized for performance
+- Output is minified and optimized
+- Removes unnecessary code (e.g., dead code elimination)
+- Smaller bundle size
+
+#### Example
+
+```js
+module.exports = {
+  mode: "development",
+};
+
 Always provide types and defaults to all of the documentation options in order to keep the documentation accessible and well-written. We are adding types and defaults after entitling the documented option:
 
 **configuration.example.option**