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

.github/workflows/deploy.yml

@@ -15,10 +15,10 @@ jobs:
         node-version: [16.x]
     runs-on: ${{ matrix.os }}
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
           cache: yarn
@@ -31,7 +31,7 @@ jobs:
       - run: yarn lint:links
 
       - name: Deploy
-        uses: JamesIves/github-pages-deploy-action@4.1.8
+        uses: JamesIves/github-pages-deploy-action@v4.2.5
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           branch: gh-pages

.github/workflows/testing.yml

@@ -12,10 +12,10 @@ jobs:
         node-version: [16.x]
     runs-on: ${{ matrix.os }}
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
           cache: yarn
@@ -31,7 +31,7 @@ jobs:
         os: [ubuntu-latest]
     runs-on: ${{ matrix.os }}
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Vale
         uses: errata-ai/vale-action@v1.4.2
@@ -48,10 +48,10 @@ jobs:
         node-version: [16.x]
     runs-on: ${{ matrix.os }}
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
           cache: yarn
@@ -72,10 +72,10 @@ jobs:
         node-version: [16.x]
     runs-on: ${{ matrix.os }}
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
           cache: yarn

package.json

@@ -73,53 +73,64 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.17.0",
+    "@babel/core": "^7.17.8",
     "@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",
+    "@parcel/css": "^1.7.3",
     "@pmmmwh/react-refresh-webpack-plugin": "next",
     "@svgr/webpack": "^6.2.1",
-    "autoprefixer": "^10.4.2",
-    "babel-loader": "^8.2.3",
+    "autoprefixer": "^10.4.4",
+    "babel-loader": "^8.2.4",
     "copy-webpack-plugin": "^10.2.4",
-    "css-loader": "^6.6.0",
+    "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^3.4.1",
-    "cypress": "^9.4.1",
-    "directory-tree": "^3.1.0",
+    "cypress": "^9.5.3",
+    "directory-tree": "^3.2.2",
     "directory-tree-webpack-plugin": "^1.0.3",
     "duplexer": "^0.1.1",
-    "eslint": "^8.8.0",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint": "^8.12.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-mdx": "^1.16.0",
-    "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-mdx": "^1.17.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.4.0",
     "front-matter": "^4.0.2",
+<<<<<<< HEAD
     "github-slugger": "^1.3.0",
     "html-loader": "^2.1.2",
+=======
+    "github-slugger": "^1.4.0",
+>>>>>>> 12796ee6fa189e23ce9d0b9d9fec3f53bf4a1b33
     "html-webpack-plugin": "^5.5.0",
     "http-server": "^14.1.0",
     "husky": "^7.0.4",
     "hyperlink": "^5.0.4",
-    "jest": "^27.5.0",
-    "lint-staged": "^12.3.3",
+    "jest": "^27.5.1",
+    "lint-staged": "^12.3.7",
     "lodash": "^4.17.21",
     "markdownlint": "^0.25.1",
+<<<<<<< HEAD
     "markdownlint-cli": "^0.31.0",
     "mdast-util-to-string": "^1.1.0",
     "mini-css-extract-plugin": "^2.5.3",
+=======
+    "markdownlint-cli": "^0.31.1",
+    "mdast-util-to-string": "^3.1.0",
+    "mini-css-extract-plugin": "^2.6.0",
+>>>>>>> 12796ee6fa189e23ce9d0b9d9fec3f53bf4a1b33
     "mkdirp": "^1.0.4",
     "modularscale-sass": "^3.0.3",
-    "node-fetch": "^3.2.0",
+    "node-fetch": "^3.2.3",
     "npm-run-all": "^4.1.1",
-    "postcss": "^8.4.6",
+    "postcss": "^8.4.12",
     "postcss-loader": "^6.2.1",
-    "prettier": "^2.5.1",
-    "react-refresh": "^0.11.0",
+    "prettier": "^2.6.1",
+    "react-refresh": "^0.12.0",
     "redirect-webpack-plugin": "^1.0.0",
     "remark": "^14.0.2",
     "remark-autolink-headings": "7.0.1",
@@ -129,42 +140,41 @@
     "remark-gfm": "^1.0.0",
     "remark-html": "^15.0.1",
     "remark-refractor": "montogeek/remark-refractor",
-    "remark-slug": "^7.0.1",
     "rimraf": "^3.0.2",
-    "sass": "^1.49.7",
-    "sass-loader": "^12.4.0",
+    "sass": "^1.49.10",
+    "sass-loader": "^12.6.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.18",
+    "tailwindcss": "^3.0.23",
     "tap-spot": "^1.1.1",
     "textlint": "^11.8.2",
     "textlint-rule-heading": "^1.0.10",
     "unist-util-visit": "^4.1.0",
-    "webpack": "^5.68.0",
+    "webpack": "^5.71.0",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.7.4",
     "webpack-merge": "^5.8.0",
-    "workbox-webpack-plugin": "^6.4.2"
+    "workbox-webpack-plugin": "^6.5.2"
   },
   "dependencies": {
     "@docsearch/react": "^3.0.0-alpha.50",
     "path-browserify": "^1.0.1",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-helmet-async": "^1.2.2",
-    "react-router-dom": "^6.2.1",
-    "react-spring": "^9.4.2",
+    "react-helmet-async": "^1.2.3",
+    "react-router-dom": "^6.3.0",
+    "react-spring": "^9.4.4",
     "react-tiny-popover": "5",
     "react-use": "^17.3.2",
     "react-visibility-sensor": "^5.0.2",
     "webpack-pwa-manifest": "^4.3.0",
     "webpack.vote": "https://github.com/webpack/voting-app.git",
-    "workbox-window": "^6.4.2"
+    "workbox-window": "^6.5.2"
   },
   "resolutions": {
     "sitemap-static/minimist": "1.2.5",

src/components/Markdown/Markdown.scss

@@ -1,4 +1,4 @@
-@use "sass:color";
+@use 'sass:color';
 @import 'vars';
 @import 'functions';
 @import 'prism-theme';
@@ -41,15 +41,16 @@ $topHeightMobileWithBanner: $bannerHeight + $topHeightMobile;
   h4,
   h5,
   h6 {
-    &:before {
-      content: '';
+    > span[id] {
+      position: absolute;
+      width: 0;
       display: block;
       visibility: hidden;
       pointer-events: none;
-      height: $topHeightMobile;
+      padding-top: $topHeightMobile;
       margin-top: -#{$topHeightMobile};
       @include break {
-        height: $topHeightDesktop;
+        padding-top: $topHeightDesktop;
         margin-top: -#{$topHeightDesktop};
       }
     }

src/components/Page/Page.jsx

@@ -97,6 +97,15 @@ export default function Page(props) {
       <Markdown>
         <h1>{title}</h1>
 
+        {rest.thirdParty ? (
+          <div className="italic my-[20px]">
+            <strong className="font-bold">Disclaimer:</strong> {title} is a
+            third-party package maintained by community members, it potentially
+            does not have the same support, security policy or license as
+            webpack, and it is not maintained by webpack.
+          </div>
+        ) : null}
+
         {contentRender}
 
         {loadRelated && (

src/components/Site/Site.jsx

@@ -268,10 +268,16 @@ function Site(props) {
                   )
                 ),
               },
+<<<<<<< HEAD
               { content: '参与贡献', url: '/contribute/' },
               { content: '投票', url: 'https://v4.webpack.docschina.org/vote/' },
               { content: '博客', url: '/blog/' },
               { content: '印记中文', url: 'https://docschina.org' },
+=======
+              { content: 'Contribute', url: '/contribute/' },
+              { content: 'Vote', url: '/vote/' },
+              { content: 'Blog', url: '/blog/' },
+>>>>>>> 12796ee6fa189e23ce9d0b9d9fec3f53bf4a1b33
             ]}
           />
         </div>

src/components/Support/Support.jsx

@@ -85,7 +85,7 @@ function formatMoney(number) {
   let str = Math.round(number) + '';
 
   if (str.length > 3) {
-    str = str.substr(0, str.length - 3) + ',' + str.substr(-3);
+    str = str.slice(0, -3) + ',' + str.slice(-3);
   }
   return str;
 }

src/content/api/cli.mdx

@@ -101,7 +101,11 @@ npx webpack init ./my-app --force --template=default
 
 `boolean`
 
+<<<<<<< HEAD
 生成项目时不启用选项模式。当为 `true` 时，所有命令行选项使用默认值。
+=======
+To generate a project without questions. When enabled, the default answer for each question will be used.
+>>>>>>> 12796ee6fa189e23ce9d0b9d9fec3f53bf4a1b33
 
 T> 点击 [这里](https://github.com/webpack/webpack-cli/blob/master/packages/generators/INIT.md) 获取 `webpack init` 命令的完整文档。
 
@@ -581,11 +585,19 @@ T> 请查阅 [environment 变量指南](/guides/environment-variables/)了解更
 
 除了上面所说的自定义 `env` 变量，在你的 webpack 配置中也使用了一些 `env` 内置变量：
 
+<<<<<<< HEAD
 | 变量名          | 描述                                          |
 | --------------- | --------------------------------------------- |
 | `WEBPACK_SERVE` | 如果使用了 `serve\|s`，则为 `true`。          |
 | `WEBPACK_BUILD` | 如果使用了 `build\|bundle\|b`，则为 `true`。  |
 | `WEBPACK_WATCH` | 如果使用了 `--watch\|watch\|w`，则为 `true`。 |
+=======
+| Environment Variable | Description                                  |
+| -------------------- | -------------------------------------------- |
+| `WEBPACK_SERVE`      | `true` if `serve\|server\|s` is being used.  |
+| `WEBPACK_BUILD`      | `true` if `build\|bundle\|b` is being used.  |
+| `WEBPACK_WATCH`      | `true` if `--watch\|watch\|w` is being used. |
+>>>>>>> 12796ee6fa189e23ce9d0b9d9fec3f53bf4a1b33
 
 请注意你不能在 bundle 代码中使用这些内置环境变量。
 

src/content/api/compilation-object.mdx

@@ -229,11 +229,15 @@ Compilation 对象有很多可用的方法和钩子。在此页面，我们将
 - `block` - `Chunk` 的块连接。
 - `chunk` - 从依赖中删除的块。
 
+<<<<<<< HEAD
 ### sortItemsWithModuleIds $#sortitemswithmoduleids$
 
 `function`
 
 ### sortItemsWithChunkIds $#sortitemswithchunkids$
+=======
+### sortItemsWithChunkIds
+>>>>>>> 12796ee6fa189e23ce9d0b9d9fec3f53bf4a1b33
 
 `function`
 

src/content/api/module-variables.mdx

@@ -109,7 +109,45 @@ console.log(import.meta.webpack); // output `5` for webpack 5
 
 webpack 特定。[`module.hot`](#modulehot-webpack-specific) 的一个别名，[strict ESM](/guides/ecma-script-modules/#flagging-modules-as-esm) 中可以使用 `import.meta.webpackHot` 但是不能使用 `module.hot`。
 
+<<<<<<< HEAD
 ## \_\_filename (NodeJS) $#__filename-nodejs$
+=======
+## import.meta.webpackContext
+
+Returns the same value as `require.context` but only for `javascript/auto` and `javascript/esm`.
+
+- Type:
+
+  ```ts
+  (
+    request: string,
+    options?: {
+      recursive?: boolean;
+      regExp?: RegExp;
+      include?: RegExp;
+      exclude?: RegExp;
+      preload?: boolean | number;
+      prefetch?: boolean | number;
+      chunkName?: string;
+      exports?: string | string[][];
+      mode?: 'sync' | 'eager' | 'weak' | 'lazy' | 'lazy-once';
+    }
+  ) => webpack.Context;
+  ```
+
+- Available: 5.70.0+
+- Example:
+  ```js
+  const contextRequire = import.meta.webpackContext('.', {
+    recursive: false,
+    regExp: /two/,
+    mode: 'weak',
+    exclude: /three/,
+  });
+  ```
+
+## \_\_filename (NodeJS)
+>>>>>>> 12796ee6fa189e23ce9d0b9d9fec3f53bf4a1b33
 
 取决于 `node.__filename` 配置选项：
 

src/content/configuration/dev-server.mdx

@@ -1277,7 +1277,11 @@ npx webpack serve --port auto
 
 当拥有单独的 API 后端开发服务器并且希望在同一域上发送 API 请求时，代理某些 URL 可能会很有用。
 
+<<<<<<< HEAD
 开发服务器使用功能强大的 [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware) 软件包。 查看其 [documentation](https://github.com/chimurai/http-proxy-middleware#options) 了解更多高级用法。 请注意，`http-proxy-middleware` 的某些功能不需要`target`键，例如 它的 `router` 功能，但是仍然需要在此处的配置中包含`target`，否则`webpack-dev-server` 不会将其传递给 `http-proxy-middleware`）。
+=======
+The dev-server makes use of the powerful [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware) package. Check out its [documentation](https://github.com/chimurai/http-proxy-middleware#options) for more advanced usages. Note that some of `http-proxy-middleware`'s features do not require a `target` key, e.g. its `router` feature, but you will still need to include a `target` key in your configuration here, otherwise `webpack-dev-server` won't pass it along to `http-proxy-middleware`.
+>>>>>>> 12796ee6fa189e23ce9d0b9d9fec3f53bf4a1b33
 
 使用后端在 `localhost:3000` 上，可以使用它来启用代理：
 

src/content/configuration/experiments.mdx

@@ -167,7 +167,19 @@ Define the location to store the lockfile.
 
 By default webpack would generate a `<compiler-name.>webpack.lock` file>. Make sure to commit it into a version control system. During the `production` build, webpack will build those modules beginning with `http(s):` protocol from the lockfile and caches under [`experiments.buildHttp.cacheLocation`](#experimentsbuildhttpcachelocation).
 
+<<<<<<< HEAD
 #### experiments.buildHttp.upgrade $#experimentsbuildhttpupgrade$
+=======
+#### experiments.buildHttp.proxy
+
+Specify the proxy server to use for fetching remote resources.
+
+- Type: `string`
+
+By default, Webpack would imply the proxy server to use for fetching remote resources from the `http_proxy` (case insensitive) environment variable. However, you can also specify one through the `proxy` option.
+
+#### experiments.buildHttp.upgrade
+>>>>>>> 12796ee6fa189e23ce9d0b9d9fec3f53bf4a1b33
 
 Detect changes to remote resources and upgrade them automatically.