Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/content/configuration/module.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -1982,7 +1982,7 @@ export default {

`string`

Specify the layer in which the module should be placed in. A group of modules could be united in one layer which could then be used in [split chunks](/plugins/split-chunks-plugin/#splitchunkslayer), [stats](/configuration/stats/#statsgroupmodulesbylayer) or [entry options](/configuration/entry-context/#entry-descriptor).
Specify the layer in which the module should be placed in. A group of modules could be united in one layer which could then be used in [split chunks](/plugins/split-chunks-plugin/#splitchunkscachegroupscachegrouplayer), [stats](/configuration/stats/#statsgroupmodulesbylayer) or [entry options](/configuration/entry-context/#entry-descriptor).

**webpack.config.js**

Expand Down
2 changes: 1 addition & 1 deletion src/content/plugins/NoEmitOnErrorsPlugin.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ contributors:
- snitin315
---

The `NoEmitOnErrorsPlugin` allows you to avoid emitting assets when there are any errors. Enabled by default, you can disable using [`optimization.emitOnErrors`](/configuration/optimization/#optimizationemitonerrors)
The `NoEmitOnErrorsPlugin` allows you to avoid emitting assets when there are any errors. It is enabled by default in `production` mode, where [`optimization.emitOnErrors`](/configuration/optimization/#optimizationemitonerrors) defaults to `false`; use that option to enable or disable it.

**webpack.config.js**

Expand Down
2 changes: 1 addition & 1 deletion src/content/plugins/banner-plugin.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,6 @@ import webpack from "webpack";

new webpack.BannerPlugin({
banner:
"fullhash:[fullhash], chunkhash:[chunkhash], name:[name], filebase:[filebase], query:[query], file:[file]",
"fullhash:[fullhash], chunkhash:[chunkhash], name:[name], base:[base], query:[query], file:[file]",
});
```
2 changes: 1 addition & 1 deletion src/content/plugins/context-replacement-plugin.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ new webpack.ContextReplacementPlugin(
)
```

If the resource (directory) matches `resourceRegExp`, the plugin replaces the default resource, recursive flag or generated regular expression with `newContentResource`, `newContentRecursive` or `newContextRegExp` respectively. If `newContentResource` is relative, it is resolved relative to the previous resource.
If the resource (directory) matches `resourceRegExp`, the plugin replaces the default resource, recursive flag or generated regular expression with `newContentResource`, `newContentRecursive` or `newContentRegExp` respectively. If `newContentResource` is relative, it is resolved relative to the previous resource.

Here's a small example to restrict module usage:

Expand Down
2 changes: 1 addition & 1 deletion src/content/plugins/define-plugin.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ It is possible to define variables with values that rely on files and will be re

There're two arguments for `webpack.DefinePlugin.runtimeValue` function:

- The first argument is a `function(module, key, version)` that should return the value to be assigned to the definition.
- The first argument is a `function({ module, key, version })` that should return the value to be assigned to the definition.
- The second argument could either be an array of file paths to watch for or a `true` to flag the module as uncacheable. Since 5.26.0, it can also take an object argument with the following properties:
- `fileDependencies?: string[]` A list of files the function depends on.
- `contextDependencies?: string[]` A list of directories the function depends on.
Expand Down
10 changes: 5 additions & 5 deletions src/content/plugins/dll-plugin.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -127,11 +127,11 @@ T> Multiple `DllPlugins` and multiple `DllReferencePlugins`.

### Source

- [DllPlugin source](https://github.com/webpack/webpack/blob/main/lib/DllPlugin.js)
- [DllReferencePlugin source](https://github.com/webpack/webpack/blob/main/lib/DllReferencePlugin.js)
- [DllEntryPlugin source](https://github.com/webpack/webpack/blob/main/lib/DllEntryPlugin.js)
- [DllModuleFactory source](https://github.com/webpack/webpack/blob/main/lib/DllModuleFactory.js)
- [ManifestPlugin source](https://github.com/webpack/webpack/blob/main/lib/LibManifestPlugin.js)
- [DllPlugin source](https://github.com/webpack/webpack/blob/main/lib/dll/DllPlugin.js)
- [DllReferencePlugin source](https://github.com/webpack/webpack/blob/main/lib/dll/DllReferencePlugin.js)
- [DllEntryPlugin source](https://github.com/webpack/webpack/blob/main/lib/dll/DllEntryPlugin.js)
- [DllModuleFactory source](https://github.com/webpack/webpack/blob/main/lib/dll/DllModuleFactory.js)
- [ManifestPlugin source](https://github.com/webpack/webpack/blob/main/lib/dll/LibManifestPlugin.js)

### Tests

Expand Down
3 changes: 3 additions & 0 deletions src/content/plugins/environment-plugin.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ This is equivalent to the following `DefinePlugin` application:
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
"process.env.DEBUG": JSON.stringify(process.env.DEBUG),
// since webpack 5.103.0
"import.meta.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
"import.meta.env.DEBUG": JSON.stringify(process.env.DEBUG),
});
```

Expand Down
14 changes: 3 additions & 11 deletions src/content/plugins/eval-source-map-dev-tool-plugin.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -23,28 +23,20 @@ This plugin enables more fine grained control of source map generation. It is al
new webpack.EvalSourceMapDevToolPlugin(options);
```

This plugin wraps every module in an `eval()` call with its source map appended as a data URL, so no `.map` files are emitted. It accepts the same options object as the [`SourceMapDevToolPlugin`](/plugins/source-map-dev-tool-plugin/), but the options that describe a separate source map file — `filename`, `fileContext` and `publicPath` — have nothing to name here and are ignored.
This plugin wraps every module in an `eval()` call with its source map appended as a data URL, so no `.map` files are emitted. It accepts the same options object as the [`SourceMapDevToolPlugin`](/plugins/source-map-dev-tool-plugin/), but the options that describe a separate source map file — `filename`, `fileContext` and `publicPath` — have nothing to name here and are ignored, as is a function-valued `append`.

## Options

The following options are supported:

- `test` (`string` `RegExp` `function (module) => boolean` `[string, RegExp, function (module) => boolean]`): Generate source maps for modules whose path matches the given value. It matches the module's own path, not the name of the chunk it ends up in, so it cannot be used to exclude a whole entry point or bundle.
- `test` (`string` `RegExp` `function (module) => boolean` `[string, RegExp, function (module) => boolean]`): Generate source maps for modules whose path matches the given value. There is no default: all modules get source maps unless `test`, `include` or `exclude` restrict them. It matches the module's own path, not the name of the chunk it ends up in, so it cannot be used to exclude a whole entry point or bundle.
- `include` (`string` `RegExp` `function (module) => boolean` `[string, RegExp, function (module) => boolean]`): Include source maps for module paths that match the given value.
- `exclude` (`string` `RegExp` `function (module) => boolean` `[string, RegExp, function (module) => boolean]`): Exclude modules that match the given value from source map generation.
- `append` (`string|function`): Appends the given value to the original asset. Usually the `#sourceMappingURL` comment. `[url]` is replaced with a URL to the source map file.

Starting from version 5.84.0, webpack allows the `append` option to be a function that accepts path data and an asset info object as arguments, and returns a string.

```ts
(pathData: PathData, assetInfo?: AssetInfo) => string;
```

- `append` (`string`): Appends the given value to the original asset. Usually the `#sourceMappingURL` comment. `[url]` is replaced with a URL to the source map file.
- `ignoreList` (`string` `RegExp` `function (source) => boolean` `[string, RegExp, function (source) => boolean]`): Decide whether to ignore source files that match the specified value in source maps.
- `module` (`boolean`): Indicates whether loaders should generate source maps (defaults to `true`).
- `moduleFilenameTemplate` (`string`): See [`output.devtoolModuleFilenameTemplate`](/configuration/output/#outputdevtoolmodulefilenametemplate).
- `columns` (`boolean`): Indicates whether column mappings should be used (defaults to `true`).
- `protocol` (`string`): Allows user to override default protocol (`webpack-internal://`)
- `namespace` (`string`): Namespace prefix to allow multiple webpack roots in the devtools. See [`output.devtoolNamespace`](/configuration/output/#outputdevtoolnamespace).
- `noSources = false` (`boolean`): Prevents the source file content from being included in the source map.
- `sourceRoot` (`string`): Provide a custom value for the `sourceRoot` property in source maps.
Expand Down
6 changes: 3 additions & 3 deletions src/content/plugins/hashed-module-ids-plugin.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@ This plugin supports the following options:
- `hashFunction`: The hashing algorithm to use, defaults to `'md4'`. All functions from Node.JS' [`crypto.createHash`](https://nodejs.org/api/crypto.html#crypto_crypto_createhash_algorithm_options) are supported.
- `hashDigest`: The encoding to use when generating the hash, defaults to `'base64'`. All encodings from Node.JS' [`hash.digest`](https://nodejs.org/api/crypto.html#crypto_hash_digest_encoding) are supported.

<Badge text="5.104.0+" />
<Badge text="5.102.1+" />

In addition to standard Node.js encodings, webpack also supports custom digest algorithms: `'base64url'`, `'base62'`, `'base58'`, `'base52'`, `'base49'`, `'base36'`, `'base32'`, and `'base25'`. These are useful for generating shorter or URL-safe hash values.
In addition to standard Node.js encodings, this plugin also supports `'base64url'`, which is useful for generating URL-safe hash values. The custom bases (`'base26'`, `'base32'`, `'base36'`, `'base49'`, `'base52'`, `'base58'`, `'base62'`) are only available for [`output.hashDigest`](/configuration/output/#outputhashdigest).

- `hashDigestLength`: The prefix length of the hash digest to use, defaults to `4`. Note that some generated ids might be longer than specified here, to avoid module id collisions.

Expand All @@ -49,7 +49,7 @@ new webpack.ids.HashedModuleIdsPlugin({
});
```

**Using URL-safe encoding (5.104.0+):**
**Using URL-safe encoding (5.102.1+):**

```js
import path from "node:path";
Expand Down
6 changes: 2 additions & 4 deletions src/content/plugins/hot-module-replacement-plugin.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,8 @@ W> HMR should **never** be used in production.

## Basic Usage

Enabling HMR is straightforward and in most cases no options are necessary.
Enabling HMR is straightforward; the plugin takes no options.

```js
new webpack.HotModuleReplacementPlugin({
// Options...
});
new webpack.HotModuleReplacementPlugin();
```
2 changes: 1 addition & 1 deletion src/content/plugins/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ T> CSS and HTML are built in (experimental), so neither needs a plugin here. The
| [`EnvironmentPlugin`](/plugins/environment-plugin) | Shorthand for using the [`DefinePlugin`](/plugins/define-plugin) on `process.env` keys |
| [`HotModuleReplacementPlugin`](/plugins/hot-module-replacement-plugin) | Enable Hot Module Replacement (HMR) |
| [`IgnorePlugin`](/plugins/ignore-plugin) | Exclude certain modules from bundles |
| [`LimitChunkCountPlugin`](/plugins/limit-chunk-count-plugin) | Set min/max limits for chunking to better control chunking |
| [`LimitChunkCountPlugin`](/plugins/limit-chunk-count-plugin) | Limit the maximum number of chunks by merging them |
| [`MergeDuplicateChunksPlugin`](/plugins/merge-duplicate-chunks-plugin) | Merge chunks that contain the same modules |
| [`MinChunkSizePlugin`](/plugins/min-chunk-size-plugin) | Keep chunk size above the specified limit |
| [`NoEmitOnErrorsPlugin`](/configuration/optimization/#optimizationemitonerrors) | Skip the emitting phase when there are compilation errors |
Expand Down
64 changes: 33 additions & 31 deletions src/content/plugins/internal-plugins.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -75,27 +75,25 @@ Prefetches `request` and dependencies to enable a more parallel compilation. It

### JsonpTemplatePlugin

`JsonpTemplatePlugin(options)`
`web/JsonpTemplatePlugin()`

Chunks are wrapped into JSONP-calls. A loading algorithm is included in entry chunks. It loads chunks by adding a `<script>` tag.

`options` are the output options.
It takes no options and sets [`output.chunkLoading`](/configuration/output/#outputchunkloading) to `'jsonp'`. It is configured via the output options:

`options.jsonpFunction` is the JSONP function.
[`output.chunkLoadingGlobal`](/configuration/output/#outputchunkloadingglobal) is the JSONP function.

`options.publicPath` is used as path for loading the chunks.
[`output.publicPath`](/configuration/output/#outputpublicpath) is used as path for loading the chunks.

`options.chunkFilename` is the filename under that chunks are expected.
[`output.chunkFilename`](/configuration/output/#outputchunkfilename) is the filename under that chunks are expected.

### NodeTemplatePlugin

`node/NodeTemplatePlugin(options)`

Chunks are wrapped into Node.js modules exporting the bundled modules. The entry chunks loads chunks by requiring them.

`options` are the output options.

`options.chunkFilename` is the filename under that chunks are expected.
`options.asyncChunkLoading` (`boolean`) selects `'async-node'` instead of `'require'` as [`output.chunkLoading`](/configuration/output/#outputchunkloading).

### LibraryTemplatePlugin

Expand All @@ -105,47 +103,53 @@ The entries chunks are decorated to form a library `name` of type `type`.

### WebWorkerTemplatePlugin

`webworker/WebWorkerTemplatePlugin(options)`
`webworker/WebWorkerTemplatePlugin()`

Chunks are loaded by `importScripts`. Else it's similar to [`JsonpTemplatePlugin`](#jsonptemplateplugin).

`options` are the output options.
It takes no options and sets [`output.chunkLoading`](/configuration/output/#outputchunkloading) to `'import-scripts'`.

### EvalDevToolModulePlugin

Decorates the module template by wrapping each module in a `eval` annotated with `// @sourceURL`.
`EvalDevToolModulePlugin(options)`

Decorates the module template by wrapping each module in a `eval` annotated with a `//# sourceURL=` comment (`options.sourceUrlComment`, defaults to `//# sourceURL=[url]`).

### SourceMapDevToolPlugin

`SourceMapDevToolPlugin(sourceMapFilename, sourceMappingURLComment, moduleFilenameTemplate, fallbackModuleFilenameTemplate)`
`SourceMapDevToolPlugin(options)`

Decorates the templates by generating a SourceMap for each chunk.

`sourceMapFilename` the filename template of the SourceMap. `[hash]`, `[name]`, `[id]`, `[file]` and `[filebase]` are replaced. If this argument is missing, the SourceMap will be inlined as DataUrl.
`options.filename` the filename template of the SourceMap. `[fullhash]`, `[name]`, `[id]`, `[file]` and `[base]` are replaced. If this option is missing, the SourceMap will be inlined as DataUrl.

`options.append`, `options.moduleFilenameTemplate`, `options.fallbackModuleFilenameTemplate` and the remaining options are described on the [SourceMapDevToolPlugin page](/plugins/source-map-dev-tool-plugin/).

### HotModuleReplacementPlugin

`HotModuleReplacementPlugin(options)`
`HotModuleReplacementPlugin()`

Add support for hot module replacement. Decorates the templates to add runtime code. Adds `module.hot` API.

`options.hotUpdateChunkFilename` the filename for hot update chunks.
It takes no options and reads the following output options:

`options.hotUpdateMainFilename` the filename for the hot update manifest.
`output.hotUpdateChunkFilename` the filename for hot update chunks.

`options.hotUpdateFunction` JSON function name for the hot update.
`output.hotUpdateMainFilename` the filename for the hot update manifest.

[`output.hotUpdateGlobal`](/configuration/output/#outputhotupdateglobal) the global function name for loading hot updates.

## source

Plugins affecting the source code of modules.

### APIPlugin

Make webpack_public_path, webpack_require, webpack_modules and webpack_chunk_load accessible. Ensures that `require.valueOf` and `require.onError` are not processed by other plugins.
Makes the `__webpack_*` variables (`__webpack_public_path__`, `__webpack_require__`, `__webpack_modules__`, `__webpack_chunk_load__`, `__webpack_hash__`, `__webpack_nonce__`, ...) accessible in modules and maps `require.onError` to the runtime's error handler (`__webpack_require__.oe`).

### CompatibilityPlugin

Currently useless. Ensures compatibility with other module loaders.
Ensures compatibility with other module loaders by rewriting legacy patterns: browserify-style `require` delegators, user code that declares its own `__webpack_require__`, and hashbang lines.

### ConstPlugin

Expand Down Expand Up @@ -174,13 +178,13 @@ It is important to mention that `import { calculateTax } from './tax';` will als

### ProvidePlugin

`ProvidePlugin(name, request)`
`ProvidePlugin(definitions)`

If `name` is used in a module it is filled by a module loaded by `import ... from <request>`/`import(<request>)`/`require(<request>)`.
For each `name: request` entry in `definitions`, if `name` is used in a module it is filled by a module loaded by `import ... from <request>`/`import(<request>)`/`require(<request>)`.

### NodeStuffPlugin

`NodeStuffPlugin(options, context)`
`NodeStuffPlugin(options)`

Provide stuff that is normally available in Node.js modules.

Expand All @@ -194,11 +198,9 @@ Provide stuff that is normally available in require.js.

### NodeSourcePlugin

`node/NodeSourcePlugin(options)`

This module adds stuff from Node.js that is not available in non Node.js environments.
`node/NodeSourcePlugin()`

It adds polyfills for `process`, `console`, `Buffer` and `global` if used. It also binds the built in Node.js replacement modules.
This plugin is a no-op kept for backward compatibility. webpack 5 no longer polyfills Node.js core modules or globals such as `process` and `Buffer`.

### NodeTargetPlugin

Expand All @@ -222,9 +224,9 @@ Provides CommonJs-style `require` to modules.

### RequireContextPlugin

`dependencies/RequireContextPlugin(modulesDirectories, extensions)`
`dependencies/RequireContextPlugin()`

Provides `require.context`. The parameter `modulesDirectories` and `extensions` are used to find alternative requests for files. It's useful to provide the same arrays as you provide to the resolver.
Provides `require.context`. Alternative requests for files are derived from the configured [resolve options](/configuration/resolve/) (`modules`, `extensions`, `mainFiles`, `enforceExtension`).

### RequireEnsurePlugin

Expand Down Expand Up @@ -256,7 +258,7 @@ Note that all plugins under `webpack.optimize` namespace should only be used whe

Merge chunks limit chunk count is lower than `options.maxChunks`.

The overhead for each chunks is provided by `options.chunkOverhead` or defaults to 10000. Entry chunks sizes are multiplied by `options.entryChunkMultiplicator` (or 10).
`options.chunkOverhead` and `options.entryChunkMultiplicator` are still accepted but no longer have any effect.

Chunks that reduce the total size the most are merged first. If multiple combinations are equal the minimal merged size wins.

Expand All @@ -270,11 +272,11 @@ Chunks with the same modules are merged.

`optimize/RemoveEmptyChunksPlugin()`

Modules that are included in every parent chunk are removed from the chunk.
Chunks that contain no modules (and are neither runtime nor entry chunks) are removed.

### MinChunkSizePlugin

`optimize/MinChunkSizePlugin(minChunkSize)`
`optimize/MinChunkSizePlugin({ minChunkSize })`

Merges chunks until each chunk has the minimum size of `minChunkSize`.

Expand Down
8 changes: 0 additions & 8 deletions src/content/plugins/limit-chunk-count-plugin.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -47,11 +47,3 @@ export default {
### minChunkSize

Keeping chunk size above the specified limit is no longer a feature of this plugin. Use [MinChunkSizePlugin](/plugins/min-chunk-size-plugin) instead.

## Usage via CLI

This plugin and it's options can also be invoked via the [CLI](/api/cli/):

```bash
webpack --optimize-max-chunks 15
```
Loading
Loading