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

package.json

@@ -73,50 +73,60 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.17.0",
+    "@babel/core": "^7.17.5",
     "@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.5.0",
     "@pmmmwh/react-refresh-webpack-plugin": "next",
     "@svgr/webpack": "^6.2.1",
     "autoprefixer": "^10.4.2",
     "babel-loader": "^8.2.3",
     "copy-webpack-plugin": "^10.2.4",
     "css-loader": "^6.6.0",
     "css-minimizer-webpack-plugin": "^3.4.1",
-    "cypress": "^9.4.1",
-    "directory-tree": "^3.1.0",
+    "cypress": "^9.5.1",
+    "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.10.0",
+    "eslint-config-prettier": "^8.4.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-mdx": "^1.16.0",
-    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react": "^7.29.2",
     "eslint-plugin-react-hooks": "^4.3.0",
     "front-matter": "^4.0.2",
+<<<<<<< HEAD
     "github-slugger": "^1.3.0",
     "html-loader": "^2.1.2",
+=======
+    "github-slugger": "^1.4.0",
+>>>>>>> 4250c01b4664dcd5a3a84b35b5e7a67f7280427b
     "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.4",
     "lodash": "^4.17.21",
     "markdownlint": "^0.25.1",
+<<<<<<< HEAD
     "markdownlint-cli": "^0.31.0",
     "mdast-util-to-string": "^1.1.0",
+=======
+    "markdownlint-cli": "^0.31.1",
+    "mdast-util-to-string": "^3.1.0",
+>>>>>>> 4250c01b4664dcd5a3a84b35b5e7a67f7280427b
     "mini-css-extract-plugin": "^2.5.3",
     "mkdirp": "^1.0.4",
     "modularscale-sass": "^3.0.3",
-    "node-fetch": "^3.2.0",
+    "node-fetch": "^3.2.1",
     "npm-run-all": "^4.1.1",
-    "postcss": "^8.4.6",
+    "postcss": "^8.4.7",
     "postcss-loader": "^6.2.1",
     "prettier": "^2.5.1",
     "react-refresh": "^0.11.0",
@@ -129,42 +139,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.9",
+    "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.69.1",
     "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.0"
   },
   "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.2.2",
+    "react-spring": "^9.4.3",
     "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.0"
   },
   "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/content/api/cli.mdx

@@ -581,11 +581,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. |
+>>>>>>> 4250c01b4664dcd5a3a84b35b5e7a67f7280427b
 
 请注意你不能在 bundle 代码中使用这些内置环境变量。
 

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
+>>>>>>> 4250c01b4664dcd5a3a84b35b5e7a67f7280427b
 
 Detect changes to remote resources and upgrade them automatically.
 

src/content/configuration/output.mdx

@@ -42,7 +42,13 @@ translators:
 
 与 [`output.filename`](#outputfilename) 相同，不过应用于 [Asset Modules](/guides/asset-modules/)。
 
+<<<<<<< HEAD
 ## output.asyncChunks $#outputasyncchunks$
+=======
+`[name]`, `[file]`, `[query]`, `[fragment]`, `[base]`, and `[path]` are set to an empty string for the assets built from data URI replacements.
+
+## output.asyncChunks
+>>>>>>> 4250c01b4664dcd5a3a84b35b5e7a67f7280427b
 
 `boolean = true`
 

src/content/configuration/watch.mdx

@@ -56,7 +56,7 @@ module.exports = {
 
 ### watchOptions.aggregateTimeout $#watchoptionsaggregatetimeout$
 
-`number = 200`
+`number = 20`
 
 当第一个文件更改，会在重新构建前增加延迟。这个选项允许 webpack 将这段时间内进行的任何其他更改都聚合到一次重新构建里。以毫秒为单位：
 

src/content/guides/code-splitting.mdx

@@ -34,10 +34,14 @@ contributors:
   - Adarah
   - atesgoral
   - snitin315
+<<<<<<< HEAD
 translators:
   - QC-L
   - jacob-lcs
   - dear-lizhihua
+=======
+  - artem-malko
+>>>>>>> 4250c01b4664dcd5a3a84b35b5e7a67f7280427b
 related:
   - title: webpack 中的 <link rel="prefetch/preload" />
     url: https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c
@@ -429,7 +433,35 @@ import(/* webpackPreload: true */ 'ChartingLibrary');
 
 T> 不正确地使用 `webpackPreload` 会有损性能，请谨慎使用。
 
+<<<<<<< HEAD
 ## bundle 分析(bundle analysis) $#bundle-analysis$
+=======
+Sometimes you need to have your own control over preload. For example, preload of any dynamic import can be done via async script. This can be useful in case of streamming server side rendering.
+
+```js
+const lazyComp = () =>
+  import('DynamicComponent').catch((error) => {
+    // Do something with the error.
+    // For example, we can retry the request in case of any net error
+  });
+```
+
+If the script loading will fail before webpack starts loading of that script by itself (webpack just creates a script tag to load its code, if that script is not on a page), that catch handler won't start till [chunkLoadTimeout](/configuration/output/#outputchunkloadtimeout) is not passed. This behavior can be unexpected. But it's explainable — webpack can not throw any error, cause webpack doesn't know, that script failed. Webpack will add onerror handler to the script right after the error has happen.
+
+To prevent such problem you can add your own onerror handler, which removes the script in case of any error:
+
+```html
+<script
+  src="https://example.com/dist/dynamicComponent.js"
+  async
+  onerror="this.remove()"
+></script>
+```
+
+In that case, errored script will be removed. Webpack will create its own script and any error will be processed without any timeouts.
+
+## Bundle Analysis
+>>>>>>> 4250c01b4664dcd5a3a84b35b5e7a67f7280427b
 
 一旦开始分离代码，一件很有帮助的事情是，分析输出结果来检查模块在何处结束。 [官方分析工具](https://github.com/webpack/analyse) 是一个不错的开始。还有一些其他社区支持的可选项：
 

src/remark-plugins/remark-remove-heading-id/__snapshots__/index.test.mjs.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`customize blockquote should add id 1`] = `
+"<h2><span id=\\"user-content-hello-world\\"></span>hello world</h2>
+<p>this is me.</p>
+"
+`;

src/remark-plugins/remark-remove-heading-id/index.mjs

@@ -0,0 +1,14 @@
+import { visit } from 'unist-util-visit';
+export default function () {
+  return function transformer(ast) {
+    visit(ast, 'heading', visitor);
+  };
+  function visitor(node) {
+    if (node.data && node.data.id) {
+      delete node.data.id;
+    }
+    if (node.data && node.data.hProperties && node.data.hProperties.id) {
+      delete node.data.hProperties.id;
+    }
+  }
+}

src/remark-plugins/remark-remove-heading-id/index.test.mjs

@@ -0,0 +1,23 @@
+import { remark } from 'remark';
+import remarkHtml from 'remark-html';
+import Plugin from './index.mjs';
+import remarkSlug from '../remark-slug/index.mjs';
+describe('customize blockquote', () => {
+  it('should add id', () => {
+    remark()
+      .use(remarkSlug)
+      .use(Plugin)
+      .use(remarkHtml)
+      .process(
+        `
+## hello world
+
+this is me.
+`,
+        function (err, { value: contents }) {
+          expect(err).toBeNull();
+          expect(contents).toMatchSnapshot();
+        }
+      );
+  });
+});

src/remark-plugins/remark-slug/__snapshots__/index.test.mjs.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`remark slug should add id 1`] = `
+"<h2 id=\\"user-content-hello-world\\"><span id=\\"user-content-hello-world\\"></span>hello world</h2>
+<p>this is me.</p>
+"
+`;

src/remark-plugins/remark-slug/index.mjs

@@ -0,0 +1,56 @@
+// based on https://github.com/remarkjs/remark-slug/blob/8e6394c3dd6232cc9f0fb0b05e7eaf33063effa5/index.js
+// to fix https://github.com/webpack/webpack.js.org/pull/5947
+/**
+ * @typedef {import('mdast').Root} Root
+ * @typedef {import('hast').Properties} Properties
+ */
+
+import { toString } from 'mdast-util-to-string';
+import { visit } from 'unist-util-visit';
+import BananaSlug from 'github-slugger';
+
+const slugs = new BananaSlug();
+
+/**
+ * Plugin to add anchors headings using GitHub’s algorithm.
+ *
+ * @type {import('unified').Plugin<void[], Root>}
+ */
+export default function remarkSlug() {
+  return (tree) => {
+    slugs.reset();
+
+    visit(tree, 'heading', (node) => {
+      const data = node.data || (node.data = {});
+      const props = /** @type {Properties} */ (
+        data.hProperties || (data.hProperties = {})
+      );
+      let id = props.id;
+
+      id = id ? slugs.slug(String(id), true) : slugs.slug(toString(node));
+
+      data.id = id;
+      props.id = id;
+
+      // insert <span id="..." /> for headings
+      node.children = [
+        {
+          type: 'paragraph',
+          data: {
+            hName: 'span',
+            hProperties: {
+              id,
+            },
+          },
+          children: [
+            {
+              type: 'text',
+              value: '',
+            },
+          ],
+        },
+        ...node.children,
+      ];
+    });
+  };
+}

src/remark-plugins/remark-slug/index.test.mjs

@@ -0,0 +1,20 @@
+import { remark } from 'remark';
+import remarkHtml from 'remark-html';
+import Plugin from './index.mjs';
+describe('remark slug', () => {
+  it('should add id', () => {
+    remark()
+      .use(Plugin)
+      .use(remarkHtml)
+      .process(
+        `## hello world
+
+this is me.
+`,
+        function (err, { value: contents }) {
+          expect(err).toBeNull();
+          expect(contents).toMatchSnapshot();
+        }
+      );
+  });
+});