Merge pull request #1455 from docschina/sync-0462e9b4

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

Author: jacob-lcs

package.json

@@ -73,26 +73,26 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.16.12",
-    "@babel/eslint-parser": "^7.16.5",
+    "@babel/core": "^7.17.0",
+    "@babel/eslint-parser": "^7.17.0",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@mdx-js/loader": "^2.0.0-next.9",
     "@octokit/auth-action": "^1.3.3",
     "@octokit/rest": "^18.12.0",
     "@pmmmwh/react-refresh-webpack-plugin": "next",
-    "@svgr/webpack": "^6.2.0",
+    "@svgr/webpack": "^6.2.1",
     "autoprefixer": "^10.4.2",
     "babel-loader": "^8.2.3",
-    "copy-webpack-plugin": "^10.2.1",
-    "css-loader": "^6.5.1",
+    "copy-webpack-plugin": "^10.2.4",
+    "css-loader": "^6.6.0",
     "css-minimizer-webpack-plugin": "^3.4.1",
-    "cypress": "^9.3.1",
-    "directory-tree": "^3.0.1",
+    "cypress": "^9.4.1",
+    "directory-tree": "^3.1.0",
     "directory-tree-webpack-plugin": "^1.0.3",
     "duplexer": "^0.1.1",
-    "eslint": "^8.7.0",
+    "eslint": "^8.8.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-mdx": "^1.16.0",
@@ -106,7 +106,7 @@
     "husky": "^7.0.4",
     "hyperlink": "^5.0.4",
     "jest": "^27.4.7",
-    "lint-staged": "^12.3.2",
+    "lint-staged": "^12.3.3",
     "lodash": "^4.17.21",
     "markdownlint": "^0.25.1",
     "markdownlint-cli": "^0.30.0",
@@ -116,7 +116,7 @@
     "modularscale-sass": "^3.0.3",
     "node-fetch": "^3.2.0",
     "npm-run-all": "^4.1.1",
-    "postcss": "^8.4.5",
+    "postcss": "^8.4.6",
     "postcss-loader": "^6.2.1",
     "prettier": "^2.5.1",
     "react-refresh": "^0.11.0",
@@ -131,27 +131,27 @@
     "remark-refractor": "montogeek/remark-refractor",
     "remark-slug": "^7.0.1",
     "rimraf": "^3.0.2",
-    "sass": "^1.49.0",
+    "sass": "^1.49.7",
     "sass-loader": "^12.4.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.17",
+    "tailwindcss": "^3.0.18",
     "tap-spot": "^1.1.1",
     "textlint": "^11.8.2",
     "textlint-rule-heading": "^1.0.10",
     "unist-util-visit": "^4.1.0",
-    "webpack": "^5.67.0",
+    "webpack": "^5.68.0",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.7.3",
+    "webpack-dev-server": "^4.7.4",
     "webpack-merge": "^5.8.0",
     "workbox-webpack-plugin": "^6.4.2"
   },
   "dependencies": {
-    "@docsearch/react": "^3.0.0-alpha.42",
+    "@docsearch/react": "^3.0.0-alpha.50",
     "path-browserify": "^1.0.1",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",

src/content/api/module-variables.mdx

@@ -13,6 +13,7 @@ contributors:
   - anikethsaha
   - chenxsan
   - jamesgeorge007
+  - snitin315
 related:
   - title: CommonJS
     url: https://en.wikipedia.org/wiki/CommonJS
@@ -84,7 +85,7 @@ exports.aFunction = function doSomething() {
 
 如果在一个被 Parser 解析的表达式内部使用，则配置选项会被当作 `true` 处理。
 
-## import.meta.url $#import-meta-url$
+## import.meta.url
 
 返回模块以 `file:` 开头绝对路径的 URL。
 
@@ -94,7 +95,7 @@ exports.aFunction = function doSomething() {
 console.log(import.meta.url); // 输出结果类似于 `file:///path/to/your/project/src/index.js`
 ```
 
-## import.meta.webpack $#import-meta-webpack$
+## import.meta.webpack
 
 返回 webpack 的版本
 
@@ -104,7 +105,7 @@ console.log(import.meta.url); // 输出结果类似于 `file:///path/to/your/pro
 console.log(import.meta.webpack); // output `5` for webpack 5
 ```
 
-## import.meta.webpackHot $#importmetawebpackhot$
+## import.meta.webpackHot
 
 webpack 特定。[`module.hot`](#modulehot-webpack-specific) 的一个别名，[strict ESM](/guides/ecma-script-modules/#flagging-modules-as-esm) 中可以使用 `import.meta.webpackHot` 但是不能使用 `module.hot`。
 
@@ -132,15 +133,15 @@ require('file.js?test');
 __resourceQuery === '?test';
 ```
 
-## \_\_webpack_public_path\_\_ (webpack-specific) $#__webpack_public_path__-webpack-specific$
+## \_\_webpack_public_path\_\_ (webpack-specific)
 
 等同于 `output.publicPath` 配置选项。
 
-## \_\_webpack_require\_\_ (webpack-specific) $#__webpack_require__-webpack-specific$
+## \_\_webpack_require\_\_ (webpack-specific)
 
 原始 require 函数。这个表达式不会被解析器解析为依赖。
 
-## `__webpack_chunk_load__` (webpack 特有变量) $#__webpack_chunk_load__-webpack-specific$
+## `__webpack_chunk_load__` (webpack-specific)
 
 内部 chunk 载入函数，有一个输入参数：
 
@@ -168,15 +169,27 @@ import('./module-a').then((moduleA) => {
 });
 ```
 
-## \_\_webpack_modules\_\_ (webpack-specific) $#__webpack_modules__-webpack-specific$
+## \_\_webpack_module\_\_ (webpack-specific)
+
+<Badge text="5.68.0+" />
+
+它提供对当前 `module` 的访问。`module` 在 ESM 严格模式下不可用。
+
+## \_\_webpack_module\_\_.id (webpack-specific)
+
+<Badge text="5.68.0+" />
+
+它提供对当前 `module`(`module.id`) ID 的访问。`module` 在 ESM 严格模式下不可用。
+
+## \_\_webpack_modules\_\_ (webpack-specific)
 
 访问所有模块的内部对象。
 
-## \_\_webpack_hash\_\_ (webpack-specific) $#__webpack_hash__-webpack-specific$
+## \_\_webpack_hash\_\_ (webpack-specific)
 
 这个变量提供对编译过程中(compilation)的 hash 信息的访问。
 
-## \_\_webpack_get_script_filename\_\_ (webpack-specific) $#__webpack_get_script_filename__-webpack-specific$
+## \_\_webpack_get_script_filename\_\_ (webpack-specific)
 
 `function (chunkId)`
 
@@ -193,11 +206,11 @@ __webpack_get_script_filename__ = (chunkId) => {
 };
 ```
 
-## \_\_non_webpack_require\_\_ (webpack-specific) $#__non_webpack_require__-webpack-specific$
+## \_\_non_webpack_require\_\_ (webpack-specific)
 
 生成一个不会被 webpack 解析的 `require` 函数。配合全局可以获取到的 require 函数，可以完成一些酷炫操作。
 
-## \_\_webpack_exports_info\_\_ (webpack-specific) $#__webpack_exports_info__-webpack-specific$
+## \_\_webpack_exports_info\_\_ (webpack-specific)
 
 在模块中, `__webpack_exports_info__` 可以被获取到，以便导出模块用以自我检查：
 
@@ -221,7 +234,7 @@ __webpack_get_script_filename__ = (chunkId) => {
 
 - 可以从嵌套的 exports 中得到相关信息: 例如 `__webpack_exports_info__.<exportName>.<exportName>.<exportName>.used`
 
-## \_\_webpack_is_included\_\_ (webpack-specific) $#webpack-is-included$
+## \_\_webpack_is_included\_\_ (webpack-specific)
 
 <Badge text="5.16.0+" />
 
@@ -233,7 +246,7 @@ if (__webpack_is_included__('./module-a.js')) {
 }
 ```
 
-## \_\_webpack_base_uri\_\_ (webpack-specific) $#webpack-base-uri$
+## \_\_webpack_base_uri\_\_ (webpack-specific)
 
 运行时修改 base 的 URI。
 
@@ -244,7 +257,7 @@ if (__webpack_is_included__('./module-a.js')) {
   __webpack_base_uri__ = 'https://example.com';
   ```
 
-## \_\_webpack_runtime_id\_\_ $#webpackruntimeid$
+## \_\_webpack_runtime_id\_\_
 
 访问当前入口的 [runtime](/blog/2020-10-10-webpack-5-release/#entry-point-runtime) id。
 
@@ -256,6 +269,6 @@ if (__webpack_is_included__('./module-a.js')) {
 console.log(__webpack_runtime_id__ === 'main');
 ```
 
-## DEBUG (webpack-specific) $#debug--webpack-specific$
+## DEBUG (webpack-specific)
 
 等同于 `debug` 配置选项。

src/content/concepts/index.mdx

@@ -139,7 +139,7 @@ T> 查看 [插件接口(plugin interface)](/api/plugins)，学习如何使用它
 **webpack.config.js**
 
 ```javascript
-const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 const webpack = require('webpack'); // 用于访问内置插件
 
 module.exports = {

src/content/concepts/loaders.mdx

@@ -53,7 +53,9 @@ module.exports = {
 - [配置方式](#configuration)（推荐）：在 **webpack.config.js** 文件中指定 loader。
 - [内联方式](#inline)：在每个 `import` 语句中显式指定 loader。
 
-### 配置方式 $#configuration$
+注意在 webpack v4 版本可以通过 CLI 使用 loader，但是在 webpack v5 中被弃用。
+
+### Configuration $#configuration$
 
 [`module.rules`](/configuration/module/#modulerules) 允许你在 webpack 配置中指定多个 loader。
 这种方式是展示 loader 的一种简明方式，并且有助于使代码变得简洁和易于维护。同时让你对各个 loader 有个全局概览：

src/content/concepts/plugins.mdx

@@ -55,7 +55,7 @@ compiler hook 的 tap 方法的第一个参数，应该是驼峰式命名的插
 **webpack.config.js**
 
 ```javascript
-const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 const webpack = require('webpack'); // 访问内置的插件
 const path = require('path');
 

src/content/configuration/dev-server.mdx

@@ -1120,7 +1120,7 @@ module.exports = {
 
 ## devServer.open $#devserveropen$
 
-`boolean` `string` `[string]` `object` `[object]`
+`boolean` `string` `object` `[string, object]`
 
 告诉 dev-server 在服务器已经启动后打开浏览器。设置其为 `true` 以打开你的默认浏览器。
 
@@ -1615,7 +1615,7 @@ module.exports = {
 
 ## devServer.static $#devserverstatic$
 
-`boolean` `string` `[string]` `object` `[object]`
+`boolean` `string` `object` `[string, object]`
 
 该配置项允许配置从目录提供静态文件的选项（默认是 'public' 文件夹）。将其设置为 `false` 以禁用：
 
@@ -1885,7 +1885,7 @@ module.exports = {
 
 ## devServer.watchFiles $#devserverwatchfiles$
 
-`string` `[string]` `object` `[object]`
+`string` `object` `[string, object]`
 
 该配置项允许你配置 globs/directories/files 来监听文件变化。例如：
 

src/content/configuration/externals.mdx

@@ -26,7 +26,7 @@ translators:
 
 ## externals $#externals$
 
-`string` `[string]` `object` `function` `RegExp`
+`string` `object` `function` `RegExp` `[string, object, function, RegExp]`
 
 **防止**将某些 `import` 的包(package)**打包**到 bundle 中，而是在运行时(runtime)再去从外部获取这些*扩展依赖(external dependencies)*。
 

src/content/configuration/output.mdx

@@ -681,7 +681,7 @@ module.exports = {
 
 `string = 'hex'`
 
-在生成 hash 时使用的编码方式。支持 Node.js [`hash.digest`](https://nodejs.org/api/crypto.html#crypto_hash_digest_encoding) 的所有编码。对文件名使用 `'base64'`，可能会出现问题，因为 base64 字母表中具有 `/` 这个字符(character)。同样的，`'latin1'` 规定可以含有任何字符(character)。
+在生成 hash 时使用的编码方式。支持 Node.js [`hash.digest`](https://nodejs.org/api/buffer.html#buffers-and-character-encodings) 的所有编码。对文件名使用 `'base64'`，可能会出现问题，因为 base64 字母表中具有 `/` 这个字符(character)。同样的，`'latin1'` 规定可以含有任何字符(character)。
 
 ## output.hashDigestLength $#outputhashdigestlength$
 
@@ -970,7 +970,9 @@ MyLibrary = _entry_return_;
 
 请注意，如果 `MyLibrary` 没有在你的库之前定义，那么它将会被设置在全局作用域。
 
-##### type: 'assign-properties' <Badge text='5.16.0+' /> $#typeassignproperties$
+##### type: 'assign-properties' $#typeassignproperties$
+
+<Badge text="5.16.0+" />
 
 ```js
 module.exports = {
@@ -1151,7 +1153,7 @@ T> 在考虑 CommonJS 与 CommonJS2 之间的区别？虽然它们很相似，
 
 ##### type: 'commonjs-static' $#type-commonjsstatic$
 
-<Badge text='5.66.0+' />
+<Badge text="5.66.0+" />
 
 ```js
 module.exports = {
@@ -1620,7 +1622,9 @@ MyLibrary = _entry_return_;
 
 注意，如果 `MyLibrary` 在作用域中未在前面代码进行定义，则你的 library 将被设置在全局作用域内。
 
-#### libraryTarget: 'assign-properties' <Badge text='5.16.0+' /> $#libraryTarget-assign-properties$
+#### libraryTarget: 'assign-properties' $#libraryTarget-assign-properties$
+
+<Badge text="5.16.0+" />
 
 W> 最好使用 [output.library.type: 'assign-properties'`](#type-assign-properties)。