Skip to content
Open
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
6 changes: 3 additions & 3 deletions src/content/configuration/cache.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -267,11 +267,11 @@ export default {

### cache.managedPaths

`[string] = ['./node_modules']`
`[string]`

W> Moved to [snapshot.managedPaths](/configuration/other-options/#managedpaths)

`cache.managedPaths` is an array of package-manager only managed paths. Webpack will avoid hashing and timestamping them, assume the version is unique and will use it as a snapshot (for both memory and filesystem cache).
`cache.managedPaths` is still accepted by the configuration schema (only under `type: 'filesystem'`) but ignored: webpack drops it while normalizing the configuration and only reads [`snapshot.managedPaths`](/configuration/other-options/#managedpaths), which is the effective option for package-manager managed paths.

### cache.maxAge

Expand Down Expand Up @@ -457,7 +457,7 @@ export default {

`string: 'memory' | 'filesystem'`

Sets the `cache` type to either in memory or on the file system. The `memory` option is straightforward, it tells webpack to store cache in memory and doesn't allow additional configuration:
Sets the `cache` type to either in memory or on the file system. The `memory` option is straightforward, it tells webpack to store cache in memory and only accepts the [`cache.maxGenerations`](#cachemaxgenerations) and [`cache.cacheUnaffected`](#cachecacheunaffected) options:

**webpack.config.js**

Expand Down
14 changes: 7 additions & 7 deletions src/content/configuration/dev-server.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ If you're using dev-server through the Node.js API, the options in `devServer` w

W> You cannot use the second `compiler` argument (a callback) when using `WebpackDevServer`.

W> Be aware that when [exporting multiple configurations](/configuration/configuration-types/#exporting-multiple-configurations) only the `devServer` options for the first configuration will be taken into account and used for all the configurations in the array.
W> Be aware that when [exporting multiple configurations](/configuration/configuration-types/#exporting-multiple-configurations) the `devServer` options are taken from the first configuration that defines `devServer`; if none does, from the first configuration with a web-like target (a `web` or `universal` platform, which covers `web`, `webworker`, `electron-preload`, `electron-renderer`, `node-webkit` and an unset `target`), and otherwise from the first configuration. They are used for all the configurations in the array.

T> If you're having trouble, navigating to the `/webpack-dev-server` route will show where files are served. For example, `http://localhost:9000/webpack-dev-server`.

Expand Down Expand Up @@ -365,9 +365,9 @@ W> The function will not have access to the variables declared in the outer scop

### progress

`boolean`
`boolean` `'linear' | 'circular'`

Prints compilation progress in percentage in the browser.
Prints compilation progress in percentage in the browser. `'linear'` and `'circular'` additionally show a visual indicator.

**webpack.config.js**

Expand Down Expand Up @@ -396,11 +396,11 @@ npx webpack serve --no-client-progress

### reconnect

`boolean = true` `number`
`boolean` `number = 10`

<Badge text="v4.4.0+" />

Tells dev-server the number of times it should try to reconnect the client. When `true` it will try to reconnect unlimited times.
Tells dev-server the number of times it should try to reconnect the client, 10 by default. When `true` it will try to reconnect unlimited times; `false` disables reconnecting.

**webpack.config.js**

Expand Down Expand Up @@ -1262,7 +1262,7 @@ export default {

## devServer.server

`'http' | 'https' | 'spdy'` `string` `object`
`'http' | 'https' | 'http2'` `string` `object` `function`

<Badge text="v4.4.0+" />

Expand Down Expand Up @@ -1323,7 +1323,7 @@ Usage via the CLI:
npx webpack serve --server-type spdy
```

W> This option is ignored for Node 15.0.0 and above, as [spdy is broken for those versions](https://github.com/spdy-http2/node-spdy/issues/380). The dev server will migrate over to Node's built-in HTTP/2 once [Express](https://expressjs.com/) supports it.
W> Since webpack-dev-server v6, `'spdy'` is no longer a built-in server type: it only works as a custom server string when the `spdy` package is installed, the CLI does not accept it, and [spdy is broken for Node 15.0.0 and above](https://github.com/spdy-http2/node-spdy/issues/380). Prefer `'http2'`, which uses Node's built-in `http2` module (with HTTP/1 fallback).

Use the object syntax to provide your own certificate:

Expand Down
8 changes: 5 additions & 3 deletions src/content/configuration/devtool.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,12 @@ Use the [`SourceMapDevToolPlugin`](/plugins/source-map-dev-tool-plugin) for a mo

## devtool

`string = 'eval'` `Array<{ type: "all" | "javascript" | "css", use: string }>` `false`
`string` `Array<{ type: "all" | "javascript" | "css", use: string }>` `false`

Choose a style of [source mapping](http://blog.teamtreehouse.com/introduction-source-maps) to enhance the debugging process. These values can affect build and rebuild speed dramatically.

The default is `false`. In [`mode: 'development'`](/configuration/mode/) it defaults to `'eval'` for JavaScript (plus `'source-map'` for CSS when [`experiments.css`](/configuration/experiments/#experimentscss) is enabled), unless a `module` or `modern-module` [library type](/configuration/output/#outputlibrarytype) is emitted, in which case it stays `false`.

<Badge text="5.105.0+" />

You can also provide an array of objects to configure different source map styles for different asset types:
Expand Down Expand Up @@ -98,7 +100,7 @@ T> Instead of using the `devtool` option you can also use `SourceMapDevToolPlugi
| `hidden-*` addition | no reference to the SourceMap added. When SourceMap is not deployed, but should still be generated, e. g. for error reporting purposes. |
| `nosources-*` addition | source code is not included in SourceMap. This can be useful when the original files should be referenced (further config options needed). |

T> We expect a certain pattern when validate devtool name, pay attention and don't mix up the sequence of devtool string. The pattern is: `[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map`.
T> We expect a certain pattern when validate devtool name, pay attention and don't mix up the sequence of devtool string. The pattern is: `[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map[-debugids]`.

Some of these values are suited for development and some for production. For development you typically want fast Source Maps at the cost of bundle size, but for production you want separate Source Maps that are accurate and support minimizing.

Expand Down Expand Up @@ -148,7 +150,7 @@ The following options are not ideal for development nor production. They are nee

These options are typically used in production:

`(none)` (Omit the `devtool` option or set `devtool: false`) - No SourceMap is emitted. This is a good option to start with.
`(none)` (Set `devtool: false`, or omit the option outside of `development` mode) - No SourceMap is emitted. This is a good option to start with.

`source-map` - A full SourceMap is emitted as a separate file. It adds a reference comment to the bundle so development tools know where to find it.

Expand Down
22 changes: 15 additions & 7 deletions src/content/configuration/dotenv.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ export default {
// ...
dotenv: {
prefix: "WEBPACK_",
dir: true,
template: [".env", ".env.local", ".env.[mode]", ".env.[mode].local"],
},
};
Expand Down Expand Up @@ -76,23 +75,27 @@ T> For security reasons, an empty string `''` is not allowed as a prefix, as it

### `dir`

`boolean` `string`
`false` `string`

**Default:** `true`
**Default:** the compiler [`context`](/configuration/entry-context/#context)

The directory from which `.env` files are loaded.

- `true` - Load from the project root (context)
- `false` - Disable `.env` file loading
- `string` - Relative path from project root or absolute path
- `string` - Absolute path to the directory; relative paths are rejected by the configuration validation

**webpack.config.js**

```js
import path from "node:path";
import { fileURLToPath } from "node:url";

const __dirname = path.dirname(fileURLToPath(import.meta.url));

export default {
// ...
dotenv: {
dir: "./config", // Load from ./config directory
dir: path.resolve(__dirname, "config"), // Load from ./config directory
},
};
```
Expand Down Expand Up @@ -285,10 +288,15 @@ Load environment files from a custom location with custom naming:
**webpack.config.js**

```js
import path from "node:path";
import { fileURLToPath } from "node:url";

const __dirname = path.dirname(fileURLToPath(import.meta.url));

export default {
// ...
dotenv: {
dir: "./environments",
dir: path.resolve(__dirname, "environments"),
template: [".env.base", ".env.[mode]"],
},
};
Expand Down
4 changes: 2 additions & 2 deletions src/content/configuration/experiments.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ contributors:

## experiments

`boolean: false`
`object`

`experiments` option was introduced in webpack 5 to empower users with the ability to activate and try out experimental features.

Expand Down Expand Up @@ -499,7 +499,7 @@ Placing an HTML `<!-- webpackIgnore: true -->` comment immediately before a tag

<Badge text="5.108.0+" />

When `experiments.html` is enabled, `.html` is added to the default `resolve.extensions` ahead of the JavaScript extensions, so a directory entry like `entry: "./src"` resolves `./src/index.html` even when `./src/index.js` also exists. This makes the build HTML-first, similar to Vite or Parcel.
When `experiments.html` is explicitly set to `true`, `.html` is added to the default `resolve.extensions` ahead of the JavaScript extensions, so a directory entry like `entry: "./src"` resolves `./src/index.html` even when `./src/index.js` also exists. This makes the build HTML-first, similar to Vite or Parcel. With the default `'auto'` (since 5.109.0), `.html` is appended after the JavaScript extensions instead, so `./src/index.js` still wins.

```js
export default {
Expand Down
25 changes: 15 additions & 10 deletions src/content/configuration/externals.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ import $ from "jquery";
$(".my-element").animate(/* ... */);
```

The property name `jquery` specified under `externals` in the above `webpack.config.js` indicates that the module `jquery` in `import $ from 'jquery'` should be excluded from bundling. In order to replace this module, the value `jQuery` will be used to retrieve a global `jQuery` variable, as the default external library type is `var`, see [externalsType](#externalstype).
The property name `jquery` specified under `externals` in the above `webpack.config.js` indicates that the module `jquery` in `import $ from 'jquery'` should be excluded from bundling. In order to replace this module, the value `jQuery` will be used to retrieve a global `jQuery` variable, as the default external library type is `var` when neither [`output.library.type`](/configuration/output/#outputlibrarytype) nor [`output.module`](/configuration/output/#outputmodule) is set, see [externalsType](#externalstype).

While we showed an example consuming external global variable above, the external can actually be available in any of these forms: global variable, CommonJS, AMD, ES2015 Module, see more in [externalsType](#externalstype).

Expand Down Expand Up @@ -131,7 +131,7 @@ export default {

### object

W> An object with `{ root, amd, commonjs, ... }` is only allowed for [`libraryTarget: 'umd'`](/configuration/output/#outputlibrarytarget) and [`externalsType: 'umd'`](#externalstype). It's not allowed for other library targets.
W> An object with `{ root, amd, commonjs, ... }` maps [externals types](#externalstype) to the external's target for each type. A [`umd`](/configuration/output/#outputlibrarytarget) library reads the `root`, `amd`, `commonjs` and `commonjs2` entries, an `amd` or `system` library reads `amd`, and for any other externals type webpack uses the entry matching the effective type.

W> Since webpack 5.109.0, an object external with no entry for the used externals type emits a build error instead of silently resolving to `undefined` at runtime.

Expand Down Expand Up @@ -231,6 +231,8 @@ Here're arguments the function can receive:
- `ctx` (`object`): Object containing details of the file.
- `ctx.context` (`string`): The directory of the file which contains the import.
- `ctx.request` (`string`): The import path being requested.
- `ctx.originalRequest` (`string`) <Badge text='5.110.0+' />: Same as `ctx.request`, except for an element of a context module, where it is the request as written by the user.
- `ctx.dependencyType` (`string`): The category of the referencing dependency, e.g. `'esm'`, `'commonjs'` or `'url'`.
- `ctx.contextInfo` (`object`): Contains information about the issuer (e.g. the layer and compiler)
- `ctx.getResolve` <Badge text='5.15.0+' />: Get a resolve function with the current resolver options.
- `callback` (`function (err, result, type)`): Callback function used to indicate how the module should be externalized.
Expand Down Expand Up @@ -397,20 +399,25 @@ export default {

## externalsType

`string = 'var'`
`string`

Specify the default type of externals. `amd`, `umd`, `system` and `jsonp` externals **depend on the [`output.libraryTarget`](/configuration/output/#outputlibrarytarget)** being set to the same value e.g. you can only consume `amd` externals within an `amd` library.
Specify the default type of externals. It defaults to [`output.library.type`](/configuration/output/#outputlibrarytype) when that is a valid externals type, otherwise to `'module-import'` when [`output.module`](/configuration/output/#outputmodule) is enabled, and to `'var'` otherwise. `amd`, `umd`, `system` and `jsonp` externals **depend on the [`output.libraryTarget`](/configuration/output/#outputlibrarytarget)** being set to the same value e.g. you can only consume `amd` externals within an `amd` library.

Supported types:

- `'amd'`
- [`'amd-async'`](#externalstypeamd-async) - loads the external via the asynchronous AMD `require([...])` API (async module) <Badge text="5.109.0+" />
- `'amd-require'`
- `'assign'` - same as `'var'`
- `'asset'` - the external is treated as an asset URL, the module exports the request string
- `'asset-url'` - the external is used as a URL, e.g. in a CSS `url()`
- [`'commonjs'`](#externalstypecommonjs)
- `'commonjs2'` - same output as `'commonjs'`
- `'commonjs-module'`
- `'commonjs-static'` - same output as `'commonjs'`
- `'css-import'` - the external becomes a CSS `@import url(...)`
- `'css-url'` - deprecated alias for `'asset-url'`
- [`'global'`](#externalstypeglobal)
- `'import'` - uses `import()` to load a native EcmaScript module (async module)
- `'jsonp'`
- [`'module'`](#externalstypemodule)
- [`'import'`](#externalstypeimport)
Expand Down Expand Up @@ -502,7 +509,7 @@ export default {
Will generate into something like:

```js
import fs from "fs-extra";
const fs = require("fs-extra");
```

Note that there will be a `require()` in the output bundle.
Expand Down Expand Up @@ -601,8 +608,6 @@ import source v from "external-mod";

### externalsType.import

<Badge text="5.94.0+" />

Specify the default type of externals as `'import'`. Webpack will generate code like `import('...')` for externals used in a module.

#### Example
Expand Down Expand Up @@ -700,7 +705,7 @@ Will generate something like below:
```js
import * as __WEBPACK_EXTERNAL_MODULE_lodash__ from "lodash";

const lodash = __WEBPACK_EXTERNAL_MODULE_jquery__;
const lodash = __WEBPACK_EXTERNAL_MODULE_lodash__;

const __webpack_modules__ = {
jQuery: (module) => {
Expand Down Expand Up @@ -1093,7 +1098,7 @@ Enable presets of externals for specific targets.
| `web` | Treat references to `http(s)://...` and `std:...` as external and load them via `import` when used. **(Note that this changes execution order as externals are executed before any other code in the chunk)**. | boolean |
| `webAsync` | Treat references to `http(s)://...` and `std:...` as external and load them via `async import()` when used **(Note that this external type is an `async` module, which has various effects on the execution)**. | boolean |

Note that if you're going to output ES Modules with those node.js-related presets, webpack will set the default `externalsType` to [`node-commonjs`](#externalstypenode-commonjs) which would use `createRequire` to construct a require function instead of using `require()`.
Note that if you're going to output ES Modules with those node.js-related presets, the built-in modules are externalized as [`module-import`](#externalstypemodule-import). In ES module output, [`node-commonjs`](#externalstypenode-commonjs) externals, as well as `commonjs*` externals when `externalsPresets.node` is set, use `createRequire` to construct a require function instead of using `require()`.

**Example**

Expand Down
Loading