Skip to content

docs: update webpack-cli #8009

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alexander-akait merged 2 commits into from
Mar 13, 2026
Merged

docs: update webpack-cli #8009

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b58ca06
docs: update webpack-cli
alexander-akait Mar 13, 2026
2f4ea03
docs: update webpack-cli
alexander-akait Mar 13, 2026
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
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@
"copy-webpack-plugin": "^14.0.0",
"css-loader": "^7.1.3",
"css-minimizer-webpack-plugin": "^8.0.0",
"cypress": "^15.9.0",
"cypress": "^15.12.0",
"directory-tree": "^3.6.0",
"directory-tree-webpack-plugin": "^1.0.3",
"duplexer": "^0.1.1",
Expand Down Expand Up @@ -158,7 +158,7 @@
"unist-util-visit": "^5.1.0",
"webpack": "^5.105.0",
"webpack-bundle-analyzer": "^5.2.0",
"webpack-cli": "^6.0.1",
"webpack-cli": "^7.0.0",
"webpack-dev-server": "^5.2.3",
"webpack-merge": "^6.0.1",
"workbox-webpack-plugin": "^7.4.0",
Expand Down
55 changes: 15 additions & 40 deletions src/content/api/cli.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,23 +34,23 @@ For proper usage and easier distribution of this configuration, webpack can be c

Read the [installation guide](/guides/installation) if you don't already have webpack and CLI installed.

W> `webpack-cli` v6.0.0+ requires node >= v18.12.0, `webpack >= v5.82.0`, and `webpack-dev-server >= v5.0.0`.
W> `webpack-cli` v7.0.0+ requires node >= v20.9.0, `webpack >= v5.101.0`, and `webpack-dev-server >= v5.0.0`.

W> If you want to run webpack using `npx` please make sure you have `webpack-cli` installed.

## Commands

webpack-cli offers a variety of commands to make working with webpack easier. By default webpack ships with

| Command | Usage | Description |
| --------------------------- | ----------------------------------------- | ------------------------------------------------------------------------------- |
| [`build`](#build) | `build\|bundle\|b [entries...] [options]` | Run webpack (default command, can be omitted). |
| [`configtest`](#configtest) | `configtest\|t [config-path]` | Validate a webpack configuration. |
| [`help`](#help) | `help\|h [command] [option]` | Display help for commands and options. |
| [`info`](#info) | `info\|i [options]` | Outputs information about your system. |
| [`serve`](#serve) | `serve\|server\|s [options]` | Run the `webpack-dev-server`. |
| [`version`](#version) | `version\|v [commands...]` | Output the version number of `webpack`, `webpack-cli` and `webpack-dev-server`. |
| [`watch`](#watch) | `watch\|w [entries...] [options]` | Run webpack and watch for files changes. |
| Command | Usage | Description |
| --------------------------- | ----------------------------------------- | -------------------------------------------------------------------------------------------------- |
| [`build`](#build) | `build\|bundle\|b [entries...] [options]` | Run webpack (default command, can be omitted). |
| [`configtest`](#configtest) | `configtest\|t [config-path]` | Validate a webpack configuration. |
| [`help`](#help) | `help\|h [command] [option]` | Display help for commands and options. |
| [`info`](#info) | `info\|i [options]` | Outputs information about your system. |
| [`serve`](#serve) | `serve\|server\|s [options]` | Run the `webpack-dev-server`. |
| [`version`](#version) | `version\|v [commands...]` | Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. |
| [`watch`](#watch) | `watch\|w [entries...] [options]` | Run webpack and watch for files changes. |

### Build

Expand Down Expand Up @@ -444,7 +444,7 @@ npx webpack help --mode

### version

**Show version of installed packages and sub-packages**
**Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages**

To inspect the version of `webpack` and `webpack-cli` you are using, run the command:

Expand All @@ -471,21 +471,6 @@ webpack-cli 4.6.0
webpack-dev-server 3.11.2
```

To inspect the version of any `webpack-cli` sub-package (like `@webpack-cli/info`), run command similar to the following:

```bash
npx webpack info --version
```

This will output the following result:

```bash
@webpack-cli/info 1.2.3
webpack 5.31.2
webpack-cli 4.6.0
webpack-dev-server 3.11.2
```

### config

**Build source using a configuration file**
Expand Down Expand Up @@ -622,24 +607,14 @@ export default (env, argv) => ({
});
```

### node-env

You can use `--node-env` option to set `process.env.NODE_ENV`, which is available to both user code and webpack configuration:

```bash
npx webpack --node-env production # process.env.NODE_ENV = 'production'
```

W> This option is deprecated in webpack-cli v6 in favor of the `--config-node-env` option.

### config-node-env

<Badge text="webpack-cli v6.0.0+" />

An alias for [`--node-env`](/api/cli/#node-env) to set `process.env.NODE_ENV`:
Set `process.env.NODE_ENV` for your configuration:

```bash
npx webpack --config-node-env production # process.env.NODE_ENV = 'production'
npx webpack --config-node-env production # process.env.NODE_ENV = 'production' in `webpack.config.js`
```

When the `mode` option is not specified in the configuration, you can use the `--config-node-env` option to set the `mode`. For example, using `--config-node-env production` will set both `process.env.NODE_ENV` and `mode` to `'production'`.
Expand Down Expand Up @@ -755,13 +730,13 @@ WEBPACK_PACKAGE=webpack-5 npx webpack

You might encounter this error in the case of using native ESM in TypeScript (i.e. `type: "module"` in `package.json`).

`webpack-cli` supports configuration in both `CommonJS` and `ESM` format, at first it tries to load a configuration using `require()`, once it fails with an error code of `'ERR_REQUIRE_ESM'` (a special code for this case) it would try to load the configuration using `import()`.
`webpack-cli` supports configuration in both `CommonJS` and `ESM` format, at first it tries to load a configuration using `import()`, once it fails it would try to load the configuration using `require()`.
However, the `import()` method won't work with `ts-node` without [loader hooks](https://nodejs.org/api/esm.html#esm_experimental_loaders) enabled (described at [`TypeStrong/ts-node#1007`](https://github.com/TypeStrong/ts-node/issues/1007)).

To fix the error above use the following command:

```bash
NODE_OPTIONS="--loader ts-node/esm" npx webpack --entry ./src/index.js --mode production
NODE_OPTIONS="--import=data:text/javascript,import { register } from 'node:module'; import { pathToFileURL } from 'node:url'; register('ts-node/esm', pathToFileURL('./'));" npx webpack --entry ./src/index.js --mode production
```

For more information, see our documentation on [writing a webpack configuration in `TypeScript`](/configuration/configuration-languages/#typescript).
18 changes: 15 additions & 3 deletions src/content/configuration/configuration-languages.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,17 +56,29 @@ module.exports config;
```json
{
"compilerOptions": {
"module": "esnext",
"moduleResolution": "bundler",

"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true
"resolveJsonModule": true,
"isolatedModules": true,

// Allows you to write `import ... from './file.ts';`
"rewriteRelativeImportExtensions": true
}
}
```

The above sample assumes version >= 2.7 or newer of TypeScript is used with the new `esModuleInterop` and `allowSyntheticDefaultImports` compiler options in your `tsconfig.json` file.

Note that you'll also need to check your `tsconfig.json` file. If the `module` in `compilerOptions` in `tsconfig.json` is `commonjs`, the setting is complete, else webpack will fail with an error. This occurs because `ts-node` does not support any module syntax other than `commonjs`.
We support configuration in both `CommonJS` and `ESM` format.

Starting with v22.18.0 Node.js supports built-in [type stripping](https://nodejs.org/api/typescript.html#type-stripping), so the additional settings described below are only required for older versions.

> To enable the transformation of non erasable TypeScript syntax, which requires JavaScript code generation, such as enum declarations, parameter properties use the flag [--experimental-transform-types](https://nodejs.org/api/cli.html#experimental-transform-types).

There are three solutions to this issue:
If you are using an older version of Node.js that does not support the `typescript` format, or want to set `module` in `compilerOptions` in `tsconfig.json` to `commonjs` there are three solutions to this issue:

- Modify `tsconfig.json`.
- Modify `tsconfig.json` and add settings for `ts-node`.
Expand Down
6 changes: 3 additions & 3 deletions src/content/guides/getting-started.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,10 @@ W> The minimum supported Node.js version to run webpack 5 is 10.13.0 (LTS)

## Quick Start (Minimal Working Example)

If you just want to get a working webpack project up and running quickly, the easiest way is to scaffold one using `create-webpack-app`.
If you just want to get a working webpack project up and running quickly, the easiest way is to scaffold one using `create-new-webpack-app`.

```console
npx create-webpack-app webpack-demo
```bash
npx create-new-webpack-app webpack-demo
cd webpack-demo
```

Expand Down
24 changes: 10 additions & 14 deletions src/content/guides/typescript.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,38 +137,34 @@ T> To make imports do this by default and keep `import _ from 'lodash';` syntax

## Ways to Use TypeScript in `webpack.config.ts`

There are 5 ways to use TypeScript in `webpack.config.ts`:
There are 3 ways to use TypeScript in `webpack.config.ts`:

1. **Using webpack with TypeScript config:**
1. **Using webpack with built-in Node.js type stripping feature (recommended):**

```bash
webpack -c ./webpack.config.ts
```

(Not all things are supported due to limitations of `rechoir` and `interpret`.)
Will attempt to load the configuration using Node.js's built-in [type-stripping](https://nodejs.org/api/typescript.html#type-stripping), and then attempt to load the configuration file using `interpret` and `rechoir` (in this case you need to install `tsx` or `ts-node` or other tools).

2. **Using custom `--import` for Node.js:**
2. **Using custom `--import`/`--require` for Node.js:**

```bash
NODE_OPTIONS='--import tsx' webpack --disable-interpret -c ./webpack.config.ts
NODE_OPTIONS='--import=tsx --no-experimental-strip-types' webpack -c ./webpack.config.ts
```

3. **Using built-in TypeScript module for Node.js v22.7.0 ≥ YOUR NODE.JS VERSION < v23.6.0:**

```bash
NODE_OPTIONS='--experimental-strip-types' webpack --disable-interpret -c ./webpack.config.ts
NODE_OPTIONS='--require=ts-node/register --no-experimental-strip-types' webpack -c ./webpack.config.ts
```

4. **Using built-in TypeScript module for Node.js ≥ v22.6.0:**
> The `--no-experimental-strip-types` flag is required starting with Node.js version 22.7.0.

```bash
webpack --disable-interpret -c ./webpack.config.ts
```
3. **Using built-in Node.js transform types feature for Node.js ≥ v22.7.0:**

5. **Using a tsx for Node.js ≥ v22.6.0:**
To enable the transformation of non erasable TypeScript syntax, which requires JavaScript code generation, such as enum declarations, parameter properties.

```bash
NODE_OPTIONS='--no-experimental-strip-types --import tsx' webpack --disable-interpret -c ./webpack.config.ts
NODE_OPTIONS='--experimental-transform-types' webpack --disable-interpret -c ./webpack.config.ts
```

## TypeScript Path Aliases
Expand Down
2 changes: 1 addition & 1 deletion src/utilities/fetch-governance.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ try {
}

console.log(
"\nGovernance content generated successfully with Capitalized prefix!",
"Governance content generated successfully with Capitalized prefix!",
);
} catch (error) {
console.error("Error fetching governance files:", error.message);
Expand Down
1 change: 0 additions & 1 deletion src/utilities/fetch-supporters.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,6 @@ const getAllNodes = async (graphqlQuery, getNodes) => {
.then(async (response) => {
if (response.headers.get("content-type").includes("json")) {
const json = await response.json();
console.log("json", json);
if (json.error) {
// when rate limit exceeded, api won't return headers data like x-ratelimit-limit, etc.
remaining = 0;
Expand Down
58 changes: 17 additions & 41 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1100,10 +1100,10 @@
resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==

"@discoveryjs/json-ext@^0.6.1":
version "0.6.3"
resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.6.3.tgz#f13c7c205915eb91ae54c557f5e92bddd8be0e83"
integrity sha512-4B4OijXeVNOPZlYA2oEwWOTkzyltLao+xbotHQeqN++Rv27Y6s818+n2Qkp8q+Fxhn0t/5lA5X1Mxktud8eayQ==
"@discoveryjs/json-ext@^1.0.0":
version "1.0.0"
resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-1.0.0.tgz#f75c08f88cfd9eb8d9b062284d5bbcc60c41bf2a"
integrity sha512-dDlz3W405VMFO4w5kIP9DOmELBcvFQGmLoKSdIRstBDubKFYwaNHV1NnlzMCQpXQFGWVALmeMORAuiLx18AvZQ==

"@docsearch/core@4.6.0":
version "4.6.0"
Expand Down Expand Up @@ -3456,21 +3456,6 @@
"@webassemblyjs/ast" "1.14.1"
"@xtuc/long" "4.2.2"

"@webpack-cli/configtest@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@webpack-cli/configtest/-/configtest-3.0.1.tgz#76ac285b9658fa642ce238c276264589aa2b6b57"
integrity sha512-u8d0pJ5YFgneF/GuvEiDA61Tf1VDomHHYMjv/wc9XzYj7nopltpG96nXN5dJRstxZhcNpV1g+nT6CydO7pHbjA==

"@webpack-cli/info@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@webpack-cli/info/-/info-3.0.1.tgz#3cff37fabb7d4ecaab6a8a4757d3826cf5888c63"
integrity sha512-coEmDzc2u/ffMvuW9aCjoRzNSPDl/XLuhPdlFRpT9tZHmJ/039az33CE7uH+8s0uL1j5ZNtfdv0HkfaKRBGJsQ==

"@webpack-cli/serve@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-3.0.1.tgz#bd8b1f824d57e30faa19eb78e4c0951056f72f00"
integrity sha512-sbgw03xQaCLiT6gcY/6u3qBDn01CWw/nbaXl3gTdTFuJJ75Gffv3E3DBpgvY2fkkrdS1fpjaXNOmJlnbtKauKg==

"@xobotyi/scrollbar-width@^1.9.5":
version "1.9.5"
resolved "https://registry.yarnpkg.com/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz#80224a6919272f405b87913ca13b92929bdf3c4d"
Expand Down Expand Up @@ -4644,7 +4629,7 @@ colord@^2.9.1, colord@^2.9.3:
resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.3.tgz#4f8ce919de456f1d5c1c368c307fe20f3e59fb43"
integrity sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==

colorette@^2.0.10, colorette@^2.0.14, colorette@^2.0.16, colorette@^2.0.20:
colorette@^2.0.10, colorette@^2.0.16, colorette@^2.0.20:
version "2.0.20"
resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a"
integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==
Expand Down Expand Up @@ -4696,11 +4681,6 @@ commander@^10.0.1:
resolved "https://registry.yarnpkg.com/commander/-/commander-10.0.1.tgz#881ee46b4f77d1c1dccc5823433aa39b022cbe06"
integrity sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==

commander@^12.1.0:
version "12.1.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-12.1.0.tgz#01423b36f501259fdaac4d0e4d60c96c991585d3"
integrity sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==

commander@^14.0.3, commander@~14.0.3:
version "14.0.3"
resolved "https://registry.yarnpkg.com/commander/-/commander-14.0.3.tgz#425d79b48f9af82fcd9e4fc1ea8af6c5ec07bbc2"
Expand Down Expand Up @@ -5201,10 +5181,10 @@ csstype@^3.1.2:
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==

cypress@^15.9.0:
version "15.11.0"
resolved "https://registry.yarnpkg.com/cypress/-/cypress-15.11.0.tgz#7402d0a2bb4573b6c6655191ad170cff1985ff3f"
integrity sha512-NXDE6/fqZuzh1Zr53nyhCCa4lcANNTYWQNP9fJO+tzD3qVTDaTUni5xXMuigYjMujQ7CRiT9RkJJONmPQSsDFw==
cypress@^15.12.0:
version "15.12.0"
resolved "https://registry.yarnpkg.com/cypress/-/cypress-15.12.0.tgz#84be43a9d85cb390ca404e5b1d030568a06ab4eb"
integrity sha512-B2BRcudLfA4NZZP5QpA45J70bu1heCH59V1yKRLHAtiC49r7RV03X5ifUh7Nfbk8QNg93RAsc6oAmodm/+j0pA==
dependencies:
"@cypress/request" "^3.0.10"
"@cypress/xvfb" "^1.2.4"
Expand Down Expand Up @@ -14493,18 +14473,14 @@ webpack-bundle-analyzer@^5.2.0:
sirv "^3.0.2"
ws "^8.19.0"

webpack-cli@^6.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-6.0.1.tgz#a1ce25da5ba077151afd73adfa12e208e5089207"
integrity sha512-MfwFQ6SfwinsUVi0rNJm7rHZ31GyTcpVE5pgVA3hwFRb7COD4TzjUUwhGWKfO50+xdc2MQPuEBBJoqIMGt3JDw==
dependencies:
"@discoveryjs/json-ext" "^0.6.1"
"@webpack-cli/configtest" "^3.0.1"
"@webpack-cli/info" "^3.0.1"
"@webpack-cli/serve" "^3.0.1"
colorette "^2.0.14"
commander "^12.1.0"
cross-spawn "^7.0.3"
webpack-cli@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-7.0.0.tgz#e74ebdf608cca89557889417f66d3a4fa8817d77"
integrity sha512-NbM62WodkUPXQGR/Ip3pSFsFUKJSseDIFr2H5Z1+4fHwB9X4cO10knPShIopFqAHZa8a5Q8pdtmtE6C12/mlMQ==
dependencies:
"@discoveryjs/json-ext" "^1.0.0"
commander "^14.0.3"
cross-spawn "^7.0.6"
envinfo "^7.14.0"
fastest-levenshtein "^1.0.12"
import-local "^3.0.2"
Expand Down
Loading