From 5e137211bee0eecd9bfee050eabebc695cc57acb Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sat, 24 Jul 2021 11:34:46 +0800
Subject: [PATCH 01/52] rename vote.md to vote.mdx

---
 src/content/{vote.md => vote.mdx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/content/{vote.md => vote.mdx} (100%)

diff --git a/src/content/vote.md b/src/content/vote.mdx
similarity index 100%
rename from src/content/vote.md
rename to src/content/vote.mdx

From c88538e12bd4747da12b7af0fe0ca2114ab1c6da Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sat, 24 Jul 2021 11:41:18 +0800
Subject: [PATCH 02/52] rename license.md to license.mdx

---
 src/content/{license.md => license.mdx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/content/{license.md => license.mdx} (100%)

diff --git a/src/content/license.md b/src/content/license.mdx
similarity index 100%
rename from src/content/license.md
rename to src/content/license.mdx

From f4b5b815d40c5b87024aa4fb29020a0bdb060fc7 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sat, 24 Jul 2021 13:26:42 +0800
Subject: [PATCH 03/52] rename glossary.md to glossary.mdx

---
 src/content/{glossary.md => glossary.mdx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/content/{glossary.md => glossary.mdx} (100%)

diff --git a/src/content/glossary.md b/src/content/glossary.mdx
similarity index 100%
rename from src/content/glossary.md
rename to src/content/glossary.mdx

From c2fa1b7995da8f81cac8430d7b0dd5706a242be2 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sat, 24 Jul 2021 17:20:42 +0800
Subject: [PATCH 04/52] rename comparison.md to .mdx

---
 src/content/{comparison.md => comparison.mdx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/content/{comparison.md => comparison.mdx} (100%)

diff --git a/src/content/comparison.md b/src/content/comparison.mdx
similarity index 100%
rename from src/content/comparison.md
rename to src/content/comparison.mdx

From c72b803c1292d9e8a3186dcdd091073e755c9c7c Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sat, 7 Aug 2021 09:03:43 +0800
Subject: [PATCH 05/52] rename html-webpack-plugin.md

---
 .../plugins/{html-webpack-plugin.md => html-webpack-plugin.mdx}   | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/content/plugins/{html-webpack-plugin.md => html-webpack-plugin.mdx} (100%)

diff --git a/src/content/plugins/html-webpack-plugin.md b/src/content/plugins/html-webpack-plugin.mdx
similarity index 100%
rename from src/content/plugins/html-webpack-plugin.md
rename to src/content/plugins/html-webpack-plugin.mdx

From 7bfee6d0d21fbd7c82fdd96acc51d5821a2fef37 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sat, 7 Aug 2021 09:13:11 +0800
Subject: [PATCH 06/52] rename automatic-prefetch-plugin.md

---
 ...automatic-prefetch-plugin.md => automatic-prefetch-plugin.mdx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/content/plugins/{automatic-prefetch-plugin.md => automatic-prefetch-plugin.mdx} (100%)

diff --git a/src/content/plugins/automatic-prefetch-plugin.md b/src/content/plugins/automatic-prefetch-plugin.mdx
similarity index 100%
rename from src/content/plugins/automatic-prefetch-plugin.md
rename to src/content/plugins/automatic-prefetch-plugin.mdx

From 42b094fe8b3e15c6c2409b5a31e60d91cf0efb30 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sat, 7 Aug 2021 09:18:00 +0800
Subject: [PATCH 07/52] rename banner-plugin.md

---
 src/content/plugins/{banner-plugin.md => banner-plugin.mdx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/content/plugins/{banner-plugin.md => banner-plugin.mdx} (100%)

diff --git a/src/content/plugins/banner-plugin.md b/src/content/plugins/banner-plugin.mdx
similarity index 100%
rename from src/content/plugins/banner-plugin.md
rename to src/content/plugins/banner-plugin.mdx

From aaa66b0613892407d61bbd75f403a3fe7fba653b Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sat, 7 Aug 2021 09:22:41 +0800
Subject: [PATCH 08/52] rename commons-chunk-plugin.md

---
 .../plugins/{commons-chunk-plugin.md => commons-chunk-plugin.mdx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/content/plugins/{commons-chunk-plugin.md => commons-chunk-plugin.mdx} (100%)

diff --git a/src/content/plugins/commons-chunk-plugin.md b/src/content/plugins/commons-chunk-plugin.mdx
similarity index 100%
rename from src/content/plugins/commons-chunk-plugin.md
rename to src/content/plugins/commons-chunk-plugin.mdx

From 37e126bef5f961dfbecc774ceea80325a062e5f9 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sat, 7 Aug 2021 09:29:50 +0800
Subject: [PATCH 09/52] rename context-exclusion-plugin.md

---
 .../{context-exclusion-plugin.md => context-exclusion-plugin.mdx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/content/plugins/{context-exclusion-plugin.md => context-exclusion-plugin.mdx} (100%)

diff --git a/src/content/plugins/context-exclusion-plugin.md b/src/content/plugins/context-exclusion-plugin.mdx
similarity index 100%
rename from src/content/plugins/context-exclusion-plugin.md
rename to src/content/plugins/context-exclusion-plugin.mdx

From a0fbbe9973f830bcd2c213f4adc6a4c273808c9c Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sun, 8 Aug 2021 17:15:31 +0800
Subject: [PATCH 10/52] rename context-replacement-plugin.md

---
 ...ntext-replacement-plugin.md => context-replacement-plugin.mdx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/content/plugins/{context-replacement-plugin.md => context-replacement-plugin.mdx} (100%)

diff --git a/src/content/plugins/context-replacement-plugin.md b/src/content/plugins/context-replacement-plugin.mdx
similarity index 100%
rename from src/content/plugins/context-replacement-plugin.md
rename to src/content/plugins/context-replacement-plugin.mdx

From faaa010323580470592ae43d8d955813aec45177 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sun, 8 Aug 2021 17:20:05 +0800
Subject: [PATCH 11/52] rename dll-plugin.md

---
 src/content/plugins/{dll-plugin.md => dll-plugin.mdx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/content/plugins/{dll-plugin.md => dll-plugin.mdx} (100%)

diff --git a/src/content/plugins/dll-plugin.md b/src/content/plugins/dll-plugin.mdx
similarity index 100%
rename from src/content/plugins/dll-plugin.md
rename to src/content/plugins/dll-plugin.mdx

From 38ae652f06909df815f4dd6686b0753950291cb7 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sun, 8 Aug 2021 17:21:51 +0800
Subject: [PATCH 12/52] rename environment-plugin.md

---
 .../plugins/{environment-plugin.md => environment-plugin.mdx}     | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/content/plugins/{environment-plugin.md => environment-plugin.mdx} (100%)

diff --git a/src/content/plugins/environment-plugin.md b/src/content/plugins/environment-plugin.mdx
similarity index 100%
rename from src/content/plugins/environment-plugin.md
rename to src/content/plugins/environment-plugin.mdx

From abaeb4330d42a21839c55cb381870b426972d7f8 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sun, 8 Aug 2021 17:31:28 +0800
Subject: [PATCH 13/52] rename eval-source-map-dev-tool-plugin.md

---
 ...map-dev-tool-plugin.md => eval-source-map-dev-tool-plugin.mdx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/content/plugins/{eval-source-map-dev-tool-plugin.md => eval-source-map-dev-tool-plugin.mdx} (100%)

diff --git a/src/content/plugins/eval-source-map-dev-tool-plugin.md b/src/content/plugins/eval-source-map-dev-tool-plugin.mdx
similarity index 100%
rename from src/content/plugins/eval-source-map-dev-tool-plugin.md
rename to src/content/plugins/eval-source-map-dev-tool-plugin.mdx

From 965c7e54aacf2b150fa8546b22c6ffbb9dc6a537 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sun, 8 Aug 2021 17:31:40 +0800
Subject: [PATCH 14/52] rename hashed-module-ids-plugin.md

---
 .../{hashed-module-ids-plugin.md => hashed-module-ids-plugin.mdx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/content/plugins/{hashed-module-ids-plugin.md => hashed-module-ids-plugin.mdx} (100%)

diff --git a/src/content/plugins/hashed-module-ids-plugin.md b/src/content/plugins/hashed-module-ids-plugin.mdx
similarity index 100%
rename from src/content/plugins/hashed-module-ids-plugin.md
rename to src/content/plugins/hashed-module-ids-plugin.mdx

From 6062305cca385cd6adfe250390b37c776df2ad4b Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sun, 8 Aug 2021 17:38:42 +0800
Subject: [PATCH 15/52] rename hot-module-replacement-plugin.md

---
 ...le-replacement-plugin.md => hot-module-replacement-plugin.mdx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/content/plugins/{hot-module-replacement-plugin.md => hot-module-replacement-plugin.mdx} (100%)

diff --git a/src/content/plugins/hot-module-replacement-plugin.md b/src/content/plugins/hot-module-replacement-plugin.mdx
similarity index 100%
rename from src/content/plugins/hot-module-replacement-plugin.md
rename to src/content/plugins/hot-module-replacement-plugin.mdx

From eaf4b68e7b48d23c075092f9a9b085603c341994 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sun, 8 Aug 2021 17:43:37 +0800
Subject: [PATCH 16/52] rename ignore-plugin.md

---
 src/content/plugins/{ignore-plugin.md => ignore-plugin.mdx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/content/plugins/{ignore-plugin.md => ignore-plugin.mdx} (100%)

diff --git a/src/content/plugins/ignore-plugin.md b/src/content/plugins/ignore-plugin.mdx
similarity index 100%
rename from src/content/plugins/ignore-plugin.md
rename to src/content/plugins/ignore-plugin.mdx

From 5888c1a6456010dcda473520f85604f9d9c372a0 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sun, 8 Aug 2021 17:44:06 +0800
Subject: [PATCH 17/52] rename index.md

---
 src/content/plugins/{index.md => index.mdx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/content/plugins/{index.md => index.mdx} (100%)

diff --git a/src/content/plugins/index.md b/src/content/plugins/index.mdx
similarity index 100%
rename from src/content/plugins/index.md
rename to src/content/plugins/index.mdx

From b11ba1cdbc7f077cd4501650dc9f3cb89a587f19 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sun, 8 Aug 2021 17:47:57 +0800
Subject: [PATCH 18/52] rename limit-chunk-count-plugin.md

---
 .../{limit-chunk-count-plugin.md => limit-chunk-count-plugin.mdx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/content/plugins/{limit-chunk-count-plugin.md => limit-chunk-count-plugin.mdx} (100%)

diff --git a/src/content/plugins/limit-chunk-count-plugin.md b/src/content/plugins/limit-chunk-count-plugin.mdx
similarity index 100%
rename from src/content/plugins/limit-chunk-count-plugin.md
rename to src/content/plugins/limit-chunk-count-plugin.mdx

From 7008e96f63d0b3cfbcd2648f74f17599addb2279 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sun, 8 Aug 2021 17:48:50 +0800
Subject: [PATCH 19/52] rename module-concatenation-plugin.md

---
 .../{min-chunk-size-plugin.md => min-chunk-size-plugin.mdx}       | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/content/plugins/{min-chunk-size-plugin.md => min-chunk-size-plugin.mdx} (100%)

diff --git a/src/content/plugins/min-chunk-size-plugin.md b/src/content/plugins/min-chunk-size-plugin.mdx
similarity index 100%
rename from src/content/plugins/min-chunk-size-plugin.md
rename to src/content/plugins/min-chunk-size-plugin.mdx

From 33003da4de03144e73ac603760b6ef4e36e77817 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sun, 8 Aug 2021 17:54:44 +0800
Subject: [PATCH 20/52] rename module-concatenation-plugin.md

---
 ...le-concatenation-plugin.md => module-concatenation-plugin.mdx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/content/plugins/{module-concatenation-plugin.md => module-concatenation-plugin.mdx} (100%)

diff --git a/src/content/plugins/module-concatenation-plugin.md b/src/content/plugins/module-concatenation-plugin.mdx
similarity index 100%
rename from src/content/plugins/module-concatenation-plugin.md
rename to src/content/plugins/module-concatenation-plugin.mdx

From 806051476588431ecc80ffc82e8642e109dda460 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sun, 8 Aug 2021 17:55:00 +0800
Subject: [PATCH 21/52] rename NoEmitOnErrorsPlugin.md

---
 .../plugins/{NoEmitOnErrorsPlugin.md => NoEmitOnErrorsPlugin.mdx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/content/plugins/{NoEmitOnErrorsPlugin.md => NoEmitOnErrorsPlugin.mdx} (100%)

diff --git a/src/content/plugins/NoEmitOnErrorsPlugin.md b/src/content/plugins/NoEmitOnErrorsPlugin.mdx
similarity index 100%
rename from src/content/plugins/NoEmitOnErrorsPlugin.md
rename to src/content/plugins/NoEmitOnErrorsPlugin.mdx

From f79e722dd2e78e367c7a50761aaae6aeaafc8d91 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sun, 8 Aug 2021 17:56:25 +0800
Subject: [PATCH 22/52] rename normal-module-replacement-plugin.md

---
 ...replacement-plugin.md => normal-module-replacement-plugin.mdx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/content/plugins/{normal-module-replacement-plugin.md => normal-module-replacement-plugin.mdx} (100%)

diff --git a/src/content/plugins/normal-module-replacement-plugin.md b/src/content/plugins/normal-module-replacement-plugin.mdx
similarity index 100%
rename from src/content/plugins/normal-module-replacement-plugin.md
rename to src/content/plugins/normal-module-replacement-plugin.mdx

From 1f723f7bc5533bb7b409730096d8cb61005f15e4 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sun, 8 Aug 2021 18:01:01 +0800
Subject: [PATCH 23/52] rename prefetch-plugin.md

---
 src/content/plugins/{prefetch-plugin.md => prefetch-plugin.mdx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/content/plugins/{prefetch-plugin.md => prefetch-plugin.mdx} (100%)

diff --git a/src/content/plugins/prefetch-plugin.md b/src/content/plugins/prefetch-plugin.mdx
similarity index 100%
rename from src/content/plugins/prefetch-plugin.md
rename to src/content/plugins/prefetch-plugin.mdx

From 23875a795209ae31c73c347815f4fa553aac5d9c Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sun, 8 Aug 2021 18:01:12 +0800
Subject: [PATCH 24/52] rename profiling-plugin.md

---
 src/content/plugins/{profiling-plugin.md => profiling-plugin.mdx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/content/plugins/{profiling-plugin.md => profiling-plugin.mdx} (100%)

diff --git a/src/content/plugins/profiling-plugin.md b/src/content/plugins/profiling-plugin.mdx
similarity index 100%
rename from src/content/plugins/profiling-plugin.md
rename to src/content/plugins/profiling-plugin.mdx

From 6adddcf0d941baabecf64fdfec63bcc42269227a Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sun, 8 Aug 2021 20:17:40 +0800
Subject: [PATCH 25/52] rename progress-plugin.md

---
 src/content/plugins/{progress-plugin.md => progress-plugin.mdx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/content/plugins/{progress-plugin.md => progress-plugin.mdx} (100%)

diff --git a/src/content/plugins/progress-plugin.md b/src/content/plugins/progress-plugin.mdx
similarity index 100%
rename from src/content/plugins/progress-plugin.md
rename to src/content/plugins/progress-plugin.mdx

From b536ee18607ecaf635cefe3424f13de54a78726c Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sun, 8 Aug 2021 20:18:51 +0800
Subject: [PATCH 26/52] rename provide-plugin.md

---
 src/content/plugins/{provide-plugin.md => provide-plugin.mdx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/content/plugins/{provide-plugin.md => provide-plugin.mdx} (100%)

diff --git a/src/content/plugins/provide-plugin.md b/src/content/plugins/provide-plugin.mdx
similarity index 100%
rename from src/content/plugins/provide-plugin.md
rename to src/content/plugins/provide-plugin.mdx

From e7dbf83c6232c19aa604d4b0e4ca54c110cc9150 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sun, 8 Aug 2021 20:26:53 +0800
Subject: [PATCH 27/52] rename source-map-dev-tool-plugin.md

---
 ...urce-map-dev-tool-plugin.md => source-map-dev-tool-plugin.mdx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/content/plugins/{source-map-dev-tool-plugin.md => source-map-dev-tool-plugin.mdx} (100%)

diff --git a/src/content/plugins/source-map-dev-tool-plugin.md b/src/content/plugins/source-map-dev-tool-plugin.mdx
similarity index 100%
rename from src/content/plugins/source-map-dev-tool-plugin.md
rename to src/content/plugins/source-map-dev-tool-plugin.mdx

From 8cdcec2c7c984d0a536a4f45e8d04394cda7b00e Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sun, 8 Aug 2021 20:27:17 +0800
Subject: [PATCH 28/52] rename split-chunks-plugin.md

---
 .../plugins/{split-chunks-plugin.md => split-chunks-plugin.mdx}   | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/content/plugins/{split-chunks-plugin.md => split-chunks-plugin.mdx} (100%)

diff --git a/src/content/plugins/split-chunks-plugin.md b/src/content/plugins/split-chunks-plugin.mdx
similarity index 100%
rename from src/content/plugins/split-chunks-plugin.md
rename to src/content/plugins/split-chunks-plugin.mdx

From 23ecedd4d401506d171dd6e80dde9229ba94db8d Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sun, 8 Aug 2021 20:32:15 +0800
Subject: [PATCH 29/52] rename watch-ignore-plugin.md

---
 .../plugins/{watch-ignore-plugin.md => watch-ignore-plugin.mdx}   | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/content/plugins/{watch-ignore-plugin.md => watch-ignore-plugin.mdx} (100%)

diff --git a/src/content/plugins/watch-ignore-plugin.md b/src/content/plugins/watch-ignore-plugin.mdx
similarity index 100%
rename from src/content/plugins/watch-ignore-plugin.md
rename to src/content/plugins/watch-ignore-plugin.mdx

From 8be2b3d801f946eea8128b84912c70070bb78ced Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sun, 8 Aug 2021 20:34:04 +0800
Subject: [PATCH 30/52] rename 3.md and fix whitespaces

---
 src/content/migrate/{3.md => 3.mdx} | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)
 rename src/content/migrate/{3.md => 3.mdx} (96%)

diff --git a/src/content/migrate/3.md b/src/content/migrate/3.mdx
similarity index 96%
rename from src/content/migrate/3.md
rename to src/content/migrate/3.mdx
index 6c6605ed2231..87ed4fdab519 100644
--- a/src/content/migrate/3.md
+++ b/src/content/migrate/3.mdx
@@ -349,7 +349,7 @@ These functions are now always asynchronous instead of calling their callback sy
 
 ## Loader configuration is through `options`
 
-You can *no longer* configure a loader with a custom property in the `webpack.config.js`. It must be done through the `options`. The following configuration with the `ts` property is no longer valid with webpack 2:
+You can _no longer_ configure a loader with a custom property in the `webpack.config.js`. It must be done through the `options`. The following configuration with the `ts` property is no longer valid with webpack 2:
 
 ```js
 module.exports = {
@@ -369,7 +369,7 @@ module.exports = {
 
 ### What are `options`?
 
-Good question. Well, strictly speaking it's 2 possible things; both ways to configure a webpack loader. Classically `options` was called `query` and was a string which could be appended to the name of the loader. Much like a query string but actually with [greater powers](https://github.com/webpack/loader-utils#parsequery):
+Good question. Well, strictly speaking it's 2 possible things; both ways to configure a webpack loader. Classically `options` was called `query` and was a string which could be appended to the name of the loader. Much like a query string but actually with [greater powers](https://github.com/webpack/loader-utils#parsequery):
 
 ```js
 module.exports = {

From 76346faa03539d353256c1cfa6cfe4083f69f8ad Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sun, 8 Aug 2021 20:39:13 +0800
Subject: [PATCH 31/52] rename 4.md

---
 src/content/migrate/{4.md => 4.mdx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/content/migrate/{4.md => 4.mdx} (100%)

diff --git a/src/content/migrate/4.md b/src/content/migrate/4.mdx
similarity index 100%
rename from src/content/migrate/4.md
rename to src/content/migrate/4.mdx

From 5f7f6cccfa37f7bf43214a764e1acb6a17be33a7 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sun, 8 Aug 2021 20:44:25 +0800
Subject: [PATCH 32/52] rename 5.md

---
 src/content/migrate/{5.md => 5.mdx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/content/migrate/{5.md => 5.mdx} (100%)

diff --git a/src/content/migrate/5.md b/src/content/migrate/5.mdx
similarity index 100%
rename from src/content/migrate/5.md
rename to src/content/migrate/5.mdx

From b2d47e4a77159f8834aa545ed5088e70749c687e Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sun, 8 Aug 2021 20:44:36 +0800
Subject: [PATCH 33/52] rename index.md

---
 src/content/migrate/{index.md => index.mdx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/content/migrate/{index.md => index.mdx} (100%)

diff --git a/src/content/migrate/index.md b/src/content/migrate/index.mdx
similarity index 100%
rename from src/content/migrate/index.md
rename to src/content/migrate/index.mdx

From 943ae1c9dcfab3fe47081a52af4ff7152b93aa3c Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sun, 8 Aug 2021 20:58:34 +0800
Subject: [PATCH 34/52] rename blogs

---
 ...10-webpack-5-release.md => 2020-10-10-webpack-5-release.mdx} | 2 +-
 .../{2020-12-08-roadmap-2021.md => 2020-12-08-roadmap-2021.mdx} | 0
 src/content/blog/{index.md => index.mdx}                        | 0
 3 files changed, 1 insertion(+), 1 deletion(-)
 rename src/content/blog/{2020-10-10-webpack-5-release.md => 2020-10-10-webpack-5-release.mdx} (99%)
 rename src/content/blog/{2020-12-08-roadmap-2021.md => 2020-12-08-roadmap-2021.mdx} (100%)
 rename src/content/blog/{index.md => index.mdx} (100%)

diff --git a/src/content/blog/2020-10-10-webpack-5-release.md b/src/content/blog/2020-10-10-webpack-5-release.mdx
similarity index 99%
rename from src/content/blog/2020-10-10-webpack-5-release.md
rename to src/content/blog/2020-10-10-webpack-5-release.mdx
index 4b04ce8238ae..65b0f59fc2aa 100644
--- a/src/content/blog/2020-10-10-webpack-5-release.md
+++ b/src/content/blog/2020-10-10-webpack-5-release.mdx
@@ -96,7 +96,7 @@ Behavior can be changed with `Rule.parser.requireInclude` to allowed, deprecated
 
 ### Automatic Node.js Polyfills Removed
 
-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 <= 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).
+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).
 
 While this makes using modules written for Node.js easier, it adds these huge polyfills to the bundle. In many cases these polyfills are unnecessary.
 
diff --git a/src/content/blog/2020-12-08-roadmap-2021.md b/src/content/blog/2020-12-08-roadmap-2021.mdx
similarity index 100%
rename from src/content/blog/2020-12-08-roadmap-2021.md
rename to src/content/blog/2020-12-08-roadmap-2021.mdx
diff --git a/src/content/blog/index.md b/src/content/blog/index.mdx
similarity index 100%
rename from src/content/blog/index.md
rename to src/content/blog/index.mdx

From 1bebaeff1aa7d6190654120e8cd9cb2c447da892 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sun, 8 Aug 2021 21:08:17 +0800
Subject: [PATCH 35/52] rename api

---
 src/content/api/{cli.md => cli.mdx}                               | 0
 src/content/api/{compilation-object.md => compilation-object.mdx} | 0
 src/content/api/{compiler-hooks.md => compiler-hooks.mdx}         | 0
 ...ntextmodulefactory-hooks.md => contextmodulefactory-hooks.mdx} | 0
 src/content/api/{index.md => index.mdx}                           | 0
 src/content/api/{logging.md => logging.mdx}                       | 0
 ...normalmodulefactory-hooks.md => normalmodulefactory-hooks.mdx} | 0
 src/content/api/{parser.md => parser.mdx}                         | 0
 src/content/api/{plugins.md => plugins.mdx}                       | 0
 src/content/api/{resolvers.md => resolvers.mdx}                   | 0
 10 files changed, 0 insertions(+), 0 deletions(-)
 rename src/content/api/{cli.md => cli.mdx} (100%)
 rename src/content/api/{compilation-object.md => compilation-object.mdx} (100%)
 rename src/content/api/{compiler-hooks.md => compiler-hooks.mdx} (100%)
 rename src/content/api/{contextmodulefactory-hooks.md => contextmodulefactory-hooks.mdx} (100%)
 rename src/content/api/{index.md => index.mdx} (100%)
 rename src/content/api/{logging.md => logging.mdx} (100%)
 rename src/content/api/{normalmodulefactory-hooks.md => normalmodulefactory-hooks.mdx} (100%)
 rename src/content/api/{parser.md => parser.mdx} (100%)
 rename src/content/api/{plugins.md => plugins.mdx} (100%)
 rename src/content/api/{resolvers.md => resolvers.mdx} (100%)

diff --git a/src/content/api/cli.md b/src/content/api/cli.mdx
similarity index 100%
rename from src/content/api/cli.md
rename to src/content/api/cli.mdx
diff --git a/src/content/api/compilation-object.md b/src/content/api/compilation-object.mdx
similarity index 100%
rename from src/content/api/compilation-object.md
rename to src/content/api/compilation-object.mdx
diff --git a/src/content/api/compiler-hooks.md b/src/content/api/compiler-hooks.mdx
similarity index 100%
rename from src/content/api/compiler-hooks.md
rename to src/content/api/compiler-hooks.mdx
diff --git a/src/content/api/contextmodulefactory-hooks.md b/src/content/api/contextmodulefactory-hooks.mdx
similarity index 100%
rename from src/content/api/contextmodulefactory-hooks.md
rename to src/content/api/contextmodulefactory-hooks.mdx
diff --git a/src/content/api/index.md b/src/content/api/index.mdx
similarity index 100%
rename from src/content/api/index.md
rename to src/content/api/index.mdx
diff --git a/src/content/api/logging.md b/src/content/api/logging.mdx
similarity index 100%
rename from src/content/api/logging.md
rename to src/content/api/logging.mdx
diff --git a/src/content/api/normalmodulefactory-hooks.md b/src/content/api/normalmodulefactory-hooks.mdx
similarity index 100%
rename from src/content/api/normalmodulefactory-hooks.md
rename to src/content/api/normalmodulefactory-hooks.mdx
diff --git a/src/content/api/parser.md b/src/content/api/parser.mdx
similarity index 100%
rename from src/content/api/parser.md
rename to src/content/api/parser.mdx
diff --git a/src/content/api/plugins.md b/src/content/api/plugins.mdx
similarity index 100%
rename from src/content/api/plugins.md
rename to src/content/api/plugins.mdx
diff --git a/src/content/api/resolvers.md b/src/content/api/resolvers.mdx
similarity index 100%
rename from src/content/api/resolvers.md
rename to src/content/api/resolvers.mdx

From f0cebea6b24f21693796927797dec826e69be905 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sun, 8 Aug 2021 21:15:54 +0800
Subject: [PATCH 36/52] rename concepts

---
 src/content/concepts/{configuration.md => configuration.mdx}  | 4 +++-
 .../concepts/{dependency-graph.md => dependency-graph.mdx}    | 0
 .../{hot-module-replacement.md => hot-module-replacement.mdx} | 0
 src/content/concepts/{index.md => index.mdx}                  | 0
 src/content/concepts/{manifest.md => manifest.mdx}            | 0
 .../concepts/{module-resolution.md => module-resolution.mdx}  | 0
 src/content/concepts/{modules.md => modules.mdx}              | 0
 src/content/concepts/{output.md => output.mdx}                | 0
 src/content/concepts/{plugins.md => plugins.mdx}              | 0
 src/content/concepts/{targets.md => targets.mdx}              | 0
 .../concepts/{under-the-hood.md => under-the-hood.mdx}        | 0
 src/content/loaders/{index.md => index.mdx}                   | 0
 12 files changed, 3 insertions(+), 1 deletion(-)
 rename src/content/concepts/{configuration.md => configuration.mdx} (98%)
 rename src/content/concepts/{dependency-graph.md => dependency-graph.mdx} (100%)
 rename src/content/concepts/{hot-module-replacement.md => hot-module-replacement.mdx} (100%)
 rename src/content/concepts/{index.md => index.mdx} (100%)
 rename src/content/concepts/{manifest.md => manifest.mdx} (100%)
 rename src/content/concepts/{module-resolution.md => module-resolution.mdx} (100%)
 rename src/content/concepts/{modules.md => modules.mdx} (100%)
 rename src/content/concepts/{output.md => output.mdx} (100%)
 rename src/content/concepts/{plugins.md => plugins.mdx} (100%)
 rename src/content/concepts/{targets.md => targets.mdx} (100%)
 rename src/content/concepts/{under-the-hood.md => under-the-hood.mdx} (100%)
 rename src/content/loaders/{index.md => index.mdx} (100%)

diff --git a/src/content/concepts/configuration.md b/src/content/concepts/configuration.mdx
similarity index 98%
rename from src/content/concepts/configuration.md
rename to src/content/concepts/configuration.mdx
index 4a686fe88439..da52621be9c6 100644
--- a/src/content/concepts/configuration.md
+++ b/src/content/concepts/configuration.mdx
@@ -12,7 +12,9 @@ You may have noticed that few webpack configurations look exactly alike. This is
 
 Because it's a standard Node.js CommonJS module, you **can do the following**:
 
-- import other files via `require(...)`
+- import other files via `require(...)
+
+  `
 - use utilities on npm via `require(...)`
 - use JavaScript control flow expressions, e.g. the `?:` operator
 - use constants or variables for often used values
diff --git a/src/content/concepts/dependency-graph.md b/src/content/concepts/dependency-graph.mdx
similarity index 100%
rename from src/content/concepts/dependency-graph.md
rename to src/content/concepts/dependency-graph.mdx
diff --git a/src/content/concepts/hot-module-replacement.md b/src/content/concepts/hot-module-replacement.mdx
similarity index 100%
rename from src/content/concepts/hot-module-replacement.md
rename to src/content/concepts/hot-module-replacement.mdx
diff --git a/src/content/concepts/index.md b/src/content/concepts/index.mdx
similarity index 100%
rename from src/content/concepts/index.md
rename to src/content/concepts/index.mdx
diff --git a/src/content/concepts/manifest.md b/src/content/concepts/manifest.mdx
similarity index 100%
rename from src/content/concepts/manifest.md
rename to src/content/concepts/manifest.mdx
diff --git a/src/content/concepts/module-resolution.md b/src/content/concepts/module-resolution.mdx
similarity index 100%
rename from src/content/concepts/module-resolution.md
rename to src/content/concepts/module-resolution.mdx
diff --git a/src/content/concepts/modules.md b/src/content/concepts/modules.mdx
similarity index 100%
rename from src/content/concepts/modules.md
rename to src/content/concepts/modules.mdx
diff --git a/src/content/concepts/output.md b/src/content/concepts/output.mdx
similarity index 100%
rename from src/content/concepts/output.md
rename to src/content/concepts/output.mdx
diff --git a/src/content/concepts/plugins.md b/src/content/concepts/plugins.mdx
similarity index 100%
rename from src/content/concepts/plugins.md
rename to src/content/concepts/plugins.mdx
diff --git a/src/content/concepts/targets.md b/src/content/concepts/targets.mdx
similarity index 100%
rename from src/content/concepts/targets.md
rename to src/content/concepts/targets.mdx
diff --git a/src/content/concepts/under-the-hood.md b/src/content/concepts/under-the-hood.mdx
similarity index 100%
rename from src/content/concepts/under-the-hood.md
rename to src/content/concepts/under-the-hood.mdx
diff --git a/src/content/loaders/index.md b/src/content/loaders/index.mdx
similarity index 100%
rename from src/content/loaders/index.md
rename to src/content/loaders/index.mdx

From 5f8bc1abdc67d7fb96bc1236a7a5df3c8472c871 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sun, 8 Aug 2021 21:20:26 +0800
Subject: [PATCH 37/52] fix proselint

---
 src/content/concepts/plugins.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/concepts/plugins.mdx b/src/content/concepts/plugins.mdx
index 3582647142f2..a4c19d321c59 100644
--- a/src/content/concepts/plugins.mdx
+++ b/src/content/concepts/plugins.mdx
@@ -29,7 +29,7 @@ const pluginName = 'ConsoleLogOnBuildWebpackPlugin';
 class ConsoleLogOnBuildWebpackPlugin {
   apply(compiler) {
     compiler.hooks.run.tap(pluginName, (compilation) => {
-      console.log('The webpack build process is starting!!!');
+      console.log('The webpack build process is starting!');
     });
   }
 }

From 90887dd5728b7c872ad6d0a1b59aca379ce1ecd9 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sun, 8 Aug 2021 21:38:37 +0800
Subject: [PATCH 38/52] rename why-webpack.md

---
 src/content/concepts/{why-webpack.md => why-webpack.mdx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/content/concepts/{why-webpack.md => why-webpack.mdx} (100%)

diff --git a/src/content/concepts/why-webpack.md b/src/content/concepts/why-webpack.mdx
similarity index 100%
rename from src/content/concepts/why-webpack.md
rename to src/content/concepts/why-webpack.mdx

From 5c72fffb8a3f872e0085a3027a64ebb039319161 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sun, 8 Aug 2021 21:41:26 +0800
Subject: [PATCH 39/52] rename configuration

---
 .../{configuration-languages.md => configuration-languages.mdx}   | 0
 src/content/configuration/{dev-server.md => dev-server.mdx}       | 0
 src/content/configuration/{devtool.md => devtool.mdx}             | 0
 src/content/configuration/{entry-context.md => entry-context.mdx} | 0
 src/content/configuration/{node.md => node.mdx}                   | 0
 src/content/configuration/{performance.md => performance.mdx}     | 0
 src/content/configuration/{plugins.md => plugins.mdx}             | 0
 src/content/configuration/{target.md => target.mdx}               | 0
 8 files changed, 0 insertions(+), 0 deletions(-)
 rename src/content/configuration/{configuration-languages.md => configuration-languages.mdx} (100%)
 rename src/content/configuration/{dev-server.md => dev-server.mdx} (100%)
 rename src/content/configuration/{devtool.md => devtool.mdx} (100%)
 rename src/content/configuration/{entry-context.md => entry-context.mdx} (100%)
 rename src/content/configuration/{node.md => node.mdx} (100%)
 rename src/content/configuration/{performance.md => performance.mdx} (100%)
 rename src/content/configuration/{plugins.md => plugins.mdx} (100%)
 rename src/content/configuration/{target.md => target.mdx} (100%)

diff --git a/src/content/configuration/configuration-languages.md b/src/content/configuration/configuration-languages.mdx
similarity index 100%
rename from src/content/configuration/configuration-languages.md
rename to src/content/configuration/configuration-languages.mdx
diff --git a/src/content/configuration/dev-server.md b/src/content/configuration/dev-server.mdx
similarity index 100%
rename from src/content/configuration/dev-server.md
rename to src/content/configuration/dev-server.mdx
diff --git a/src/content/configuration/devtool.md b/src/content/configuration/devtool.mdx
similarity index 100%
rename from src/content/configuration/devtool.md
rename to src/content/configuration/devtool.mdx
diff --git a/src/content/configuration/entry-context.md b/src/content/configuration/entry-context.mdx
similarity index 100%
rename from src/content/configuration/entry-context.md
rename to src/content/configuration/entry-context.mdx
diff --git a/src/content/configuration/node.md b/src/content/configuration/node.mdx
similarity index 100%
rename from src/content/configuration/node.md
rename to src/content/configuration/node.mdx
diff --git a/src/content/configuration/performance.md b/src/content/configuration/performance.mdx
similarity index 100%
rename from src/content/configuration/performance.md
rename to src/content/configuration/performance.mdx
diff --git a/src/content/configuration/plugins.md b/src/content/configuration/plugins.mdx
similarity index 100%
rename from src/content/configuration/plugins.md
rename to src/content/configuration/plugins.mdx
diff --git a/src/content/configuration/target.md b/src/content/configuration/target.mdx
similarity index 100%
rename from src/content/configuration/target.md
rename to src/content/configuration/target.mdx

From 2daec817ed87b456cad8947bd44e12f59e9bb681 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sun, 8 Aug 2021 21:45:50 +0800
Subject: [PATCH 40/52] rename contribute

---
 .../{debugging.md => debugging.mdx}           |  0
 .../contribute/{index.md => index.mdx}        | 19 ++++++++++++-------
 ...plugin-patterns.md => plugin-patterns.mdx} |  0
 .../{writers-guide.md => writers-guide.mdx}   |  0
 ...iting-a-loader.md => writing-a-loader.mdx} |  0
 ...iting-a-plugin.md => writing-a-plugin.mdx} |  0
 6 files changed, 12 insertions(+), 7 deletions(-)
 rename src/content/contribute/{debugging.md => debugging.mdx} (100%)
 rename src/content/contribute/{index.md => index.mdx} (94%)
 rename src/content/contribute/{plugin-patterns.md => plugin-patterns.mdx} (100%)
 rename src/content/contribute/{writers-guide.md => writers-guide.mdx} (100%)
 rename src/content/contribute/{writing-a-loader.md => writing-a-loader.mdx} (100%)
 rename src/content/contribute/{writing-a-plugin.md => writing-a-plugin.mdx} (100%)

diff --git a/src/content/contribute/debugging.md b/src/content/contribute/debugging.mdx
similarity index 100%
rename from src/content/contribute/debugging.md
rename to src/content/contribute/debugging.mdx
diff --git a/src/content/contribute/index.md b/src/content/contribute/index.mdx
similarity index 94%
rename from src/content/contribute/index.md
rename to src/content/contribute/index.mdx
index c8c803ae8439..2fc333f1cfb2 100644
--- a/src/content/contribute/index.md
+++ b/src/content/contribute/index.mdx
@@ -13,9 +13,18 @@ contributors:
 The people who contribute to webpack do so for the love of open source, our users and ecosystem, and most importantly, pushing the web forward together. Because of our [Open Collective](https://opencollective.com/webpack) model for funding and transparency, we are able to funnel support and funds through contributors, dependent projects, and the contributor and core teams. To make a donation, click the button below...
 
 <div align="center">
-  <a href="https://opencollective.com/webpack/donate" target="_blank">
-    <img src="https://opencollective.com/webpack/donate/button@2x.png?color=blue" width=300 />
-  </a>
+
+<a
+  href="https://opencollective.com/webpack/donate"
+  target="_blank"
+  rel="noopenner noreferrer"
+>
+  <img
+    src="https://opencollective.com/webpack/donate/button@2x.png?color=blue"
+    width={300}
+  />
+</a>
+
 </div>
 
 But what is the return on the investment?
@@ -52,8 +61,6 @@ The remainder of this section of the site is dedicated to developers such as you
 
 CTO's, VPs, and owners can help too!
 
-<!-- add slides here regarding monetary value/dev time/tooling -->
-
 webpack is an all-in-one tool for bundling your code. It can handle fonts, images, data and more with the help of community-driven plugins and loaders. Having all of your assets be handled by one tool is immensely helpful, as you or your team can spend less time making sure a machine with many moving parts is working correctly and more time building your product.
 
 ### Sponsorship
@@ -69,8 +76,6 @@ You can also encourage your developers to contribute to the ecosystem by open-so
 
 To anyone else who is interested in helping our mission – e.g. venture capitalists, government entities, digital agencies, etc. – we would love for you to work with us, one of the top npm packages, to improve your product! Please don't hesitate to reach out with questions.
 
-<!-- add slides here -->
-
 ## Pull requests
 
 Documentation of webpack features and changes is now being updated as webpack evolves. An automated issue creation integration was established and proven to be effective in the recent years.
diff --git a/src/content/contribute/plugin-patterns.md b/src/content/contribute/plugin-patterns.mdx
similarity index 100%
rename from src/content/contribute/plugin-patterns.md
rename to src/content/contribute/plugin-patterns.mdx
diff --git a/src/content/contribute/writers-guide.md b/src/content/contribute/writers-guide.mdx
similarity index 100%
rename from src/content/contribute/writers-guide.md
rename to src/content/contribute/writers-guide.mdx
diff --git a/src/content/contribute/writing-a-loader.md b/src/content/contribute/writing-a-loader.mdx
similarity index 100%
rename from src/content/contribute/writing-a-loader.md
rename to src/content/contribute/writing-a-loader.mdx
diff --git a/src/content/contribute/writing-a-plugin.md b/src/content/contribute/writing-a-plugin.mdx
similarity index 100%
rename from src/content/contribute/writing-a-plugin.md
rename to src/content/contribute/writing-a-plugin.mdx

From f43ac57344384fa784acddb451d54438cb81b812 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sun, 8 Aug 2021 21:55:56 +0800
Subject: [PATCH 41/52] rename guides

---
 .../guides/{asset-management.md => asset-management.mdx}  | 2 +-
 .../guides/{asset-modules.md => asset-modules.mdx}        | 0
 .../guides/{author-libraries.md => author-libraries.mdx}  | 0
 .../{build-performance.md => build-performance.mdx}       | 0
 src/content/guides/{caching.md => caching.mdx}            | 8 ++++----
 .../guides/{code-splitting.md => code-splitting.mdx}      | 2 +-
 src/content/guides/{csp.md => csp.mdx}                    | 0
 ...dependency-management.md => dependency-management.mdx} | 0
 .../{development-vagrant.md => development-vagrant.mdx}   | 0
 src/content/guides/{development.md => development.mdx}    | 0
 .../guides/{entry-advanced.md => entry-advanced.mdx}      | 0
 ...environment-variables.md => environment-variables.mdx} | 0
 ...t-module-replacement.md => hot-module-replacement.mdx} | 0
 src/content/guides/{index.md => index.mdx}                | 0
 src/content/guides/{installation.md => installation.mdx}  | 0
 src/content/guides/{integrations.md => integrations.mdx}  | 0
 src/content/guides/{lazy-loading.md => lazy-loading.mdx}  | 0
 .../{output-management.md => output-management.mdx}       | 0
 src/content/guides/{production.md => production.mdx}      | 0
 ...web-application.md => progressive-web-application.mdx} | 0
 src/content/guides/{public-path.md => public-path.mdx}    | 0
 src/content/guides/{shimming.md => shimming.mdx}          | 0
 src/content/guides/{tree-shaking.md => tree-shaking.mdx}  | 0
 src/content/guides/{typescript.md => typescript.mdx}      | 0
 24 files changed, 6 insertions(+), 6 deletions(-)
 rename src/content/guides/{asset-management.md => asset-management.mdx} (99%)
 rename src/content/guides/{asset-modules.md => asset-modules.mdx} (100%)
 rename src/content/guides/{author-libraries.md => author-libraries.mdx} (100%)
 rename src/content/guides/{build-performance.md => build-performance.mdx} (100%)
 rename src/content/guides/{caching.md => caching.mdx} (98%)
 rename src/content/guides/{code-splitting.md => code-splitting.mdx} (99%)
 rename src/content/guides/{csp.md => csp.mdx} (100%)
 rename src/content/guides/{dependency-management.md => dependency-management.mdx} (100%)
 rename src/content/guides/{development-vagrant.md => development-vagrant.mdx} (100%)
 rename src/content/guides/{development.md => development.mdx} (100%)
 rename src/content/guides/{entry-advanced.md => entry-advanced.mdx} (100%)
 rename src/content/guides/{environment-variables.md => environment-variables.mdx} (100%)
 rename src/content/guides/{hot-module-replacement.md => hot-module-replacement.mdx} (100%)
 rename src/content/guides/{index.md => index.mdx} (100%)
 rename src/content/guides/{installation.md => installation.mdx} (100%)
 rename src/content/guides/{integrations.md => integrations.mdx} (100%)
 rename src/content/guides/{lazy-loading.md => lazy-loading.mdx} (100%)
 rename src/content/guides/{output-management.md => output-management.mdx} (100%)
 rename src/content/guides/{production.md => production.mdx} (100%)
 rename src/content/guides/{progressive-web-application.md => progressive-web-application.mdx} (100%)
 rename src/content/guides/{public-path.md => public-path.mdx} (100%)
 rename src/content/guides/{shimming.md => shimming.mdx} (100%)
 rename src/content/guides/{tree-shaking.md => tree-shaking.mdx} (100%)
 rename src/content/guides/{typescript.md => typescript.mdx} (100%)

diff --git a/src/content/guides/asset-management.md b/src/content/guides/asset-management.mdx
similarity index 99%
rename from src/content/guides/asset-management.md
rename to src/content/guides/asset-management.mdx
index cecef0f0a49f..d73221f07aad 100644
--- a/src/content/guides/asset-management.md
+++ b/src/content/guides/asset-management.mdx
@@ -13,7 +13,7 @@ contributors:
   - astonizer
 ---
 
-If you've been following the guides from the start, you will now have a small project that shows "Hello webpack". Now let's try to incorporate some other assets, like images, to see how they can be handled.
+If you've been following the guides from the start, you will now have a small project that shows "Hello webpack". Now let's try to incorporate some other assets, like images, to see how they can be handled.
 
 Prior to webpack, front-end developers would use tools like [grunt](https://gruntjs.com/) and [gulp](https://gulpjs.com/) to process these assets and move them from their `/src` folder into their `/dist` or `/build` directory. The same idea was used for JavaScript modules, but tools like webpack will **dynamically bundle** all dependencies (creating what's known as a [dependency graph](/concepts/dependency-graph)). This is great because every module now _explicitly states its dependencies_ and we'll avoid bundling modules that aren't in use.
 
diff --git a/src/content/guides/asset-modules.md b/src/content/guides/asset-modules.mdx
similarity index 100%
rename from src/content/guides/asset-modules.md
rename to src/content/guides/asset-modules.mdx
diff --git a/src/content/guides/author-libraries.md b/src/content/guides/author-libraries.mdx
similarity index 100%
rename from src/content/guides/author-libraries.md
rename to src/content/guides/author-libraries.mdx
diff --git a/src/content/guides/build-performance.md b/src/content/guides/build-performance.mdx
similarity index 100%
rename from src/content/guides/build-performance.md
rename to src/content/guides/build-performance.mdx
diff --git a/src/content/guides/caching.md b/src/content/guides/caching.mdx
similarity index 98%
rename from src/content/guides/caching.md
rename to src/content/guides/caching.mdx
index 368101d05410..ceb3b1ba8fca 100644
--- a/src/content/guides/caching.md
+++ b/src/content/guides/caching.mdx
@@ -52,8 +52,8 @@ webpack-demo
     entry: './src/index.js',
     plugins: [
       new HtmlWebpackPlugin({
--       title: 'Output Management',
-+       title: 'Caching',
+-       title: 'Output Management',
++       title: 'Caching',
       }),
     ],
     output: {
@@ -103,7 +103,7 @@ As we learned in [code splitting](/guides/code-splitting), the [`SplitChunksPlug
     entry: './src/index.js',
     plugins: [
       new HtmlWebpackPlugin({
-        title: 'Caching',
+      title: 'Caching',
       }),
     ],
     output: {
@@ -146,7 +146,7 @@ This can be done by using the [`cacheGroups`](/plugins/split-chunks-plugin/#spli
     entry: './src/index.js',
     plugins: [
       new HtmlWebpackPlugin({
-        title: 'Caching',
+      title: 'Caching',
       }),
     ],
     output: {
diff --git a/src/content/guides/code-splitting.md b/src/content/guides/code-splitting.mdx
similarity index 99%
rename from src/content/guides/code-splitting.md
rename to src/content/guides/code-splitting.mdx
index 29a86afc0d4b..63feda102c59 100644
--- a/src/content/guides/code-splitting.md
+++ b/src/content/guides/code-splitting.mdx
@@ -33,7 +33,7 @@ contributors:
   - chenxsan
   - Adarah
 related:
-  - title: <link rel=”prefetch/preload”> in webpack
+  - title: &lt;link rel="prefetch/preload"&gt; in webpack
     url: https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c
   - title: Preload, Prefetch And Priorities in Chrome
     url: https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf
diff --git a/src/content/guides/csp.md b/src/content/guides/csp.mdx
similarity index 100%
rename from src/content/guides/csp.md
rename to src/content/guides/csp.mdx
diff --git a/src/content/guides/dependency-management.md b/src/content/guides/dependency-management.mdx
similarity index 100%
rename from src/content/guides/dependency-management.md
rename to src/content/guides/dependency-management.mdx
diff --git a/src/content/guides/development-vagrant.md b/src/content/guides/development-vagrant.mdx
similarity index 100%
rename from src/content/guides/development-vagrant.md
rename to src/content/guides/development-vagrant.mdx
diff --git a/src/content/guides/development.md b/src/content/guides/development.mdx
similarity index 100%
rename from src/content/guides/development.md
rename to src/content/guides/development.mdx
diff --git a/src/content/guides/entry-advanced.md b/src/content/guides/entry-advanced.mdx
similarity index 100%
rename from src/content/guides/entry-advanced.md
rename to src/content/guides/entry-advanced.mdx
diff --git a/src/content/guides/environment-variables.md b/src/content/guides/environment-variables.mdx
similarity index 100%
rename from src/content/guides/environment-variables.md
rename to src/content/guides/environment-variables.mdx
diff --git a/src/content/guides/hot-module-replacement.md b/src/content/guides/hot-module-replacement.mdx
similarity index 100%
rename from src/content/guides/hot-module-replacement.md
rename to src/content/guides/hot-module-replacement.mdx
diff --git a/src/content/guides/index.md b/src/content/guides/index.mdx
similarity index 100%
rename from src/content/guides/index.md
rename to src/content/guides/index.mdx
diff --git a/src/content/guides/installation.md b/src/content/guides/installation.mdx
similarity index 100%
rename from src/content/guides/installation.md
rename to src/content/guides/installation.mdx
diff --git a/src/content/guides/integrations.md b/src/content/guides/integrations.mdx
similarity index 100%
rename from src/content/guides/integrations.md
rename to src/content/guides/integrations.mdx
diff --git a/src/content/guides/lazy-loading.md b/src/content/guides/lazy-loading.mdx
similarity index 100%
rename from src/content/guides/lazy-loading.md
rename to src/content/guides/lazy-loading.mdx
diff --git a/src/content/guides/output-management.md b/src/content/guides/output-management.mdx
similarity index 100%
rename from src/content/guides/output-management.md
rename to src/content/guides/output-management.mdx
diff --git a/src/content/guides/production.md b/src/content/guides/production.mdx
similarity index 100%
rename from src/content/guides/production.md
rename to src/content/guides/production.mdx
diff --git a/src/content/guides/progressive-web-application.md b/src/content/guides/progressive-web-application.mdx
similarity index 100%
rename from src/content/guides/progressive-web-application.md
rename to src/content/guides/progressive-web-application.mdx
diff --git a/src/content/guides/public-path.md b/src/content/guides/public-path.mdx
similarity index 100%
rename from src/content/guides/public-path.md
rename to src/content/guides/public-path.mdx
diff --git a/src/content/guides/shimming.md b/src/content/guides/shimming.mdx
similarity index 100%
rename from src/content/guides/shimming.md
rename to src/content/guides/shimming.mdx
diff --git a/src/content/guides/tree-shaking.md b/src/content/guides/tree-shaking.mdx
similarity index 100%
rename from src/content/guides/tree-shaking.md
rename to src/content/guides/tree-shaking.mdx
diff --git a/src/content/guides/typescript.md b/src/content/guides/typescript.mdx
similarity index 100%
rename from src/content/guides/typescript.md
rename to src/content/guides/typescript.mdx

From 2f58c585442a37665b9703c59848bafa962114da Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Mon, 9 Aug 2021 08:12:57 +0800
Subject: [PATCH 42/52] rename branding.md

---
 src/components/BrandingSample.jsx         |  7 +++
 src/content/{branding.md => branding.mdx} | 64 ++++++++++++++++-------
 2 files changed, 51 insertions(+), 20 deletions(-)
 create mode 100644 src/components/BrandingSample.jsx
 rename src/content/{branding.md => branding.mdx} (62%)

diff --git a/src/components/BrandingSample.jsx b/src/components/BrandingSample.jsx
new file mode 100644
index 000000000000..a1f0b81c2564
--- /dev/null
+++ 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/content/branding.md b/src/content/branding.mdx
similarity index 62%
rename from src/content/branding.md
rename to src/content/branding.mdx
index 36b9b91fdc2f..d0369cf6feb2 100644
--- a/src/content/branding.md
+++ b/src/content/branding.mdx
@@ -8,6 +8,8 @@ contributors:
   - byzyk
 ---
 
+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.
 
 ## The Name
@@ -18,7 +20,10 @@ Webpack can be written with a capital W when used at the start of a sentence, ot
 
 The webpack logo should be placed on a white background with enough space around it like this:
 
-<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)
 
@@ -26,8 +31,11 @@ Double the size of the inner dark blue cube to get an idea how much space the lo
 
 For dark backgrounds, you can use the negative version of the 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" />
+<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"
+  />
 </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)
@@ -38,43 +46,59 @@ T> Please use the **icon + text** whenever possible.
 
 **The icon is designed to be used in layout-constrained areas. As previously stated, please prefer icon + text.**
 
-<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)
 
 Square-sized icon for bigger areas (like avatars or profile pictures):
 
-<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)
 
 Square-sized icon for smaller areas (like favicons):
 
-<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> For those of you following our guidelines and have gotten this far, we've made a special smaller size image used especially for custom emoji (like in a slack or gitter channel ;))
 
-<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
 
 The following colors are used throughout the site in various combinations and on our fancy clothing line launched with the help of [Open Collective](https://opencollective.com/) and [Threadless](https://medium.com/u/840563ee2a56) over at the [official webpack store](https://webpack.threadless.com/collections/the-final-release-collection/)!
 
-| Color Name   | HEX Code      | RGB Code             | Sample                                               |
-| ------------ | ------------- | -------------------- | ---------------------------------------------------- |
-| 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> |
+| 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' /> |
 
 In addition, you can grab the following file types directly from these links:
 

From 4abb3a894324416b2d4871dff7a76b6079975cc5 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Mon, 9 Aug 2021 08:27:45 +0800
Subject: [PATCH 43/52] Revert "rename branding.md"

This reverts commit 2f58c585442a37665b9703c59848bafa962114da.
---
 src/components/BrandingSample.jsx         |  7 ---
 src/content/{branding.mdx => branding.md} | 64 +++++++----------------
 2 files changed, 20 insertions(+), 51 deletions(-)
 delete mode 100644 src/components/BrandingSample.jsx
 rename src/content/{branding.mdx => branding.md} (62%)

diff --git a/src/components/BrandingSample.jsx b/src/components/BrandingSample.jsx
deleted file mode 100644
index a1f0b81c2564..000000000000
--- a/src/components/BrandingSample.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-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/content/branding.mdx b/src/content/branding.md
similarity index 62%
rename from src/content/branding.mdx
rename to src/content/branding.md
index d0369cf6feb2..36b9b91fdc2f 100644
--- a/src/content/branding.mdx
+++ b/src/content/branding.md
@@ -8,8 +8,6 @@ contributors:
   - byzyk
 ---
 
-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.
 
 ## The Name
@@ -20,10 +18,7 @@ Webpack can be written with a capital W when used at the start of a sentence, ot
 
 The webpack logo should be placed on a white background with enough space around it like this:
 
-<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)
 
@@ -31,11 +26,8 @@ Double the size of the inner dark blue cube to get an idea how much space the lo
 
 For dark backgrounds, you can use the negative version of the 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"
-  />
+<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" />
 </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)
@@ -46,59 +38,43 @@ T> Please use the **icon + text** whenever possible.
 
 **The icon is designed to be used in layout-constrained areas. As previously stated, please prefer icon + text.**
 
-<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)
 
 Square-sized icon for bigger areas (like avatars or profile pictures):
 
-<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)
 
 Square-sized icon for smaller areas (like favicons):
 
-<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> For those of you following our guidelines and have gotten this far, we've made a special smaller size image used especially for custom emoji (like in a slack or gitter channel ;))
 
-<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
 
 The following colors are used throughout the site in various combinations and on our fancy clothing line launched with the help of [Open Collective](https://opencollective.com/) and [Threadless](https://medium.com/u/840563ee2a56) over at the [official webpack store](https://webpack.threadless.com/collections/the-final-release-collection/)!
 
-| 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' /> |
+| Color Name   | HEX Code      | RGB Code             | Sample                                               |
+| ------------ | ------------- | -------------------- | ---------------------------------------------------- |
+| 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> |
 
 In addition, you can grab the following file types directly from these links:
 

From d256dc374ab92be773562a9c80797aa807fc4146 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Mon, 9 Aug 2021 08:28:38 +0800
Subject: [PATCH 44/52] rename printable.md

---
 .gitignore                      | 2 +-
 package.json                    | 2 +-
 src/components/Site/Site.jsx    | 2 +-
 src/scripts/concatenate-docs.js | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/.gitignore b/.gitignore
index e961bbecbdd5..e1ad0f31030a 100644
--- 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
index cc3a0959efbf..cb2cd4e01f71 100644
--- 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/Site/Site.jsx b/src/components/Site/Site.jsx
index 99d9709d26a5..8c834330f2d9 100644
--- a/src/components/Site/Site.jsx
+++ b/src/components/Site/Site.jsx
@@ -98,7 +98,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/scripts/concatenate-docs.js b/src/scripts/concatenate-docs.js
index 7885ed25d93c..b801dee7fcdb 100644
--- a/src/scripts/concatenate-docs.js
+++ b/src/scripts/concatenate-docs.js
@@ -5,7 +5,7 @@ const front = require('front-matter');
 
 // root path
 const rootPath = path.join('src', 'content');
-const outFileName = 'printable.md';
+const outFileName = 'printable.mdx';
 
 console.info(
   'Concatenating *.md files of each content directory to create chapter-wide help files to be used for printing'

From 20799a8308ff20830b992e42fc188eb618eadec2 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Mon, 9 Aug 2021 08:41:19 +0800
Subject: [PATCH 45/52] Revert "rename printable.md"

This reverts commit d256dc374ab92be773562a9c80797aa807fc4146.
---
 .gitignore                      | 2 +-
 package.json                    | 2 +-
 src/components/Site/Site.jsx    | 2 +-
 src/scripts/concatenate-docs.js | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/.gitignore b/.gitignore
index e1ad0f31030a..e961bbecbdd5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,5 +12,5 @@ package-lock.json
 .cache
 internal-links.tap
 stats.json
-printable.mdx
+printable.md
 repositories/*.json
diff --git a/package.json b/package.json
index cb2cd4e01f71..cc3a0959efbf 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
   },
   "scripts": {
     "clean-dist": "rimraf ./dist",
-    "clean-printable": "rimraf src/content/**/printable.mdx",
+    "clean-printable": "rimraf src/content/**/printable.md",
     "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/Site/Site.jsx b/src/components/Site/Site.jsx
index 8c834330f2d9..99d9709d26a5 100644
--- a/src/components/Site/Site.jsx
+++ b/src/components/Site/Site.jsx
@@ -98,7 +98,7 @@ function Site(props) {
       }))
       .filter(
         (page) =>
-          page.title !== 'printable.mdx' && !page.content.includes('Printable')
+          page.title !== 'printable.md' && !page.content.includes('Printable')
       );
   };
 
diff --git a/src/scripts/concatenate-docs.js b/src/scripts/concatenate-docs.js
index b801dee7fcdb..7885ed25d93c 100644
--- a/src/scripts/concatenate-docs.js
+++ b/src/scripts/concatenate-docs.js
@@ -5,7 +5,7 @@ const front = require('front-matter');
 
 // root path
 const rootPath = path.join('src', 'content');
-const outFileName = 'printable.mdx';
+const outFileName = 'printable.md';
 
 console.info(
   'Concatenating *.md files of each content directory to create chapter-wide help files to be used for printing'

From 194e2661494401906fc58c1a8bcdc453d76e4662 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Mon, 9 Aug 2021 13:15:57 +0800
Subject: [PATCH 46/52] rename index.md

---
 src/components/Site/Site.jsx           |  2 +-
 src/components/Splash/Splash.jsx       |  8 +--
 src/components/Splash/first/left.mdx   |  7 +++
 src/components/Splash/first/right.mdx  |  7 +++
 src/components/Splash/second/left.mdx  | 13 +++++
 src/components/Splash/second/right.mdx | 15 +++++
 src/content/index.md                   | 78 --------------------------
 src/content/index.mdx                  | 37 ++++++++++++
 8 files changed, 82 insertions(+), 85 deletions(-)
 create mode 100644 src/components/Splash/first/left.mdx
 create mode 100644 src/components/Splash/first/right.mdx
 create mode 100644 src/components/Splash/second/left.mdx
 create mode 100644 src/components/Splash/second/right.mdx
 delete mode 100644 src/content/index.md
 create mode 100644 src/content/index.mdx

diff --git a/src/components/Site/Site.jsx b/src/components/Site/Site.jsx
index 99d9709d26a5..bfde423d3cdb 100644
--- 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
index c3280e37803a..eddd096dbf6b 100644
--- 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
new file mode 100644
index 000000000000..72356a89653e
--- /dev/null
+++ 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
new file mode 100644
index 000000000000..d8a33c6f0595
--- /dev/null
+++ 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
new file mode 100644
index 000000000000..657fecab9da0
--- /dev/null
+++ 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
new file mode 100644
index 000000000000..3dc7ff2fbc27
--- /dev/null
+++ 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/index.md b/src/content/index.md
deleted file mode 100644
index 299d8263ec0c..000000000000
--- a/src/content/index.md
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: webpack
-sort: -1
----
-
-## Write Your Code
-
-<div class="splash__wrap">
-<div class="splash__left">
-
-**src/index.js**
-
-```js
-import bar from './bar.js';
-
-bar();
-```
-
-</div>
-<div class="splash__right">
-
-**src/bar.js**
-
-```js
-export default function bar() {
-  //
-}
-```
-
-</div>
-</div>
-
-## Bundle It
-
-<div class="splash__wrap">
-<div class="splash__left">
-
-**[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',
-  },
-};
-```
-
-</div>
-<div class="splash__right">
-
-**page.html**
-
-```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    ...
-  </head>
-  <body>
-    ...
-    <script src="dist/bundle.js"></script>
-  </body>
-</html>
-```
-
-</div>
-</div>
-
-Then run `webpack` on the command-line to create `bundle.js`.
-
-## Awesome isn't it? Let's dive in!
-
-**[Get Started](/guides/getting-started)** quickly in our **Guides** section, or dig into the **[Concepts](/concepts)** section for more high-level information on the core notions behind webpack.
diff --git a/src/content/index.mdx b/src/content/index.mdx
new file mode 100644
index 000000000000..dc98ad7353a4
--- /dev/null
+++ b/src/content/index.mdx
@@ -0,0 +1,37 @@
+---
+title: webpack
+sort: -1
+---
+
+import FirstLeft from '../components/Splash/first/left.mdx';
+import FirstRigth from '../components/Splash/first/right.mdx';
+import SecondLeft from '../components/Splash/second/left.mdx';
+import SecondRight from '../components/Splash/second/right.mdx';
+
+## Write Your Code
+
+<div className="splash__wrap">
+  <div className="splash__left">
+    <FirstLeft />
+  </div>
+  <div className="splash__right">
+    <FirstRigth />
+  </div>
+</div>
+
+## Bundle It
+
+<div className="splash__wrap">
+  <div className="splash__left">
+    <SecondLeft />
+  </div>
+  <div className="splash__right">
+    <SecondRight />
+  </div>
+</div>
+
+Then run `webpack` on the command-line to create `bundle.js`.
+
+## Awesome isn't it? Let's dive in!
+
+**[Get Started](/guides/getting-started)** quickly in our **Guides** section, or dig into the **[Concepts](/concepts)** section for more high-level information on the core notions behind webpack.

From 45a2281f87ce505ec432a9a1d1bda3364c95ee30 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Mon, 9 Aug 2021 19:23:18 +0800
Subject: [PATCH 47/52] Revert "Revert "rename branding.md""

This reverts commit 4abb3a894324416b2d4871dff7a76b6079975cc5.
---
 src/components/BrandingSample.jsx         |  7 +++
 src/content/{branding.md => branding.mdx} | 64 ++++++++++++++++-------
 2 files changed, 51 insertions(+), 20 deletions(-)
 create mode 100644 src/components/BrandingSample.jsx
 rename src/content/{branding.md => branding.mdx} (62%)

diff --git a/src/components/BrandingSample.jsx b/src/components/BrandingSample.jsx
new file mode 100644
index 000000000000..a1f0b81c2564
--- /dev/null
+++ 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/content/branding.md b/src/content/branding.mdx
similarity index 62%
rename from src/content/branding.md
rename to src/content/branding.mdx
index 36b9b91fdc2f..d0369cf6feb2 100644
--- a/src/content/branding.md
+++ b/src/content/branding.mdx
@@ -8,6 +8,8 @@ contributors:
   - byzyk
 ---
 
+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.
 
 ## The Name
@@ -18,7 +20,10 @@ Webpack can be written with a capital W when used at the start of a sentence, ot
 
 The webpack logo should be placed on a white background with enough space around it like this:
 
-<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)
 
@@ -26,8 +31,11 @@ Double the size of the inner dark blue cube to get an idea how much space the lo
 
 For dark backgrounds, you can use the negative version of the 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" />
+<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"
+  />
 </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)
@@ -38,43 +46,59 @@ T> Please use the **icon + text** whenever possible.
 
 **The icon is designed to be used in layout-constrained areas. As previously stated, please prefer icon + text.**
 
-<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)
 
 Square-sized icon for bigger areas (like avatars or profile pictures):
 
-<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)
 
 Square-sized icon for smaller areas (like favicons):
 
-<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> For those of you following our guidelines and have gotten this far, we've made a special smaller size image used especially for custom emoji (like in a slack or gitter channel ;))
 
-<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
 
 The following colors are used throughout the site in various combinations and on our fancy clothing line launched with the help of [Open Collective](https://opencollective.com/) and [Threadless](https://medium.com/u/840563ee2a56) over at the [official webpack store](https://webpack.threadless.com/collections/the-final-release-collection/)!
 
-| Color Name   | HEX Code      | RGB Code             | Sample                                               |
-| ------------ | ------------- | -------------------- | ---------------------------------------------------- |
-| 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> |
+| 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' /> |
 
 In addition, you can grab the following file types directly from these links:
 

From ed7f6f3619005c40ff48d6aba1366b3c6bb82506 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Mon, 9 Aug 2021 19:26:30 +0800
Subject: [PATCH 48/52] extract style

---
 src/content/branding.mdx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/content/branding.mdx b/src/content/branding.mdx
index d0369cf6feb2..14a441009d2d 100644
--- a/src/content/branding.mdx
+++ b/src/content/branding.mdx
@@ -31,7 +31,12 @@ Double the size of the inner dark blue cube to get an idea how much space the lo
 
 For dark backgrounds, you can use the negative version of the logo:
 
-<div style={{ display: 'block', background: '#111' }}>
+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"

From 9a7a3eaa36bfbf653b347c276ccef22cc3d83937 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Mon, 9 Aug 2021 19:34:47 +0800
Subject: [PATCH 49/52] Revert "Revert "rename printable.md""

This reverts commit 20799a8308ff20830b992e42fc188eb618eadec2.
---
 .gitignore                      | 2 +-
 package.json                    | 2 +-
 src/components/Site/Site.jsx    | 2 +-
 src/scripts/concatenate-docs.js | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/.gitignore b/.gitignore
index e961bbecbdd5..e1ad0f31030a 100644
--- 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
index cc3a0959efbf..cb2cd4e01f71 100644
--- 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/Site/Site.jsx b/src/components/Site/Site.jsx
index bfde423d3cdb..3d2817cd0473 100644
--- a/src/components/Site/Site.jsx
+++ b/src/components/Site/Site.jsx
@@ -98,7 +98,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/scripts/concatenate-docs.js b/src/scripts/concatenate-docs.js
index 7885ed25d93c..b801dee7fcdb 100644
--- a/src/scripts/concatenate-docs.js
+++ b/src/scripts/concatenate-docs.js
@@ -5,7 +5,7 @@ const front = require('front-matter');
 
 // root path
 const rootPath = path.join('src', 'content');
-const outFileName = 'printable.md';
+const outFileName = 'printable.mdx';
 
 console.info(
   'Concatenating *.md files of each content directory to create chapter-wide help files to be used for printing'

From 68aaf84d87616fa3a8b718fedb9afb80d69f0c84 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Mon, 9 Aug 2021 19:45:38 +0800
Subject: [PATCH 50/52] Revert "Revert "Revert "rename printable.md"""

This reverts commit 9a7a3eaa36bfbf653b347c276ccef22cc3d83937.
---
 .gitignore                      | 2 +-
 package.json                    | 2 +-
 src/components/Site/Site.jsx    | 2 +-
 src/scripts/concatenate-docs.js | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/.gitignore b/.gitignore
index e1ad0f31030a..e961bbecbdd5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,5 +12,5 @@ package-lock.json
 .cache
 internal-links.tap
 stats.json
-printable.mdx
+printable.md
 repositories/*.json
diff --git a/package.json b/package.json
index cb2cd4e01f71..cc3a0959efbf 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
   },
   "scripts": {
     "clean-dist": "rimraf ./dist",
-    "clean-printable": "rimraf src/content/**/printable.mdx",
+    "clean-printable": "rimraf src/content/**/printable.md",
     "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/Site/Site.jsx b/src/components/Site/Site.jsx
index 3d2817cd0473..bfde423d3cdb 100644
--- a/src/components/Site/Site.jsx
+++ b/src/components/Site/Site.jsx
@@ -98,7 +98,7 @@ function Site(props) {
       }))
       .filter(
         (page) =>
-          page.title !== 'printable.mdx' && !page.content.includes('Printable')
+          page.title !== 'printable.md' && !page.content.includes('Printable')
       );
   };
 
diff --git a/src/scripts/concatenate-docs.js b/src/scripts/concatenate-docs.js
index b801dee7fcdb..7885ed25d93c 100644
--- a/src/scripts/concatenate-docs.js
+++ b/src/scripts/concatenate-docs.js
@@ -5,7 +5,7 @@ const front = require('front-matter');
 
 // root path
 const rootPath = path.join('src', 'content');
-const outFileName = 'printable.mdx';
+const outFileName = 'printable.md';
 
 console.info(
   'Concatenating *.md files of each content directory to create chapter-wide help files to be used for printing'

From e33d6115019388acc4c27dfc28aac3cf1a9f20d0 Mon Sep 17 00:00:00 2001
From: Sam Chen <chenxsan@gmail.com>
Date: Mon, 9 Aug 2021 20:29:25 +0800
Subject: [PATCH 51/52] Update src/content/concepts/configuration.mdx

---
 src/content/concepts/configuration.mdx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/content/concepts/configuration.mdx b/src/content/concepts/configuration.mdx
index da52621be9c6..4a686fe88439 100644
--- a/src/content/concepts/configuration.mdx
+++ b/src/content/concepts/configuration.mdx
@@ -12,9 +12,7 @@ You may have noticed that few webpack configurations look exactly alike. This is
 
 Because it's a standard Node.js CommonJS module, you **can do the following**:
 
-- import other files via `require(...)
-
-  `
+- import other files via `require(...)`
 - use utilities on npm via `require(...)`
 - use JavaScript control flow expressions, e.g. the `?:` operator
 - use constants or variables for often used values

From 72506b187336db4dc0cd8c8a21d82c9881652174 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Tue, 10 Aug 2021 21:04:41 +0800
Subject: [PATCH 52/52] rename to mdx

---
 src/content/{awesome-webpack.md => awesome-webpack.mdx} | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 rename src/content/{awesome-webpack.md => awesome-webpack.mdx} (99%)

diff --git a/src/content/awesome-webpack.md b/src/content/awesome-webpack.mdx
similarity index 99%
rename from src/content/awesome-webpack.md
rename to src/content/awesome-webpack.mdx
index 14d8cfa047b1..ada3e14c132d 100644
--- a/src/content/awesome-webpack.md
+++ b/src/content/awesome-webpack.mdx
@@ -198,7 +198,7 @@ _People passionate about Webpack (In no particular order)_
 - Joseph Zimmerman | 2-Feb-17 - [A Detailed Introduction To Webpack.](https://www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/)
 - Jamund Ferguson | 22-Jul-16 - [Manually Tuning Webpack Builds.](https://medium.com/@xjamundx/manually-tuning-webpack-builds-284923f47f44#.lbvkidezh)
 - Sean T. Larkin | 21-Jul-16 - [Learn and Debug webpack with Chrome Dev Tools!.](https://medium.com/webpack/webpack-bits-learn-and-debug-webpack-with-chrome-dev-tools-da1c5b19554#.gpoentuxe)
-- Raja Rao DV | 10-Apr-16 - [Webpack  —  The Confusing Parts.](https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9#.qmfmplobc)
+- Raja Rao DV | 10-Apr-16 - [Webpack — The Confusing Parts.](https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9#.qmfmplobc)
 - Andrew Ray | 09-Apr-16 - [Webpack: When To Use and Why.](http://blog.andrewray.me/webpack-when-to-use-and-why/)
 - Jonathan Creamer | 25-Feb-16 - [WebPack Code splitting with ES6 and Babel 6.](http://jonathancreamer.com/webpack-code-splitting-with-es6-and-babel-6/)
 - Ilya Zayats | 07-Feb-16 - [How to split your apps by routes with Webpack.](https://medium.com/@somebody32/how-to-split-your-apps-by-routes-with-webpack-36b7a8a6231#.iy99i4f7r)