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
1 change: 1 addition & 0 deletions src/content/api/normalmodulefactory-hooks.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -152,3 +152,4 @@ Possible default identifiers:
5. `asset/source`
6. `asset/resource`
7. `asset/inline`
8. `asset/bytes`
1 change: 0 additions & 1 deletion src/content/awesome-webpack.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,6 @@ _People passionate about Webpack (In no particular order)_
- [Worker Loader](https://github.com/webpack/worker-loader): Worker loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
- [Resolve URL Loader](https://github.com/bholloway/resolve-url-loader): Resolves relative paths in url() statements. -- _Maintainer_: `Ben Holloway` [![Github][githubicon]](https://github.com/bholloway)
- [Import Loader](https://github.com/webpack/imports-loader): Imports loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
- [SourceMap Loader](https://github.com/webpack/source-map-loader): Extract sourceMappingURL comments from modules. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
- [Combine Loader](https://www.npmjs.com/package/webpack-combine-loaders) - Converts a loaders array into a single loader string. -- _Maintainer_: `James Friend` [![Github][githubicon]](https://github.com/jsdf)
- [Icon Font Loader](https://github.com/vusion/icon-font-loader) - Converts svgs into font icons in CSS. -- _Maintainer_: `Forrest R. Zhao` [![Github][githubicon]](https://github.com/rainfore)
- [Icons Loader](https://www.npmjs.com/package/icons-loader) - Generates an iconfont from SVG dependencies. -- _Maintainer_: `Mike Vercoelen` [![Github][githubicon]](https://github.com/mikevercoelen)
Expand Down
3 changes: 1 addition & 2 deletions src/content/configuration/devtool.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,7 @@ related:
---

This option controls if and how source maps are generated.

Use the [`SourceMapDevToolPlugin`](/plugins/source-map-dev-tool-plugin) for a more fine grained configuration. See the [`source-map-loader`](/loaders/source-map-loader) to deal with existing source maps.
Use the [`SourceMapDevToolPlugin`](/plugins/source-map-dev-tool-plugin) for a more fine grained configuration. See the [`Rule.extractSourceMap`](/configuration/module/#ruleextractsourcemap) to deal with existing source maps.

## devtool

Expand Down
19 changes: 2 additions & 17 deletions src/content/configuration/experiments.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,11 @@ Available options:
- [`css`](#experimentscss)
- [`deferImport`](#experimentsdeferimport)
- [`futureDefaults`](#experimentsfuturedefaults)
- `layers`: Enable module and chunk layers.
- [`lazyCompilation`](#experimentslazycompilation)
- [`outputModule`](#experimentsoutputmodule)
- `syncWebAssembly`: Support the old WebAssembly like in webpack 4.
- [`topLevelAwait`](#experimentstoplevelawait)
- `layers`: Enable module and chunk layers, removed and works without additional options since `5.102.0`.
- `topLevelAwait`: Transforms a module into an `async` module when an `await` is used at the top level. Starting from webpack version `5.83.0` (however, in versions prior to that, you can enable it by setting `experiments.topLevelAwait` to `true`), this feature is enabled by default, removed and works without additional options since `5.102.0`.

**webpack.config.js**

Expand All @@ -41,7 +41,6 @@ module.exports = {
experiments: {
asyncWebAssembly: true,
buildHttp: true,
layers: true,
lazyCompilation: true,
outputModule: true,
syncWebAssembly: true,
Expand Down Expand Up @@ -368,17 +367,3 @@ module.exports = {
},
};
```

### experiments.topLevelAwait

`boolean = true`

The `topLevelAwait` option transforms a module into an `async` module when an `await` is used at the top level. Starting from webpack version `5.83.0`, this feature is enabled by default. However, in versions prior to that, you can enable it by setting `experiments.topLevelAwait` to `true`.

```js
module.exports = {
experiments: {
topLevelAwait: true,
},
};
```
34 changes: 31 additions & 3 deletions src/content/configuration/module.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,9 @@ module.exports = {
// type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
outputPath: 'cdn-assets/',
},
'asset/bytes': {
// No generator options are supported for this module type yet
}
javascript: {
// No generator options are supported for this module type yet
},
Expand Down Expand Up @@ -249,6 +252,9 @@ module.exports = {
'asset/source': {
// ditto
},
'asset/bytes': {
// ditto
},
javascript: {
// Parser options for javascript modules
// e.g, enable parsing of require.ensure syntax
Expand Down Expand Up @@ -1019,6 +1025,28 @@ module.exports = {
};
```

## Rule.extractSourceMap

`boolean = false`

Extracts existing source map data from files (from their `//# sourceMappingURL` comment), useful for preserving the source maps of third-party libraries.

**webpack.config.js**

```js
module.exports = {
// ...
module: {
rules: [
{
test: /\.m?js$/,
extractSourceMap: true,
},
],
},
};
```

## Rule.loader

`Rule.loader` is a shortcut to `Rule.use: [ { loader } ]`. See [`Rule.use`](#ruleuse) and [`UseEntry.loader`](#useentry) for details.
Expand Down Expand Up @@ -1280,11 +1308,11 @@ module.exports = {
module: {
rules: [
{
test: /\.png/,
test: /\.png$/,
type: 'asset/resource',
},
{
test: /\.html/,
test: /\.html$/,
type: 'asset/resource',
generator: {
filename: 'static/[hash][ext]',
Expand Down Expand Up @@ -1444,7 +1472,7 @@ Include all modules that pass test assertion. If you supply a `Rule.test` option

`string`

Possible values: `'javascript/auto' | 'javascript/dynamic' | 'javascript/esm' | 'json' | 'webassembly/sync' | 'webassembly/async' | 'asset' | 'asset/source' | 'asset/resource' | 'asset/inline' | 'css/auto'`
Possible values: `'javascript/auto' | 'javascript/dynamic' | 'javascript/esm' | 'json' | 'webassembly/sync' | 'webassembly/async' | 'asset' | 'asset/source' | 'asset/resource' | 'asset/inline' | 'asset/bytes' | 'css' | 'css/auto' | 'css/module' | 'css/global'`

`Rule.type` sets the type for a matching module. This prevents defaultRules and their default importing behaviors from occurring. For example, if you want to load a `.json` file through a custom loader, you'd need to set the `type` to `javascript/auto` to bypass webpack's built-in json importing.

Expand Down
14 changes: 14 additions & 0 deletions src/content/configuration/other-options.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -260,6 +260,10 @@ module.exports = {
module: {
timestamp: true,
},
contextModule: {
hash: true,
timestamp: true,
},
resolve: {
timestamp: true,
},
Expand Down Expand Up @@ -337,6 +341,16 @@ Snapshots for building modules.
- `hash`: Compare content hashes to determine invalidation (more expensive than `timestamp`, but changes less often).
- `timestamp`: Compare timestamps to determine invalidation.

### contextModule

`object = {hash boolean = true, timestamp boolean = true}`

Snapshots for building context modules.

- `hash`: Compare content hashes to determine invalidation (more expensive than `timestamp`, but changes less often).
- `timestamp`: Compare timestamps to determine invalidation.


### resolve

`object = {hash boolean = true, timestamp boolean = true}`
Expand Down
Loading
Loading