diff --git a/src/content/configuration/cache.mdx b/src/content/configuration/cache.mdx
index 2608c99c8b7a..23e99016a6e4 100644
--- a/src/content/configuration/cache.mdx
+++ b/src/content/configuration/cache.mdx
@@ -4,13 +4,22 @@ sort: 12
contributors:
- snitin315
- chenxsan
+ - shivxmsharma
---
## cache
`boolean` `object`
-Cache the generated webpack modules and chunks to improve build speed. `cache` is set to `type: 'memory'` in [`development` mode](/configuration/mode/#mode-development) and disabled in [`production` mode](/configuration/mode/#mode-production). `cache: true` is an alias to `cache: { type: 'memory' }`. To disable caching pass `false`:
+Cache the generated webpack modules and chunks to improve build speed. `cache: true` is an alias to `cache: { type: 'memory' }`. To disable caching pass `false`:
+
+The default value of `cache` depends on the [`mode`](/configuration/mode/):
+
+| Mode | Default |
+| --------------- | -------------------- |
+| `"production"` | `false` |
+| `"development"` | `{ type: 'memory' }` |
+| `"none"` | `false` |
**webpack.config.js**
@@ -28,7 +37,15 @@ While setting `cache.type` to `'filesystem'` opens up more options for configura
Collect unused memory allocated during deserialization, only available when [`cache.type`](#cachetype) is set to `'filesystem'`. This requires copying data into smaller buffers and has a performance cost.
- Type: `boolean`
- - It defaults to `false` in production mode and `true` in development mode.
+
+The default value of `cache.allowCollectingMemory` depends on the [`mode`](/configuration/mode/):
+
+| Mode | Default |
+| --------------- | ------- |
+| `"production"` | `false` |
+| `"development"` | `true` |
+| `"none"` | `false` |
+
-
**webpack.config.js**
@@ -316,9 +333,13 @@ Define the lifespan of unused cache entries in the memory cache.
- `cache.maxMemoryGenerations`: small numbers > 0 will have a performance cost for the GC operation. It gets lower as the number increases.
-- `cache.maxMemoryGenerations`: defaults to 10 in `development` mode and to `Infinity` in `production` mode.
+The default value of `cache.maxMemoryGenerations` depends on the [`mode`](/configuration/mode/):
-`cache.maxMemoryGenerations` option is only available when [`cache.type`](#cachetype) is set to `'filesystem'`.
+| Mode | Default |
+| --------------- | ---------- |
+| `"production"` | `Infinity` |
+| `"development"` | `10` |
+| `"none"` | `Infinity` |
**webpack.config.js**
diff --git a/src/content/configuration/module.mdx b/src/content/configuration/module.mdx
index dd7c653f351c..4b9440275840 100644
--- a/src/content/configuration/module.mdx
+++ b/src/content/configuration/module.mdx
@@ -24,6 +24,7 @@ contributors:
- vabushkevich
- ahabhgk
- hai-x
+ - shivxmsharma
---
These options determine how the [different types of modules](/concepts/modules) within a project will be treated.
@@ -984,7 +985,15 @@ export default {
### module.parser.json.exportsDepth
-The depth of json dependency flagged as `exportInfo`. By default, it is set to `Infinity` in production mode, and `1` in development mode.
+The depth of json dependency flagged as `exportInfo`.
+
+The default value of `module.parser.json.exportsDepth` depends on the [`mode`](/configuration/mode/):
+
+| Mode | Default |
+| --------------- | ---------- |
+| `"production"` | `Infinity` |
+| `"development"` | `1` |
+| `"none"` | `Infinity` |
- Type: `number`
- Available:
diff --git a/src/content/configuration/optimization.mdx b/src/content/configuration/optimization.mdx
index 6373d02c4b91..a39559d0e567 100644
--- a/src/content/configuration/optimization.mdx
+++ b/src/content/configuration/optimization.mdx
@@ -15,6 +15,7 @@ contributors:
- chenxsan
- Roberto14
- hai-x
+ - shivxmsharma
related:
- title: "webpack 4: Code Splitting, chunk graph and the splitChunks optimization"
url: https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
@@ -26,7 +27,15 @@ Webpack runs optimizations for you depending on the chosen [`mode`](/configurati
`boolean`
-Tells webpack to check the incompatible types of WebAssembly modules when they are imported/exported. By default `optimization.checkWasmTypes` is enabled in `production` [mode](/configuration/mode/) and disabled elsewise.
+Tells webpack to check the incompatible types of WebAssembly modules when they are imported/exported.
+
+The default value of `optimization.checkWasmTypes` depends on the [`mode`](/configuration/mode/):
+
+| Mode | Default |
+| --------------- | ------- |
+| `"production"` | `true` |
+| `"development"` | `false` |
+| `"none"` | `false` |
**webpack.config.js**
@@ -56,11 +65,11 @@ Tells Webpack which algorithm to use for chunk IDs. Setting `optimization.chunkI
The default value of `optimization.chunkIds` depends on the [`mode`](/configuration/mode/):
-| Mode | Default |
-| ------------- | ----------------- |
-| `development` | `'named'` |
-| `production` | `'deterministic'` |
-| `none` | `'natural'` |
+| Mode | Default |
+| --------------- | ----------------- |
+| `"production"` | `'deterministic'` |
+| `"development"` | `'named'` |
+| `"none"` | `'natural'` |
The following string values are supported:
@@ -106,7 +115,14 @@ export default {
`boolean`
Tells webpack to find segments of the module graph which can be safely concatenated into a single module. Depends on [`optimization.providedExports`](#optimizationprovidedexports) and [`optimization.usedExports`](#optimizationusedexports).
-By default `optimization.concatenateModules` is enabled in `production` [mode](/configuration/mode/) and disabled elsewise.
+
+The default value of `optimization.concatenateModules` depends on the [`mode`](/configuration/mode/):
+
+| Mode | Default |
+| --------------- | ------- |
+| `"production"` | `true` |
+| `"development"` | `false` |
+| `"none"` | `false` |
**webpack.config.js**
@@ -121,10 +137,18 @@ export default {
## optimization.emitOnErrors
-`boolean = false`
+`boolean`
Use the `optimization.emitOnErrors` to emit assets whenever there are errors while compiling. This ensures that erroring assets are emitted. Critical errors are emitted into the generated code and will cause errors at runtime.
+The default value of `optimization.emitOnErrors` depends on the [`mode`](/configuration/mode/):
+
+| Mode | Default |
+| --------------- | ------- |
+| `"production"` | `false` |
+| `"development"` | `true` |
+| `"none"` | `true` |
+
**webpack.config.js**
```js
@@ -140,17 +164,23 @@ W> If you are using webpack [CLI](/api/cli/), the webpack process will not exit
## optimization.avoidEntryIife
-`boolean = false`
+`boolean`
-T> IIFE (Immediately Invoked Function Expression) is a function that runs immediately after it is created. Webpack uses it to wrap code and avoid variable conflicts.
+T> IIFE ...
-Use `optimization.avoidEntryIife` to avoid wrapping the entry module in an IIFE when it is required (search for `"This entry needs to be wrapped in an IIFE because"` in [JavascriptModulesPlugin](https://github.com/webpack/webpack/blob/main/lib/javascript/JavascriptModulesPlugin.js)). This approach helps optimize performance for JavaScript engines and enables tree shaking when building ESM libraries.
+Use `optimization.avoidEntryIife` ...
Currently, `optimization.avoidEntryIife` can only optimize a single entry module along with other modules.
-By default, `optimization.avoidEntryIife` is enabled in `production` [mode](/configuration/mode/) and disabled otherwise.
+The default value of `optimization.avoidEntryIife` depends on the [`mode`](/configuration/mode/):
+
+| Mode | Default |
+| --------------- | ------- |
+| `"production"` | `true` |
+| `"development"` | `false` |
+| `"none"` | `false` |
**webpack.config.js**
@@ -169,7 +199,15 @@ W> The `optimization.avoidEntryIife` option can negatively affect build performa
`boolean`
-Tells webpack to determine and flag chunks which are subsets of other chunks in a way that subsets don’t have to be loaded when the bigger chunk has been already loaded. By default `optimization.flagIncludedChunks` is enabled in `production` [mode](/configuration/mode/) and disabled elsewise.
+Tells webpack to determine and flag chunks which are subsets of other chunks in a way that subsets don't have to be loaded when the bigger chunk has been already loaded.
+
+The default value of `optimization.flagIncludedChunks` depends on the [`mode`](/configuration/mode/):
+
+| Mode | Default |
+| --------------- | ------- |
+| `"production"` | `true` |
+| `"development"` | `false` |
+| `"none"` | `false` |
**webpack.config.js**
@@ -184,10 +222,18 @@ export default {
## optimization.innerGraph
-`boolean = true`
+`boolean`
`optimization.innerGraph` tells webpack whether to conduct inner graph analysis for unused exports.
+The default value of `optimization.innerGraph` depends on the [`mode`](/configuration/mode/):
+
+| Mode | Default |
+| --------------- | ------- |
+| `"production"` | `true` |
+| `"development"` | `false` |
+| `"none"` | `false` |
+
**webpack.config.js**
```js
@@ -205,7 +251,13 @@ export default {
`optimization.mangleExports` allows to control export mangling.
-By default `optimization.mangleExports: 'deterministic'` is enabled in `production` [mode](/configuration/mode/) and disabled elsewise.
+The default value of `optimization.mangleExports` depends on the [`mode`](/configuration/mode/):
+
+| Mode | Default |
+| --------------- | ------- |
+| `"production"` | `true` |
+| `"development"` | `false` |
+| `"none"` | `false` |
The following values are supported:
@@ -263,10 +315,18 @@ export default {
## optimization.minimize
-`boolean = true`
+`boolean`
Tell webpack to minimize the bundle using the [TerserPlugin](/plugins/terser-webpack-plugin/) or the plugin(s) specified in [`optimization.minimizer`](#optimizationminimizer).
+The default value of `optimization.minimize` depends on the [`mode`](/configuration/mode/):
+
+| Mode | Default |
+| --------------- | ------- |
+| `"production'` | `true` |
+| `"development"` | `false` |
+| `"none"` | `false` |
+
**webpack.config.js**
```js
@@ -363,11 +423,11 @@ Tells webpack which algorithm to use when choosing module ids. Setting `optimiza
The default value of `optimization.moduleIds` depends on the [`mode`](/configuration/mode/):
-| Mode | Default |
-| ------------- | ----------------- |
-| `development` | `'named'` |
-| `production` | `'deterministic'` |
-| `none` | `'natural'` |
+| Mode | Default |
+| --------------- | ----------------- |
+| `"production"` | `'deterministic'` |
+| `"development"` | `'named'` |
+| `"none"` | `'natural'` |
The following string values are supported:
@@ -413,9 +473,17 @@ W> `moduleIds: total-size` has been removed in webpack 5.
## optimization.nodeEnv
-`boolean = false` `string`
+`boolean: false` `string`
+
+Tells webpack to set `process.env.NODE_ENV` to a given string value. `optimization.nodeEnv` uses [DefinePlugin](/plugins/define-plugin/) unless set to `false`.
+
+The default value of `optimization.nodeEnv` depends on the [`mode`](/configuration/mode/):
-Tells webpack to set `process.env.NODE_ENV` to a given string value. `optimization.nodeEnv` uses [DefinePlugin](/plugins/define-plugin/) unless set to `false`. `optimization.nodeEnv` **defaults** to [mode](/configuration/mode/) if set, else falls back to `'production'`.
+| Mode | Default |
+| --------------- | --------------- |
+| `"production"` | `'production'` |
+| `"development"` | `'development'` |
+| `"none"` | `false` |
Possible values:
@@ -475,7 +543,15 @@ export default {
`boolean`
-Adds an additional hash compilation pass after the assets have been processed to get the correct asset content hashes. If `realContentHash` is set to `false`, internal data is used to calculate the hash and it can change when assets are identical. By default `optimization.realContentHash` is enabled in production [mode](/configuration/mode/) and disabled otherwise.
+Adds an additional hash compilation pass after the assets have been processed to get the correct asset content hashes. If `realContentHash` is set to `false`, internal data is used to calculate the hash and it can change when assets are identical.
+
+The default value of `optimization.realContentHash` depends on the [`mode`](/configuration/mode/):
+
+| Mode | Default |
+| --------------- | ------- |
+| `"production"` | `true` |
+| `"development"` | `false` |
+| `"none"` | `false` |
**webpack.config.js**
@@ -579,7 +655,7 @@ export default {
## optimization.sideEffects
-`boolean = true` `string: 'flag'`
+`boolean` `string: 'flag'`
Tells webpack to recognise the [`sideEffects`](https://github.com/webpack/webpack/blob/main/examples/side-effects/README.md) flag in `package.json` or rules to skip over modules which are flagged to contain no side effects when exports are not used.
@@ -597,6 +673,14 @@ T> Please note that `sideEffects` should be in the npm module's `package.json` f
`optimization.sideEffects` depends on [`optimization.providedExports`](#optimizationprovidedexports) to be enabled. This dependency has a build time cost, but eliminating modules has positive impact on performance because of less code generation. Effect of this optimization depends on your codebase, try it for possible performance wins.
+The default value of `optimization.sideEffects` depends on the [`mode`](/configuration/mode/):
+
+| Mode | Default |
+| --------------- | -------- |
+| `"production"` | `true` |
+| `"development"` | `'flag'` |
+| `"none"` | `'flag'` |
+
**webpack.config.js**
```js
@@ -619,8 +703,6 @@ export default {
};
```
-The `'flag'` value is used by default in non-production builds.
-
T> `optimization.sideEffects` will also flag modules as side effect free when they contain only side effect free statements.
## optimization.splitChunks
@@ -631,11 +713,19 @@ By default webpack v4+ provides new common chunks strategies out of the box for
## optimization.usedExports
-`boolean = true` `string: 'global'`
+`boolean` `string: 'global'`
Tells webpack to determine used exports for each module. This depends on [`optimization.providedExports`](#optimizationprovidedexports). Information collected by `optimization.usedExports` is used by other optimizations or code generation i.e. exports are not generated for unused exports, export names are mangled to single char identifiers when all usages are compatible.
Dead code elimination in minimizers will benefit from this and can remove unused exports.
+The default value of `optimization.usedExports` depends on the [`mode`](/configuration/mode/):
+
+| Mode | Default |
+| --------------- | ------- |
+| `"production"` | `true` |
+| `"development"` | `false` |
+| `"none"` | `false` |
+
**webpack.config.js**
```js
diff --git a/src/content/configuration/output.mdx b/src/content/configuration/output.mdx
index 738267c451a4..9147a317c9a7 100644
--- a/src/content/configuration/output.mdx
+++ b/src/content/configuration/output.mdx
@@ -31,6 +31,7 @@ contributors:
- long76
- ahabhgk
- tanyabouman
+ - shivxmsharma
---
The top-level `output` key contains a set of options instructing webpack on how and where it should output your bundles, assets, and anything else you bundle or load with webpack.
@@ -2172,9 +2173,17 @@ W> The path must not contain an exclamation mark (`!`) as it is reserved by webp
## output.pathinfo
-`boolean=true` `string: 'verbose'`
+`boolean` `string: 'verbose'`
-Tells webpack to include comments in bundles with information about the contained modules. This option defaults to `true` in `development` and `false` in `production` [mode](/configuration/mode/) respectively. `'verbose'` shows more information like exports, runtime requirements and bailouts.
+Tells webpack to include comments in bundles with information about the contained modules. `'verbose'` shows more information like exports, runtime requirements and bailouts.
+
+The default value of `output.pathinfo` depends on the [`mode`](/configuration/mode/):
+
+| Mode | Default |
+| --------------- | ------- |
+| `"production"` | `false` |
+| `"development"` | `true` |
+| `"none"` | `false` |
W> While the data these comments can provide is useful during development when reading the generated code, it **should not** be used in production.
diff --git a/src/content/configuration/performance.mdx b/src/content/configuration/performance.mdx
index 7eefdea738ce..99cf19ba525f 100644
--- a/src/content/configuration/performance.mdx
+++ b/src/content/configuration/performance.mdx
@@ -7,6 +7,7 @@ contributors:
- byzyk
- madhavarshney
- EugeneHlushko
+ - shivxmsharma
---
These options allows you to control how webpack notifies you of assets and entry points that exceed a specific file limit.
@@ -47,10 +48,18 @@ The example above will only give you performance hints based on `.js` files.
### performance.hints
-`string = 'warning': 'error' | 'warning'` `boolean: false`
+`string: 'error' | 'warning'` `boolean: false`
Turns hints on/off. In addition, tells webpack to throw either an error or a warning when hints are found.
+The default value of `performance.hints` depends on the [`mode`](/configuration/mode/):
+
+| Mode | Default |
+| --------------- | ----------- |
+| `"production"` | `'warning'` |
+| `"development"` | `false` |
+| `"none"` | `false` |
+
Given an asset is created that is over 250kb:
```js
diff --git a/src/content/contribute/writers-guide.mdx b/src/content/contribute/writers-guide.mdx
index d868007beeab..b17c9f60fe7d 100644
--- a/src/content/contribute/writers-guide.mdx
+++ b/src/content/contribute/writers-guide.mdx
@@ -4,6 +4,7 @@ sort: 1
contributors:
- pranshuchittora
- EugeneHlushko
+ - shivxmsharma
---
The following sections contain all you need to know about editing and formatting the content within this site. Make sure to do some research before starting your edits or additions. Sometimes the toughest part is finding where the content should live and determining whether or not it already exists.
@@ -205,6 +206,34 @@ When object's key can have multiple types, use `|` to list them. Here is an exam
This allows us to display the defaults, enumeration and other information.
+When an option has different defaults depending on the [`mode`](/configuration/mode/), use a defaults table instead of the inline `= value` syntax:
+
+**configuration.example.option**
+
+`string: 'natural' | 'named' | 'deterministic'`
+
+The default value of `configuration.example.option` depends on the [`mode`](/configuration/mode/):
+
+| Mode | Default |
+| --------------- | ----------------- |
+| `"production"` | `'deterministic'` |
+| `"development"` | `'named'` |
+| `"none"` | `'natural'` |
+
+If an option has a boolean default that varies by mode:
+
+**configuration.example.flag**
+
+`boolean`
+
+The default value of `configuration.example.flag` depends on the [`mode`](/configuration/mode/):
+
+| Mode | Default |
+| --------------- | ------- |
+| `"production"` | `true` |
+| `"development"` | `false` |
+| `"none"` | `false` |
+
If the object's key is dynamic, user-defined, use `` to describe it:
`object = { string }`
diff --git a/src/content/plugins/split-chunks-plugin.mdx b/src/content/plugins/split-chunks-plugin.mdx
index 52b7e4328a54..7d8dc56721fb 100644
--- a/src/content/plugins/split-chunks-plugin.mdx
+++ b/src/content/plugins/split-chunks-plugin.mdx
@@ -19,6 +19,7 @@ contributors:
- jamesgeorge007
- anshumanv
- snitin315
+ - shivxmsharma
related:
- title: webpack's automatic deduplication algorithm example
url: https://github.com/webpack/webpack/blob/main/examples/many-pages/README.md
@@ -207,7 +208,17 @@ Size threshold at which splitting is enforced and other restrictions (minRemaini
`number = 0`
-`splitChunks.minRemainingSize` option was introduced in webpack 5 to avoid zero sized modules by ensuring that the minimum size of the chunk which remains after splitting is above a limit. Defaults to `0` in ['development' mode](/configuration/mode/#mode-development). For other cases `splitChunks.minRemainingSize` defaults to the value of `splitChunks.minSize` so it doesn't need to be specified manually except for the rare cases where deep control is required.
+`splitChunks.minRemainingSize` option was introduced in webpack 5 to avoid zero sized modules by ensuring that the minimum size of the chunk which remains after splitting is above a limit.
+
+The default value of `splitChunks.minRemainingSize` depends on the [`mode`](/configuration/mode/):
+
+| Mode | Default |
+| --------------- | ---------------------------------- |
+| `"production"` | the value of `splitChunks.minSize` |
+| `"development"` | `0` |
+| `"none"` | the value of `splitChunks.minSize` |
+
+It doesn't need to be specified manually except for the rare cases where deep control is required.
W> `splitChunks.minRemainingSize` only takes effect when a single chunk is remaining.