From cfe742d718eb193eaa74251366ef233e0750f857 Mon Sep 17 00:00:00 2001 From: Hai Date: Tue, 2 Dec 2025 23:59:53 +0800 Subject: [PATCH] docs: more about v5.103.0 --- src/content/configuration/dotenv.mdx | 2 +- src/content/configuration/experiments.mdx | 14 +-- src/content/configuration/module.mdx | 44 ++++++++ src/content/guides/output-management.mdx | 2 +- .../eval-source-map-dev-tool-plugin.mdx | 8 +- src/content/plugins/manifest-plugin.mdx | 106 ++++++++++++++++++ .../plugins/source-map-dev-tool-plugin.mdx | 8 +- 7 files changed, 165 insertions(+), 19 deletions(-) create mode 100644 src/content/plugins/manifest-plugin.mdx diff --git a/src/content/configuration/dotenv.mdx b/src/content/configuration/dotenv.mdx index d2c5cb0b919d..6fc2b654d67c 100644 --- a/src/content/configuration/dotenv.mdx +++ b/src/content/configuration/dotenv.mdx @@ -12,7 +12,7 @@ related: The `dotenv` option enables webpack's built-in environment variable loading from -`.env` files. ## `dotenv` +`.env` files. `boolean` `object` diff --git a/src/content/configuration/experiments.mdx b/src/content/configuration/experiments.mdx index dca8613267cc..f3d5268cbad5 100644 --- a/src/content/configuration/experiments.mdx +++ b/src/content/configuration/experiments.mdx @@ -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). @@ -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(); @@ -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 @@ -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` diff --git a/src/content/configuration/module.mdx b/src/content/configuration/module.mdx index d77dc1c54db9..4755defe5520 100644 --- a/src/content/configuration/module.mdx +++ b/src/content/configuration/module.mdx @@ -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 + + + +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. diff --git a/src/content/guides/output-management.mdx b/src/content/guides/output-management.mdx index 226c20a72614..abbe515598c3 100644 --- a/src/content/guides/output-management.mdx +++ b/src/content/guides/output-management.mdx @@ -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. diff --git a/src/content/plugins/eval-source-map-dev-tool-plugin.mdx b/src/content/plugins/eval-source-map-dev-tool-plugin.mdx index 8b3bfd2d9448..c0eb221178f8 100644 --- a/src/content/plugins/eval-source-map-dev-tool-plugin.mdx +++ b/src/content/plugins/eval-source-map-dev-tool-plugin.mdx @@ -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. @@ -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`). diff --git a/src/content/plugins/manifest-plugin.mdx b/src/content/plugins/manifest-plugin.mdx new file mode 100644 index 000000000000..5272f01f154b --- /dev/null +++ b/src/content/plugins/manifest-plugin.mdx @@ -0,0 +1,106 @@ +--- +title: ManifestPlugin +group: webpack +contributors: + - hai-x + - alexander-akait +--- + + + +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); + }, +}); +``` diff --git a/src/content/plugins/source-map-dev-tool-plugin.mdx b/src/content/plugins/source-map-dev-tool-plugin.mdx index 1b3613135a98..5d9ee04a70d2 100644 --- a/src/content/plugins/source-map-dev-tool-plugin.mdx +++ b/src/content/plugins/source-map-dev-tool-plugin.mdx @@ -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. @@ -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).