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/dotenv.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ related:

<Badge text="5.103.0+" />
The `dotenv` option enables webpack's built-in environment variable loading from
`.env` files. ## `dotenv`
`.env` files.

`boolean` `object`

Expand Down
14 changes: 5 additions & 9 deletions src/content/configuration/experiments.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,6 @@ module.exports = {
When enabled, webpack can build remote resources that begin with the `http(s):` protocol.

- Type:

- `(string | RegExp | ((uri: string) => boolean))[]`

A shortcut for [`experiments.buildHttp.allowedUris`](#experimentsbuildhttpalloweduris).
Expand Down Expand Up @@ -223,9 +222,12 @@ Enables the following syntaxes:

```js
import defer * as module from 'module-name';
// or
import * as module2 from /* webpackDefer: true */ 'module-name2';

// Or using dynamic import
import.defer('module-name3');
import(/* webpackDefer: true */ 'module-name4');

export function f() {
// module-name is evaluated synchronously, then call doSomething() on it.
module.doSomething();
Expand All @@ -251,12 +253,7 @@ Esbuild is _not_ compatible with this feature (see [evanw/esbuild#1439](https://

#### Not implemented

The asynchronous form of this proposal is not implemented yet.

```js
import.defer('module-name'); // not implemented
import(/* webpackDefer: true */ 'module-name'); // not implemented
```
import.defer() is not yet supported for ContextModule (the import path is a dynamic expression).

### experiments.futureDefaults

Expand All @@ -278,7 +275,6 @@ module.exports = {
Compile entrypoints and dynamic `import`s only when they are in use. It can be used for either Web or Node.js.

- Type

- `boolean`
- `object`

Expand Down
44 changes: 44 additions & 0 deletions src/content/configuration/module.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -748,6 +748,50 @@ The `'relative'` value for `module.parser.javascript.url` is available since web
1. This is useful for SSR (Server side rendering) when base URL is not known by server (and it saves a few bytes). To be identical it must also be used for the client build.
2. Also for static site generators, mini-css-plugin and html-plugin, etc. where server side rendering is commonly needed.

#### module.parser.javascript.parse

<Badge text="5.103.0+" />

Use a custom JavaScript parse function instead of webpack's built-in parser.

Return `ast`, `comments`, and `semicolons` to ensure webpack’s AST analysis works correctly.

- `ast` should be ESTree-compatible.
- `comments` is an array of ESTree comment nodes.
- `semicolons` is a set of positions where the parser inserted a semicolon.

- Type: `(code: string, options: ParseOptions) => ParseResult`
- Example:

```js
module.exports = {
module: {
parser: {
javascript: {
parse: (code, options) => {
const comments = [];
const semicolons = new Set();
const onInsertedSemicolon = (pos) => semicolons.add(pos);

const parseOptions = {
...options,
module: options.sourceType === 'module',
loc: options.locations,
onComment: options.comments ? comments : undefined,
onInsertedSemicolon: options.semicolons
? onInsertedSemicolon
: undefined,
};

const ast = meriyah.parse(code, parseOptions);
return { ast, comments, semicolons };
},
},
},
},
};
```

### module.parser.json

Configure options for json parser.
Expand Down
2 changes: 1 addition & 1 deletion src/content/guides/output-management.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,7 @@ Now run an `npm run build` and inspect the `/dist` folder. If everything went we

You might be wondering how webpack and its plugins seem to "know" what files are being generated. The answer is in the manifest that webpack keeps to track how all the modules map to the output bundles. If you're interested in managing webpack's [`output`](/configuration/output) in other ways, the manifest would be a good place to start.

The manifest data can be extracted into a json file for consumption using the [`WebpackManifestPlugin`](https://github.com/shellscape/webpack-manifest-plugin).
The manifest data can be extracted into a json file for consumption using the [`ManifestPlugin`](/plugins/manifest-plugin/).

We won't go through a full example of how to use this plugin within your projects, but you can read up on [the concept page](/concepts/manifest) and the [caching guide](/guides/caching) to find out how this ties into long term caching.

Expand Down
8 changes: 4 additions & 4 deletions src/content/plugins/eval-source-map-dev-tool-plugin.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@ new webpack.EvalSourceMapDevToolPlugin(options);

The following options are supported:

- `test` (`string|RegExp|array`): Include source maps for modules based on their extension (defaults to `.js` and `.css`).
- `include` (`string|RegExp|array`): Include source maps for module paths that match the given value.
- `exclude` (`string|RegExp|array`): Exclude modules that match the given value from source map generation.
- `test` (`string` `RegExp` `function (asset) => boolean` `[string, RegExp, function (asset) => boolean]`): Include source maps for modules based on their extension (defaults to `.js` and `.css`).
- `include` (`string` `RegExp` `function (asset) => boolean` `[string, RegExp, function (asset) => boolean]`): Include source maps for module paths that match the given value.
- `exclude` (`string` `RegExp` `function (asset) => boolean` `[string, RegExp, function (asset) => 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.
Expand All @@ -37,7 +37,7 @@ The following options are supported:
(pathData: PathData, assetInfo?: AssetInfo) => string;
```

- `ignoreList` (`string|RegExp|array`): Decide whether to ignore source files that match the specified value in source maps.
- `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`).
Expand Down
106 changes: 106 additions & 0 deletions src/content/plugins/manifest-plugin.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
---
title: ManifestPlugin
group: webpack
contributors:
- hai-x
- alexander-akait
---

<Badge text="5.103.0+" />

The built-in `ManifestPlugin` generates one asset manifest for your build. Port from [`WebpackManifestPlugin`](https://github.com/shellscape/webpack-manifest-plugin).

**webpack.config.js**

```javascript
new webpack.ManifestPlugin({
// options...
});
```

## Options

### `entrypoints`

`boolean = true`

Enables generation of the `entrypoints` section in the manifest.

When `entrypoints` is enabled and one entry uses `dependOn`

**webpack.config.js**

```javascript
module.exports = {
entry: {
entry1: {
import: './src/file_1.js',
dependOn: 'entry2',
},
entry2: './src/file_2.js',
},
plugins: [
new webpack.ManifestPlugin({
filename: 'manifest.json',
}),
],
};
```

The resulting manifest will contain the parent/child relationship map

**manifest.json**

```json
{
"entrypoints": {
"entry1": {
"imports": ["entry1.js"],
"parents": ["entry2"]
},
"entry2": {
"imports": ["entry2.js"]
}
}
}
```

### `filename`

`string = manifest.json`

Specifies the filename of the output file on disk. By default the plugin will emit `manifest.json` inside the `output.path` directory.

### `filter`

`(item: ManifestItem) => boolean`

Allows filtering the files which make up the manifest.

### `generate`

`function (manifest: ManifestObject) => ManifestObject`

Receives the manifest object, modifies it, and returns the modified manifest.

### `prefix`

`string = "[publicpath]"`

Specifies a path prefix for all keys in the manifest.

### serialize

`function (manifest: ManifestObject) => string = (manifest) => JSON.stringify(manifest, null, 2)`

Receives the manifest object and returns the manifest string.

Use `serialize` to output other formats, for example YAML:

```javascript
new webpack.ManifestPlugin({
serialize(manifest) {
return YAML.stringify(manifest, 4);
},
});
```
8 changes: 4 additions & 4 deletions src/content/plugins/source-map-dev-tool-plugin.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@ new webpack.SourceMapDevToolPlugin(options);

The following options are supported:

- `test` (`string` `RegExp` `[string, RegExp]`): Include source maps for modules based on their extension (defaults to `.js`, `.mjs`, and `.css`).
- `include` (`string` `RegExp` `[string, RegExp]`): Include source maps for module paths that match the given value.
- `exclude` (`string` `RegExp` `[string, RegExp]`): Exclude modules that match the given value from source map generation.
- `test` (`string` `RegExp` `function (asset) => boolean` `[string, RegExp, function (asset) => boolean]`): Include source maps for modules based on their extension (defaults to `.js`, `.mjs`, and `.css`).
- `include` (`string` `RegExp` `function (asset) => boolean` `[string, RegExp, function (asset) => boolean]`): Include source maps for module paths that match the given value.
- `exclude` (`string` `RegExp` `function (asset) => boolean` `[string, RegExp], function (asset) => boolean`): Exclude modules that match the given value from source map generation.
- `filename` (`string`): Defines the output filename of the SourceMap (will be inlined if no value is provided).
- `append` (`string` `function` `false`): Appends the given value to the original asset. Usually the `#sourceMappingURL` comment. `[url]` is replaced with a URL to the source map file. Since webpack v4.36.0, path parameters are supported: `[chunk]`, `[filename]` and `[contenthash]`. Setting `append` to `false` disables the appending.

Expand All @@ -38,7 +38,7 @@ The following options are supported:

- `moduleFilenameTemplate` (`string`): See [`output.devtoolModuleFilenameTemplate`](/configuration/output/#outputdevtoolmodulefilenametemplate).
- `fallbackModuleFilenameTemplate` (`string`): See link above.
- `ignoreList` (`string|RegExp|array`): Decide whether to ignore source files that match the specified value in source maps.
- `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 = true` (`boolean`): Indicates whether loaders should generate source maps.
- `columns = true` (`boolean`): Indicates whether column mappings should be used.
- `namespace` (`string`): Namespace prefix to allow multiple webpack roots in the devtools. See [`output.devtoolNamespace`](/configuration/output/#outputdevtoolnamespace).
Expand Down
Loading