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/.gitignore b/.gitignore
@@ -12,5 +12,5 @@ package-lock.json
 .cache
 internal-links.tap
 stats.json
-printable.md
+printable.mdx
 repositories/*.json
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
   },
   "scripts": {
     "clean-dist": "rimraf ./dist",
-    "clean-printable": "rimraf src/content/**/printable.md",
+    "clean-printable": "rimraf src/content/**/printable.mdx",
     "preclean": "run-s clean-dist clean-printable",
     "clean": "rimraf src/content/**/_*.md src/**/_*.json repositories/*.json",
     "start": "npm run clean-dist && webpack serve --config webpack.dev.js --env dev --progress --node-env development",

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) {
@@ -109,7 +109,7 @@ function Site(props) {
       })
       .filter(
         (page) =>
-          page.title !== 'printable.md' && !page.content.includes('Printable')
+          page.title !== 'printable.mdx' && !page.content.includes('Printable')
       );
   };
 

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,11 @@ webpack 是完全基于[赞助](https://opencollective.com/webpack)的。
 
 ### 不再为 Node.js 模块 自动引用 Polyfills {#automatic-nodejs-polyfills-removed}
 
+<<<<<<< HEAD:src/content/blog/2020-10-10-webpack-5-release.md
 在早期，webpack 的目的是为了让大多数的 Node.js 模块运行在浏览器中，但如今模块的格局已经发生了变化，现在许多模块主要是为前端而编写。webpack <= 4 的版本中提供了许多 Node.js 核心模块的 polyfills，一旦某个模块引用了任何一个核心模块（如 `cypto` 模块），webpack 就会自动引用这些 polyfills。
+=======
+In the early days, webpack's aim was to allow running most Node.js modules in the browser, but the module landscape changed and many module uses are now written mainly for frontend purposes. webpack &lt;= 4 ships with polyfills for many of the Node.js core modules, which are automatically applied once a module uses any of the core modules (i.e. the `crypto` module).
+>>>>>>> 2402ab45e5bd20ba625232fa520ce995ebb4a8be:src/content/blog/2020-10-10-webpack-5-release.mdx
 
 尽管这会使得使用为 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,7 +12,13 @@ translators:
   - jacob-lcs
 ---
 
+<<<<<<< HEAD:src/content/branding.md
 在这里你可以找到 **webpack** 项目的品牌指南、资源和许可证。有关更多信息，请通过查看我们的官方[媒体仓库](https://github.com/webpack/media)，并找到[许可证](https://github.com/webpack/media/blob/master/LICENSE)来了解。点击任意图片下载它们。
+=======
+import BrandingSample from '../components/BrandingSample.jsx';
+
+Here you can find **webpack** project brand guidelines, assets, and license. See our official [media repository](https://github.com/webpack/media) for more information and to find the [license](https://github.com/webpack/media/blob/master/LICENSE) that governs this work. Click any of the images to download them.
+>>>>>>> 2402ab45e5bd20ba625232fa520ce995ebb4a8be:src/content/branding.mdx
 
 ## 名称 {#the-name}
 
@@ -22,16 +28,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,30 +59,47 @@ 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/) 推出的时尚服装系列中也用了这些颜色！
 
+<<<<<<< HEAD:src/content/branding.md
 | 颜色名称    | HEX 码      | RGB 码              | 示例 |
 | ------------ | ------------- | -------------------- | ---------------------------------------------------- |
 | Malibu:      | HEX `#8dd6f9` | `rgb: 141, 214, 249` | <div style="background-color: #8dd6f9;">&nbsp;</div> |
@@ -79,6 +113,21 @@ T> 对于那些遵循我们的指南，并已经深入了解的人，我们还
 | 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> |
+=======
+| Color Name   | HEX Code      | RGB Code             | Sample                             |
+| ------------ | ------------- | -------------------- | ---------------------------------- |
+| 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' /> |
+>>>>>>> 2402ab45e5bd20ba625232fa520ce995ebb4a8be:src/content/branding.mdx
 
 此外，你可以直接从下面的链接，获取这些类型的文件：
 

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-federation.mdx b/src/content/concepts/module-federation.mdx
@@ -294,7 +294,7 @@ T> [`output.publicPath`](/configuration/output/#outputpublicpath) 配置项也
 
 ## 故障排除 {#troubleshooting}
 
-**`Uncaught Error: Shared module is not available for eager consumption`**
+### `Uncaught Error: Shared module is not available for eager consumption`
 
 应用程序正急切地执行一个作为全局主机运行的应用程序。有如下选项可供选择:
 
@@ -352,7 +352,7 @@ new ModuleFederationPlugin({
 });
 ```
 
-**`Uncaught Error: Module "./Button" does not exist in container.`**
+### `Uncaught Error: Module "./Button" does not exist in container.`
 
 错误提示中可能不会显示 `"./Button"`，但是信息看起来差不多。这个问题通常会出现在将 webpack beta.16 升级到 webpack beta.17 中。
 
@@ -367,7 +367,16 @@ new ModuleFederationPlugin({
 });
 ```
 
-**`Uncaught TypeError: fn is not a function`**
+### `Uncaught TypeError: fn is not a function`
 
+<<<<<<< HEAD
 此处错误可能是丢失了远程容器，请确保在使用前添加它。
 如果已为试图使用远程服务器的容器加载了容器，但仍然看到此错误，则需将主机容器的远程容器文件也添加到 HTML 中。
+=======
+You are likely missing the remote container, make sure it's added.
+If you have the container loaded for the remote you are trying to consume, but still see this error, add the host container's remote container file to the HTML as well.
+
+### Collision between modules from different remotes
+
+If you're going to load multiple modules from different remotes, it's advised to set the [`output.uniqueName`](/configuration/output/#outputuniquename) option for your remote builds to avoid collisions between multiple webpack runtimes.
+>>>>>>> 2402ab45e5bd20ba625232fa520ce995ebb4a8be
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
@@ -34,7 +34,11 @@ const pluginName = 'ConsoleLogOnBuildWebpackPlugin';
 class ConsoleLogOnBuildWebpackPlugin {
   apply(compiler) {
     compiler.hooks.run.tap(pluginName, (compilation) => {
+<<<<<<< HEAD:src/content/concepts/plugins.md
       console.log('webpack 构建过程开始！');
+=======
+      console.log('The webpack build process is starting!');
+>>>>>>> 2402ab45e5bd20ba625232fa520ce995ebb4a8be: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