docschina · docschina-bot · Aug 9, 2021 · Aug 10, 2021 · Aug 10, 2021 · Aug 10, 2021
diff --git a/.alexignore b/.alexignore
diff --git a/.alexrc b/.alexrc
diff --git a/src/components/BrandingSample.jsx b/src/components/BrandingSample.jsx
@@ -0,0 +1,7 @@
+import PropTypes from 'prop-types';
+BrandingSample.propTypes = {
+  color: PropTypes.string.isRequired,
+};
+export default function BrandingSample({ color }) {
+  return <div style={{ backgroundColor: color }}>&nbsp;</div>;
+}
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
@@ -30,6 +30,9 @@ const Footer = () => (
         <Link className="footer__link" to="https://webpack.threadless.com/">
           周边
         </Link>
+        <Link className="footer__link" to="/awesome-webpack/">
+          Awesome webpack
+        </Link>
         <Link className="footer__link" to="/glossary/">
           术语
         </Link>

diff --git a/src/components/Site/Site.jsx b/src/components/Site/Site.jsx
@@ -77,7 +77,7 @@ function Site(props) {
    */
   const _strip = (array) => {
     let anchorTitleIndex = array.findIndex(
-      (item) => item.name.toLowerCase() === 'index.md'
+      (item) => item.name.toLowerCase() === 'index.mdx'
     );
 
     if (anchorTitleIndex !== -1) {

diff --git a/src/components/Splash/Splash.jsx b/src/components/Splash/Splash.jsx
@@ -11,7 +11,7 @@ import { PlaceholderComponent } from '../Placeholder/Placeholder';
 import isClient from '../../utilities/is-client';
 
 // Import Demo Content
-import SplashContent from '../../content/index.md';
+import SplashContent from '../../content/index.mdx';
 
 // Load Styling
 import './Splash.scss';
@@ -55,11 +55,7 @@ const Splash = () => {
       <div className="splash__section splash__section--dark page__content">
         <Container>
           <Markdown>
-            <div
-              dangerouslySetInnerHTML={{
-                __html: SplashContent,
-              }}
-            />
+            <SplashContent />
           </Markdown>
         </Container>
       </div>

diff --git a/src/components/Splash/first/left.mdx b/src/components/Splash/first/left.mdx
@@ -0,0 +1,7 @@
+**src/index.js**
+
+```js
+import bar from './bar.js';
+
+bar();
+```
diff --git a/src/components/Splash/first/right.mdx b/src/components/Splash/first/right.mdx
@@ -0,0 +1,7 @@
+**src/bar.js**
+
+```js
+export default function bar() {
+  //
+}
+```
diff --git a/src/components/Splash/second/left.mdx b/src/components/Splash/second/left.mdx
@@ -0,0 +1,13 @@
+**[Without config](https://youtu.be/3Nv9muOkb6k?t=21293)** or provide custom **webpack.config.js**
+
+```js
+const path = require('path');
+
+module.exports = {
+  entry: './src/index.js',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'bundle.js',
+  },
+};
+```
diff --git a/src/components/Splash/second/right.mdx b/src/components/Splash/second/right.mdx
@@ -0,0 +1,15 @@
+**page.html**
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    ...
+  </head>
+  <body>
+    ...
+    <script src="dist/bundle.js"></script>
+  </body>
+</html>
+```
diff --git a/src/content/api/cli.md → src/content/api/cli.mdx b/src/content/api/cli.md → src/content/api/cli.mdx
diff --git a/src/content/api/compilation-object.md → src/content/api/compilation-object.mdx b/src/content/api/compilation-object.md → src/content/api/compilation-object.mdx
diff --git a/src/content/api/compiler-hooks.md → src/content/api/compiler-hooks.mdx b/src/content/api/compiler-hooks.md → src/content/api/compiler-hooks.mdx
diff --git a/...content/api/contextmodulefactory-hooks.md → ...ontent/api/contextmodulefactory-hooks.mdx b/...content/api/contextmodulefactory-hooks.md → ...ontent/api/contextmodulefactory-hooks.mdx
diff --git a/src/content/api/index.md → src/content/api/index.mdx b/src/content/api/index.md → src/content/api/index.mdx
diff --git a/src/content/api/logging.md → src/content/api/logging.mdx b/src/content/api/logging.md → src/content/api/logging.mdx
diff --git a/src/content/api/normalmodulefactory-hooks.md → ...content/api/normalmodulefactory-hooks.mdx b/src/content/api/normalmodulefactory-hooks.md → ...content/api/normalmodulefactory-hooks.mdx
diff --git a/src/content/api/parser.md → src/content/api/parser.mdx b/src/content/api/parser.md → src/content/api/parser.mdx
diff --git a/src/content/api/plugins.md → src/content/api/plugins.mdx b/src/content/api/plugins.md → src/content/api/plugins.mdx
diff --git a/src/content/api/resolvers.md → src/content/api/resolvers.mdx b/src/content/api/resolvers.md → src/content/api/resolvers.mdx
diff --git a/src/content/awesome-webpack.mdx b/src/content/awesome-webpack.mdx
diff --git a/...tent/blog/2020-10-10-webpack-5-release.md → ...ent/blog/2020-10-10-webpack-5-release.mdx b/...tent/blog/2020-10-10-webpack-5-release.md → ...ent/blog/2020-10-10-webpack-5-release.mdx
@@ -100,7 +100,7 @@ webpack 是完全基于[赞助](https://opencollective.com/webpack)的。
 
 ### 不再为 Node.js 模块 自动引用 Polyfills {#automatic-nodejs-polyfills-removed}
 
-在早期，webpack 的目的是为了让大多数的 Node.js 模块运行在浏览器中，但如今模块的格局已经发生了变化，现在许多模块主要是为前端而编写。webpack <= 4 的版本中提供了许多 Node.js 核心模块的 polyfills，一旦某个模块引用了任何一个核心模块（如 `cypto` 模块），webpack 就会自动引用这些 polyfills。
+在早期，webpack 的目的是为了让大多数的 Node.js 模块运行在浏览器中，但如今模块的格局已经发生了变化，现在许多模块主要是为前端而编写。webpack &lt;= 4 的版本中提供了许多 Node.js 核心模块的 polyfills，一旦某个模块引用了任何一个核心模块（如 `cypto` 模块），webpack 就会自动引用这些 polyfills。
 
 尽管这会使得使用为 Node.js 编写模块变得容易，但它在构建时给 bundle 附加了庞大的 polyfills。在大部分情况下，这些 polyfills 并非必须。
 

diff --git a/src/content/blog/2020-12-08-roadmap-2021.md → src/content/blog/2020-12-08-roadmap-2021.mdx b/src/content/blog/2020-12-08-roadmap-2021.md → src/content/blog/2020-12-08-roadmap-2021.mdx
diff --git a/src/content/blog/index.md → src/content/blog/index.mdx b/src/content/blog/index.md → src/content/blog/index.mdx
diff --git a/src/content/branding.md → src/content/branding.mdx b/src/content/branding.md → src/content/branding.mdx
@@ -12,6 +12,8 @@ translators:
   - jacob-lcs
 ---
 
+import BrandingSample from '../components/BrandingSample.jsx';
+
 在这里你可以找到 **webpack** 项目的品牌指南、资源和许可证。有关更多信息，请通过查看我们的官方[媒体仓库](https://github.com/webpack/media)，并找到[许可证](https://github.com/webpack/media/blob/master/LICENSE)来了解。点击任意图片下载它们。
 
 ## 名称 {#the-name}
@@ -22,16 +24,27 @@ Webpack 在句子的开头可以是大写字母 W，否则它应该全部为小
 
 webpack logo 应放置在白色背景上，并且其周围有足够间距，如下所示:
 
-<img src="https://raw.githubusercontent.com/webpack/media/master/logo/logo-on-white-bg.png" alt="webpack logo default with proper spacing on light background" />
+<img
+  src="https://raw.githubusercontent.com/webpack/media/master/logo/logo-on-white-bg.png"
+  alt="webpack logo default with proper spacing on light background"
+/>
 
 [svg](https://github.com/webpack/media/blob/master/logo/logo-on-white-bg.svg) | [png](https://github.com/webpack/media/blob/master/logo/logo-on-white-bg.png) | [jpg](https://github.com/webpack/media/blob/master/logo/logo-on-white-bg.jpg)
 
 将内部深蓝色正方体的大小加倍，就可以知道 logo 应占据多大空间。
 
 对于深色背景，可以使用 logo 的反色版本：
 
-<div style="display: block; background: #111;">
-  <img src="https://raw.githubusercontent.com/webpack/media/master/logo/logo-on-dark-bg.png" alt="webpack logo default with proper spacing on light background" />
+export const style = {
+  display: 'block',
+  background: '#111',
+};
+
+<div style={style}>
+  <img
+    src="https://raw.githubusercontent.com/webpack/media/master/logo/logo-on-dark-bg.png"
+    alt="webpack logo default with proper spacing on light background"
+  />
 </div>
 
 [svg](https://github.com/webpack/media/blob/master/logo/logo-on-dark-bg.svg) | [png](https://github.com/webpack/media/blob/master/logo/logo-on-dark-bg.png) | [jpg](https://github.com/webpack/media/blob/master/logo/logo-on-dark-bg.jpg)
@@ -42,43 +55,59 @@ T> 请尽可能的使用**图标 + 文本**的组合方式。
 
 **图标旨在用于布局有限的区域。如前所述，最好选择 图标+文字 的组合方式**。
 
-<img src="https://raw.githubusercontent.com/webpack/media/master/logo/icon.png" width="250" alt="icon example">
+<img
+  src="https://raw.githubusercontent.com/webpack/media/master/logo/icon.png"
+  width="250"
+  alt="icon example"
+/>
 
 [svg](https://github.com/webpack/media/blob/master/logo/icon.svg) | [png](https://github.com/webpack/media/blob/master/logo/icon.png) | [jpg](https://github.com/webpack/media/blob/master/logo/icon.jpg)
 
 适用于较大区域的正方形尺寸图标（例如头像或个人图片）：
 
-<img src="https://raw.githubusercontent.com/webpack/media/master/logo/icon-square-big.png" width="250" alt="icon square big example">
+<img
+  src="https://raw.githubusercontent.com/webpack/media/master/logo/icon-square-big.png"
+  width="250"
+  alt="icon square big example"
+/>
 
 [svg](https://github.com/webpack/media/blob/master/logo/icon-square-big.svg) | [png](https://github.com/webpack/media/blob/master/logo/icon-square-big.png) | [jpg](https://github.com/webpack/media/blob/master/logo/icon-square-big.jpg)
 
 适用于较小区域的正方形尺寸图标（例如，favicon）：
 
-<img src="https://raw.githubusercontent.com/webpack/media/master/logo/icon-square-small.png" width="50" alt="icon square small example">
+<img
+  src="https://raw.githubusercontent.com/webpack/media/master/logo/icon-square-small.png"
+  width="50"
+  alt="icon square small example"
+/>
 
 [svg](https://github.com/webpack/media/blob/master/logo/icon-square-small.svg) | [png](https://github.com/webpack/media/blob/master/logo/icon-square-small.png) | [jpg](https://github.com/webpack/media/blob/master/logo/icon-square-small.jpg)
 
 T> 对于那些遵循我们的指南，并已经深入了解的人，我们还制作了一个专门用于自定义 emoji 符号的特殊小尺寸图片（例如，在 slack 或 gitter 频道 ;)）。
 
-<img src="/assets/icon-square-small-slack.png" width="50" alt="icon square small example">
+<img
+  src="/assets/icon-square-small-slack.png"
+  width="50"
+  alt="icon square small example"
+/>
 
 ## 调色板 {#color-palette}
 
 在 [Open Collective](https://opencollective.com/) 和 [Threadless](https://medium.com/u/840563ee2a56) 的帮助下，以下颜色在我们整个网站中被以各种组合形式使用，并且在 [webpack 官方商城](https://webpack.threadless.com/collections/the-final-release-collection/) 推出的时尚服装系列中也用了这些颜色！
 
 | 颜色名称    | HEX 码      | RGB 码              | 示例 |
 | ------------ | ------------- | -------------------- | ---------------------------------------------------- |
-| Malibu:      | HEX `#8dd6f9` | `rgb: 141, 214, 249` | <div style="background-color: #8dd6f9;">&nbsp;</div> |
-| Denim:       | HEX `#1d78c1` | `rgb: 29, 120, 193`  | <div style="background-color: #1d78c1;">&nbsp;</div> |
-| Fiord:       | HEX `#465E69` | `rgb: 70, 94, 105`   | <div style="background-color: #465E69;">&nbsp;</div> |
-| Outer Space: | HEX `#2B3A42` | `rgb: 43, 58, 66`    | <div style="background-color: #2B3A42;">&nbsp;</div> |
-| White:       | HEX `#ffffff` | `rgb: 255, 255, 255` | <div style="background-color: #ffffff;">&nbsp;</div> |
-| Concrete:    | HEX `#f2f2f2` | `rgb: 242, 242, 242` | <div style="background-color: #f2f2f2;">&nbsp;</div> |
-| Alto:        | HEX `#dedede` | `rgb: 222, 222, 222` | <div style="background-color: #dedede;">&nbsp;</div> |
-| Dusty Gray:  | HEX `#999999` | `rgb: 153, 153, 153` | <div style="background-color: #999999;">&nbsp;</div> |
-| Dove Gray:   | HEX `#666666` | `rgb: 102, 102, 102` | <div style="background-color: #666666;">&nbsp;</div> |
-| Emperor:     | HEX `#535353` | `rgb: 83, 83, 83`    | <div style="background-color: #535353;">&nbsp;</div> |
-| Mine Shaft:  | HEX `#333333` | `rgb: 51, 51, 51`    | <div style="background-color: #333333;">&nbsp;</div> |
+| Malibu:      | HEX `#8dd6f9` | `rgb: 141, 214, 249` | <BrandingSample color='#8dd6f9' /> |
+| Denim:       | HEX `#1d78c1` | `rgb: 29, 120, 193`  | <BrandingSample color='#1d78c1' /> |
+| Fiord:       | HEX `#465E69` | `rgb: 70, 94, 105`   | <BrandingSample color='#465E69' /> |
+| Outer Space: | HEX `#2B3A42` | `rgb: 43, 58, 66`    | <BrandingSample color='#2B3A42' /> |
+| White:       | HEX `#ffffff` | `rgb: 255, 255, 255` | <BrandingSample color='#ffffff' /> |
+| Concrete:    | HEX `#f2f2f2` | `rgb: 242, 242, 242` | <BrandingSample color='#f2f2f2' /> |
+| Alto:        | HEX `#dedede` | `rgb: 222, 222, 222` | <BrandingSample color='#dedede' /> |
+| Dusty Gray:  | HEX `#999999` | `rgb: 153, 153, 153` | <BrandingSample color='#999999' /> |
+| Dove Gray:   | HEX `#666666` | `rgb: 102, 102, 102` | <BrandingSample color='#666666' /> |
+| Emperor:     | HEX `#535353` | `rgb: 83, 83, 83`    | <BrandingSample color='#535353' /> |
+| Mine Shaft:  | HEX `#333333` | `rgb: 51, 51, 51`    | <BrandingSample color='#333333' /> |
 
 此外，你可以直接从下面的链接，获取这些类型的文件：
 

diff --git a/src/content/comparison.md → src/content/comparison.mdx b/src/content/comparison.md → src/content/comparison.mdx
diff --git a/src/content/concepts/configuration.md → src/content/concepts/configuration.mdx b/src/content/concepts/configuration.md → src/content/concepts/configuration.mdx
diff --git a/src/content/concepts/dependency-graph.md → src/content/concepts/dependency-graph.mdx b/src/content/concepts/dependency-graph.md → src/content/concepts/dependency-graph.mdx
diff --git a/...ontent/concepts/hot-module-replacement.md → ...ntent/concepts/hot-module-replacement.mdx b/...ontent/concepts/hot-module-replacement.md → ...ntent/concepts/hot-module-replacement.mdx
diff --git a/src/content/concepts/index.md → src/content/concepts/index.mdx b/src/content/concepts/index.md → src/content/concepts/index.mdx
diff --git a/src/content/concepts/manifest.md → src/content/concepts/manifest.mdx b/src/content/concepts/manifest.md → src/content/concepts/manifest.mdx
diff --git a/src/content/concepts/module-resolution.md → src/content/concepts/module-resolution.mdx b/src/content/concepts/module-resolution.md → src/content/concepts/module-resolution.mdx
diff --git a/src/content/concepts/modules.md → src/content/concepts/modules.mdx b/src/content/concepts/modules.md → src/content/concepts/modules.mdx
diff --git a/src/content/concepts/output.md → src/content/concepts/output.mdx b/src/content/concepts/output.md → src/content/concepts/output.mdx
diff --git a/src/content/concepts/plugins.md → src/content/concepts/plugins.mdx b/src/content/concepts/plugins.md → src/content/concepts/plugins.mdx
diff --git a/src/content/concepts/targets.md → src/content/concepts/targets.mdx b/src/content/concepts/targets.md → src/content/concepts/targets.mdx
diff --git a/src/content/concepts/under-the-hood.md → src/content/concepts/under-the-hood.mdx b/src/content/concepts/under-the-hood.md → src/content/concepts/under-the-hood.mdx
diff --git a/src/content/concepts/why-webpack.md → src/content/concepts/why-webpack.mdx b/src/content/concepts/why-webpack.md → src/content/concepts/why-webpack.mdx
diff --git a/.../configuration/configuration-languages.md → ...configuration/configuration-languages.mdx b/.../configuration/configuration-languages.md → ...configuration/configuration-languages.mdx
diff --git a/src/content/configuration/dev-server.md → src/content/configuration/dev-server.mdx b/src/content/configuration/dev-server.md → src/content/configuration/dev-server.mdx
diff --git a/src/content/configuration/devtool.md → src/content/configuration/devtool.mdx b/src/content/configuration/devtool.md → src/content/configuration/devtool.mdx
diff --git a/src/content/configuration/entry-context.md → src/content/configuration/entry-context.mdx b/src/content/configuration/entry-context.md → src/content/configuration/entry-context.mdx
diff --git a/src/content/configuration/experiments.mdx b/src/content/configuration/experiments.mdx
@@ -11,7 +11,7 @@ translators:
   - QC-L
 ---
 
-## `experiments` {#experiments}
+## experiments {#experiments}
 
 `boolean: false`
 
@@ -22,6 +22,7 @@ W> 由于实验特性具有相对 宽松的语义版本，可能会有重大的
 Available options:
 
 - `asyncWebAssembly`: Support the new WebAssembly according to the [updated specification](https://github.com/WebAssembly/esm-integration), it makes a WebAssembly module an async module.
+- [`buildHttp`](#experimentsbuildhttp)
 - [`executeModule`](#experimentsexecutemodule)
 - `layers`: Enable module and chunk layers.
 - [`lazyCompilation`](#experimentslazycompilation)
@@ -35,17 +36,101 @@ Available options:
 module.exports = {
   //...
   experiments: {
+    asyncWebAssembly: true,
+    buildHttp: true,
     executeModule: true,
+    layers: true,
+    lazyCompilation: true,
     outputModule: true,
     syncWebAssembly: true,
     topLevelAwait: true,
-    asyncWebAssembly: true,
-    layers: true,
-    lazyCompilation: true,
   },
 };
 ```
 
+### experiments.buildHttp {#experimentsbuildhttp}
+
+启用该配置项时，webpack 可以构建以 `http(s):` 协议开头的远程资源。
+
+- Type:
+
+  One of the following:
+
+  - `boolean`
+  - `HttpUriOptions`
+    ```ts
+    {
+      cacheLocation?: false | string,
+      frozen?: boolean,
+      lockfileLocation?: string,
+      upgrade?: boolean
+    }
+    ```
+
+- Available: 5.49.0+
+- Example
+
+  ```javascript
+  // webpack.config.js
+  module.exports = {
+    //...
+    experiments: {
+      buildHttp: true,
+    },
+  };
+  ```
+
+  ```js
+  // src/index.js
+  import pMap1 from 'https://cdn.skypack.dev/p-map';
+  // `buildHttp` 启用时，webpack 会想本地模块一样构建 pMap1
+  console.log(pMap1);
+  ```
+
+#### experiments.buildHttp.cacheLocation {#experimentsbuildhttpcachelocation}
+
+定义缓存远程资源的位置。
+
+- Type
+  - `string`
+  - `false`
+- Example
+  ```javascript
+  // webpack.config.js
+  module.exports = {
+    //...
+    experiments: {
+      buildHttp: {
+        cacheLocation: false,
+      },
+    },
+  };
+  ```
+
+webpack 默认使用 `<compiler-name.>webpack.lock.data/` 进行缓存，但是你可以将其设为 `false` 来禁用它。
+
+请注意，你应该在 `experiments.buildHttp.cacheLocation` 下提交文件到版本控制系统中，因为在 `production` 构建过程中不会发出网络请求。
+
+#### experiments.buildHttp.frozen {#experimentsbuildhttpfrozen}
+
+冻结远程资源并锁定文件。对锁文件（lockfile）或资源内容的任何修改都将导致错误。
+
+- Type: `boolean`
+
+#### experiments.buildHttp.lockfileLocation {#experimentsbuildhttplockfilelocation}
+
+定义存储锁文件（lockfile）的位置。
+
+- Type: `string`
+
+webpack 默认会创建一个 `<compiler-name.>webpack.lock`。请确保将其提交到版本控制系统中。在 `production` 构建过程中，webpack 将会构建锁文件（lockfile）中以 `http(s):` 协议开头的模块，并将其缓存在 [`experiments.buildHttp.cacheLocation`](#experimentsbuildhttpcachelocation)。
+
+#### experiments.buildHttp.upgrade {#experimentsbuildhttpupgrade}
+
+检测远程资源的更改并自动升级。
+
+- Type: `boolean`
+
 ### experiments.executeModule {#experimentsexecutemodule}
 
 Enable execution of modules from the module graph for plugins and loaders at build time to generate code or other assets.