Merge pull request #1585 from docschina/sync-ef5ca9a0

docs(en): merge webpack.js.org/master into webpack.js.org/cn @ ef5ca9a

.github/dependabot.yml

@@ -10,3 +10,6 @@ updates:
     allowed_updates:
       - match:
         dependency_name: "textlint"
+    ignore:
+      - dependency-name: "react"
+      - dependency-name: "react-dom"

.github/workflows/testing.yml

@@ -74,14 +74,10 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+      - name: Cypress run
+        uses: cypress-io/github-action@v4
         with:
-          node-version: ${{ matrix.node-version }}
-          cache: yarn
-
-      - run: |
-          yarn
-          yarn cypress install
-          yarn cypress verify
-          yarn cypress:ci
+          config-file: cypress.config.js
+          build: yarn build
+          start: yarn serve-dist
+          command: yarn cypress:run

cypress.config.js

@@ -0,0 +1,13 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  video: false,
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./cypress/plugins/index.js')(on, config);
+    },
+    baseUrl: 'http://localhost:4200',
+  },
+});

package.json

@@ -39,6 +39,7 @@
     "build": "run-s content && webpack --config webpack.prod.mjs --node-env production && run-s printable content && webpack --config webpack.ssg.mjs --node-env production --env ssg",
     "postbuild": "npm run sitemap",
     "build-test": "npm run build && http-server --port 4200 dist/",
+    "serve-dist": "http-server --port 4200 dist/",
     "test": "npm run lint",
     "lint": "run-s lint:*",
     "lint:js": "npm run lint-js .",
@@ -57,7 +58,6 @@
     "jest": "NODE_OPTIONS=--experimental-vm-modules jest --config=jest.config.mjs",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
-    "cypress:ci": "start-server-and-test build-test http://localhost:4200 cypress:run",
     "prettier": "prettier --write '**/*.{js,json,jsx,css,scss,md,mdx}'",
     "prepare": "husky install"
   },
@@ -73,54 +73,54 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.18.2",
+    "@babel/core": "^7.18.5",
     "@babel/eslint-parser": "^7.18.2",
     "@babel/plugin-proposal-class-properties": "^7.17.12",
-    "@babel/preset-env": "^7.18.0",
+    "@babel/preset-env": "^7.18.2",
     "@babel/preset-react": "^7.17.12",
     "@mdx-js/loader": "^2.0.0-next.9",
     "@octokit/auth-action": "^1.3.3",
     "@octokit/rest": "^18.12.0",
-    "@parcel/css": "^1.9.0",
+    "@parcel/css": "^1.10.0",
     "@pmmmwh/react-refresh-webpack-plugin": "next",
     "@svgr/webpack": "^6.2.1",
     "autoprefixer": "^10.4.7",
     "babel-loader": "^8.2.5",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^4.0.0",
-    "cypress": "^9.7.0",
+    "cypress": "^10.1.0",
     "directory-tree": "^3.3.0",
     "directory-tree-webpack-plugin": "^1.0.3",
     "duplexer": "^0.1.1",
-    "eslint": "^8.16.0",
+    "eslint": "^8.17.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-mdx": "^1.17.0",
     "eslint-plugin-react": "^7.30.0",
-    "eslint-plugin-react-hooks": "^4.5.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "front-matter": "^4.0.2",
     "github-slugger": "^1.4.0",
     "html-loader": "^2.1.2",
     "html-webpack-plugin": "^5.5.0",
-    "http-server": "^14.1.0",
+    "http-server": "^14.1.1",
     "husky": "^8.0.1",
     "hyperlink": "^5.0.4",
-    "jest": "^28.1.0",
-    "lint-staged": "^12.4.3",
+    "jest": "^28.1.1",
+    "lint-staged": "^13.0.1",
     "lodash": "^4.17.21",
     "markdownlint": "^0.25.1",
     "markdownlint-cli": "^0.31.1",
     "mdast-util-to-string": "^3.1.0",
     "mini-css-extract-plugin": "^2.6.0",
     "mkdirp": "^1.0.4",
     "modularscale-sass": "^3.0.3",
-    "node-fetch": "^3.2.4",
+    "node-fetch": "^3.2.6",
     "npm-run-all": "^4.1.1",
     "postcss": "^8.4.14",
     "postcss-loader": "^7.0.0",
-    "prettier": "^2.6.2",
-    "react-refresh": "^0.13.0",
+    "prettier": "^2.7.0",
+    "react-refresh": "^0.14.0",
     "redirect-webpack-plugin": "^1.0.0",
     "remark": "^14.0.2",
     "remark-autolink-headings": "7.0.1",
@@ -131,22 +131,21 @@
     "remark-html": "^15.0.1",
     "remark-refractor": "montogeek/remark-refractor",
     "rimraf": "^3.0.2",
-    "sass": "^1.52.1",
+    "sass": "^1.52.3",
     "sass-loader": "^13.0.0",
     "sirv-cli": "^2.0.2",
     "sitemap-static": "^0.4.2",
-    "start-server-and-test": "^1.14.0",
     "static-site-generator-webpack-plugin": "^3.4.1",
     "style-loader": "^3.3.1",
-    "tailwindcss": "^3.0.24",
+    "tailwindcss": "^3.1.3",
     "tap-spot": "^1.1.2",
     "textlint": "^11.8.2",
     "textlint-rule-heading": "^1.0.10",
     "unist-util-visit": "^4.1.0",
-    "webpack": "^5.72.1",
+    "webpack": "^5.73.0",
     "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.9.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.9.2",
     "webpack-merge": "^5.8.0",
     "workbox-webpack-plugin": "^6.5.3"
   },

src/content/api/cli.mdx

@@ -577,6 +577,8 @@ npx webpack --env production    # env.production = true
 | `npx webpack --env foo=bar=app`                                  | `{ foo: "bar=app"}`                            |
 | `npx webpack --env app.platform="staging" --env app.name="test"` | `{ app: { platform: "staging", name: "test" }` |
 
+T> 如果你想将一个变量设置为空字符串（`""`），你可能需要在终端上转义字符，就像这样：`npx webpack --env foo=\"\"`
+
 T> 请查阅 [environment 变量指南](/guides/environment-variables/)了解更多信息及用法。
 
 除了上面所说的自定义 `env` 变量，在你的 webpack 配置中也使用了一些 `env` 内置变量：

src/content/configuration/devtool.mdx

@@ -103,7 +103,7 @@ T> 查看 [`output.sourceMapFilename`](/configuration/output#output-sourcemapfil
 
 以下选项非常适合开发环境：
 
-`eval` - 每个模块都使用 `eval()` 执行，并且都有 `//@ sourceURL`。此选项会非常快地构建。主要缺点是，由于会映射到转换后的代码，而不是映射到原始代码（没有从 loader 中获取 source map），所以不能正确的显示行数。
+`eval` - 每个模块都使用 `eval()` 执行，并且都有 `//# sourceURL`。此选项会非常快地构建。主要缺点是，由于会映射到转换后的代码，而不是映射到原始代码（没有从 loader 中获取 source map），所以不能正确的显示行数。
 
 `eval-source-map` - 每个模块使用 `eval()` 执行，并且 source map 转换为 DataUrl 后添加到 `eval()` 中。初始化 source map 时比较慢，但是会在重新构建时提供比较快的速度，并且生成实际的文件。行数能够正确映射，因为会映射到原始代码中。它会生成用于开发环境的最佳品质的 source map。
 

src/content/configuration/module.mdx

@@ -168,13 +168,70 @@ module.exports = {
 const x = require(/* webpackIgnore: true */ 'x');
 ```
 
-#### module.parser.javascript.exportsPresence $#moduleparserjavascriptexportspresence$
+#### module.parser.javascript.dynamicImportMode
+
+指定动态导入的全局模式。
+
+- 类型：`'eager' | 'weak' | 'lazy' | 'lazy-once'`
+- 可用版本：5.73.0+
+- 示例：
+  ```js
+  module.exports = {
+    module: {
+      parser: {
+        javascript: {
+          dynamicImportMode: 'lazy',
+        },
+      },
+    },
+  };
+  ```
+
+#### module.parser.javascript.dynamicImportPrefetch
+
+指定动态导入的全局 prefetch。
+
+- 类型：` number | boolean`
+- 可用版本：5.73.0+
+- 示例：
+  ```js
+  module.exports = {
+    module: {
+      parser: {
+        javascript: {
+          dynamicImportPrefetch: false,
+        },
+      },
+    },
+  };
+  ```
+
+#### module.parser.javascript.dynamicImportPreload
+
+指定动态导入的全局 preload。
+
+- 类型：` number | boolean`
+- 可用版本：5.73.0+
+- 示例：
+  ```js
+  module.exports = {
+    module: {
+      parser: {
+        javascript: {
+          dynamicImportPreload: false,
+        },
+      },
+    },
+  };
+  ```
+
+#### module.parser.javascript.exportsPresence
 
 指出在 `\"import ... from ...\"` 与 `\"export ... from ...\"` 中无效导出名称的行为。
 
-- Type: `'error' | 'warn' | 'auto' | false`
-- Available: 5.62.0+
-- Example:
+- 类型：`'error' | 'warn' | 'auto' | false`
+- 可用版本：5.62.0+
+- 示例：
   ```js
   module.exports = {
     module: {
@@ -191,9 +248,9 @@ const x = require(/* webpackIgnore: true */ 'x');
 
 指出在 `\"import ... from ...\"` 中无效导出名称的行为。
 
-- Type: `'error' | 'warn' | 'auto' | false`
-- Available: 5.62.0+
-- Example:
+- 类型：`'error' | 'warn' | 'auto' | false`
+- 可用版本：5.62.0+
+- 示例：
   ```js
   module.exports = {
     module: {
@@ -210,9 +267,9 @@ const x = require(/* webpackIgnore: true */ 'x');
 
 Enable or disable evaluating `import.meta`.
 
-- Type: `boolean = true`
-- Available: 5.68.0+
-- Example:
+- 类型：`boolean = true`
+- 可用版本：5.68.0+
+- 示例：
   ```js
   module.exports = {
     module: {
@@ -248,9 +305,9 @@ Enable or disable evaluating `import.meta`.
 
 指出在  `\"export ... from ...\"` 中无效导出名称的行为。当在 TypeScript 重新导出类型，从 `\"export ... from ...\"` 迁移到 `\"export type ... from ...\"` 时禁用该配置项是有用的。
 
-- Type: `'error' | 'warn' | 'auto' | false`
-- Available: 5.62.0+
-- Example:
+- 类型：`'error' | 'warn' | 'auto' | false`
+- 可用版本：5.62.0+
+- 示例：
   ```js
   module.exports = {
     module: {

src/content/plugins/module-federation-plugin.mdx

@@ -34,7 +34,7 @@ module.exports = {
 
 Create a new runtime chunk with the specified name.
 
-**webpack.js.org**
+**webpack.config.js**
 
 ```js
 const { ModuleFederationPlugin } = require('webpack').container;