From b58ca06c26b9156ebe0dd6edbb76f1495ff527f0 Mon Sep 17 00:00:00 2001 From: alexander-akait Date: Fri, 13 Mar 2026 22:08:18 +0300 Subject: [PATCH 1/2] docs: update webpack-cli --- package.json | 4 +- src/content/api/cli.mdx | 55 +++++------------- .../configuration/configuration-languages.mdx | 18 +++++- src/content/guides/getting-started.mdx | 6 +- src/content/guides/typescript.mdx | 24 ++++---- src/utilities/fetch-governance.mjs | 2 +- src/utilities/fetch-supporters.mjs | 1 - yarn.lock | 58 ++++++------------- 8 files changed, 63 insertions(+), 105 deletions(-) diff --git a/package.json b/package.json index 204df6a9c4f3..b94288844104 100644 --- a/package.json +++ b/package.json @@ -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", @@ -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", diff --git a/src/content/api/cli.mdx b/src/content/api/cli.mdx index 5aa267879e89..64807f0beda6 100644 --- a/src/content/api/cli.mdx +++ b/src/content/api/cli.mdx @@ -34,7 +34,7 @@ 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. @@ -42,15 +42,15 @@ W> If you want to run webpack using `npx` please make sure you have `webpack-cli 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 @@ -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: @@ -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** @@ -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 -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'`. @@ -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). diff --git a/src/content/configuration/configuration-languages.mdx b/src/content/configuration/configuration-languages.mdx index 0b4af3d8f97d..84cd82dff424 100644 --- a/src/content/configuration/configuration-languages.mdx +++ b/src/content/configuration/configuration-languages.mdx @@ -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`. diff --git a/src/content/guides/getting-started.mdx b/src/content/guides/getting-started.mdx index f6fb74c3c6c1..bc65267abad8 100644 --- a/src/content/guides/getting-started.mdx +++ b/src/content/guides/getting-started.mdx @@ -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 ``` diff --git a/src/content/guides/typescript.mdx b/src/content/guides/typescript.mdx index 960962200b45..33da54512d00 100644 --- a/src/content/guides/typescript.mdx +++ b/src/content/guides/typescript.mdx @@ -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 diff --git a/src/utilities/fetch-governance.mjs b/src/utilities/fetch-governance.mjs index 420ef47af557..52445994eab8 100644 --- a/src/utilities/fetch-governance.mjs +++ b/src/utilities/fetch-governance.mjs @@ -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); diff --git a/src/utilities/fetch-supporters.mjs b/src/utilities/fetch-supporters.mjs index 08c383a05acc..f7fc34966c32 100644 --- a/src/utilities/fetch-supporters.mjs +++ b/src/utilities/fetch-supporters.mjs @@ -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; diff --git a/yarn.lock b/yarn.lock index 423e874606a7..ddb1926c4cc5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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" @@ -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" @@ -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== @@ -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" @@ -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" @@ -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" From 2f4ea039cf74f755f97aaa2d2f38434334e3239a Mon Sep 17 00:00:00 2001 From: alexander-akait Date: Fri, 13 Mar 2026 22:32:19 +0300 Subject: [PATCH 2/2] docs: update webpack-cli --- src/content/guides/typescript.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/guides/typescript.mdx b/src/content/guides/typescript.mdx index 33da54512d00..b7c10530f34c 100644 --- a/src/content/guides/typescript.mdx +++ b/src/content/guides/typescript.mdx @@ -161,7 +161,7 @@ There are 3 ways to use TypeScript in `webpack.config.ts`: 3. **Using built-in Node.js transform types feature for Node.js ≥ v22.7.0:** - To enable the transformation of non erasable TypeScript syntax, which requires JavaScript code generation, such as enum declarations, parameter properties. + To enable the transformation of non erasable TypeScript syntax, which requires JavaScript code generation, such as enum declarations, parameter properties. ```bash NODE_OPTIONS='--experimental-transform-types' webpack --disable-interpret -c ./webpack.config.ts