webpack · chenxsan · Aug 10, 2021 · Jul 24, 2021 · Jul 24, 2021 · Jul 24, 2021
diff --git a/src/components/BrandingSample.jsx b/src/components/BrandingSample.jsx
@@ -0,0 +1,7 @@
+import PropTypes from 'prop-types';
+BrandingSample.propTypes = {
+  color: PropTypes.string.isRequired,
+};
+export default function BrandingSample({ color }) {
+  return <div style={{ backgroundColor: color }}>&nbsp;</div>;
+}
diff --git a/src/components/Site/Site.jsx b/src/components/Site/Site.jsx
@@ -77,7 +77,7 @@ function Site(props) {
    */
   const _strip = (array) => {
     let anchorTitleIndex = array.findIndex(
-      (item) => item.name.toLowerCase() === 'index.md'
+      (item) => item.name.toLowerCase() === 'index.mdx'
     );
 
     if (anchorTitleIndex !== -1) {

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

diff --git a/src/components/Splash/first/left.mdx b/src/components/Splash/first/left.mdx
@@ -0,0 +1,7 @@
+**src/index.js**
+
+```js
+import bar from './bar.js';
+
+bar();
+```
diff --git a/src/components/Splash/first/right.mdx b/src/components/Splash/first/right.mdx
@@ -0,0 +1,7 @@
+**src/bar.js**
+
+```js
+export default function bar() {
+  //
+}
+```
diff --git a/src/components/Splash/second/left.mdx b/src/components/Splash/second/left.mdx
@@ -0,0 +1,13 @@
+**[Without config](https://youtu.be/3Nv9muOkb6k?t=21293)** or provide custom **webpack.config.js**
+
+```js
+const path = require('path');
+
+module.exports = {
+  entry: './src/index.js',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'bundle.js',
+  },
+};
+```
diff --git a/src/components/Splash/second/right.mdx b/src/components/Splash/second/right.mdx
@@ -0,0 +1,15 @@
+**page.html**
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    ...
+  </head>
+  <body>
+    ...
+    <script src="dist/bundle.js"></script>
+  </body>
+</html>
+```
diff --git a/src/content/api/cli.md → src/content/api/cli.mdx b/src/content/api/cli.md → src/content/api/cli.mdx
diff --git a/src/content/api/compilation-object.md → src/content/api/compilation-object.mdx b/src/content/api/compilation-object.md → src/content/api/compilation-object.mdx
diff --git a/src/content/api/compiler-hooks.md → src/content/api/compiler-hooks.mdx b/src/content/api/compiler-hooks.md → src/content/api/compiler-hooks.mdx
diff --git a/...content/api/contextmodulefactory-hooks.md → ...ontent/api/contextmodulefactory-hooks.mdx b/...content/api/contextmodulefactory-hooks.md → ...ontent/api/contextmodulefactory-hooks.mdx
diff --git a/src/content/api/index.md → src/content/api/index.mdx b/src/content/api/index.md → src/content/api/index.mdx
diff --git a/src/content/api/logging.md → src/content/api/logging.mdx b/src/content/api/logging.md → src/content/api/logging.mdx
diff --git a/src/content/api/normalmodulefactory-hooks.md → ...content/api/normalmodulefactory-hooks.mdx b/src/content/api/normalmodulefactory-hooks.md → ...content/api/normalmodulefactory-hooks.mdx
diff --git a/src/content/api/parser.md → src/content/api/parser.mdx b/src/content/api/parser.md → src/content/api/parser.mdx
diff --git a/src/content/api/plugins.md → src/content/api/plugins.mdx b/src/content/api/plugins.md → src/content/api/plugins.mdx
diff --git a/src/content/api/resolvers.md → src/content/api/resolvers.mdx b/src/content/api/resolvers.md → src/content/api/resolvers.mdx
diff --git a/...tent/blog/2020-10-10-webpack-5-release.md → ...ent/blog/2020-10-10-webpack-5-release.mdx b/...tent/blog/2020-10-10-webpack-5-release.md → ...ent/blog/2020-10-10-webpack-5-release.mdx
@@ -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 → src/content/blog/2020-12-08-roadmap-2021.mdx b/src/content/blog/2020-12-08-roadmap-2021.md → src/content/blog/2020-12-08-roadmap-2021.mdx
diff --git a/src/content/blog/index.md → src/content/blog/index.mdx b/src/content/blog/index.md → src/content/blog/index.mdx
diff --git a/src/content/branding.md → src/content/branding.mdx b/src/content/branding.md → src/content/branding.mdx
@@ -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,16 +20,27 @@ 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)
 
 Double the size of the inner dark blue cube to get an idea how much space the logo should have.
 
 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" />
+export const style = {
+  display: 'block',
+  background: '#111',
+};
+
+<div style={style}>
+  <img
+    src="https://raw.githubusercontent.com/webpack/media/master/logo/logo-on-dark-bg.png"
+    alt="webpack logo default with proper spacing on light background"
+  />
 </div>
 
 [svg](https://github.com/webpack/media/blob/master/logo/logo-on-dark-bg.svg) | [png](https://github.com/webpack/media/blob/master/logo/logo-on-dark-bg.png) | [jpg](https://github.com/webpack/media/blob/master/logo/logo-on-dark-bg.jpg)
@@ -38,43 +51,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:
 

diff --git a/src/content/comparison.md → src/content/comparison.mdx b/src/content/comparison.md → src/content/comparison.mdx
diff --git a/src/content/concepts/configuration.md → src/content/concepts/configuration.mdx b/src/content/concepts/configuration.md → src/content/concepts/configuration.mdx
@@ -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 → src/content/concepts/dependency-graph.mdx b/src/content/concepts/dependency-graph.md → src/content/concepts/dependency-graph.mdx
diff --git a/...ontent/concepts/hot-module-replacement.md → ...ntent/concepts/hot-module-replacement.mdx b/...ontent/concepts/hot-module-replacement.md → ...ntent/concepts/hot-module-replacement.mdx
diff --git a/src/content/concepts/index.md → src/content/concepts/index.mdx b/src/content/concepts/index.md → src/content/concepts/index.mdx
diff --git a/src/content/concepts/manifest.md → src/content/concepts/manifest.mdx b/src/content/concepts/manifest.md → src/content/concepts/manifest.mdx
diff --git a/src/content/concepts/module-resolution.md → src/content/concepts/module-resolution.mdx b/src/content/concepts/module-resolution.md → src/content/concepts/module-resolution.mdx
diff --git a/src/content/concepts/modules.md → src/content/concepts/modules.mdx b/src/content/concepts/modules.md → src/content/concepts/modules.mdx
diff --git a/src/content/concepts/output.md → src/content/concepts/output.mdx b/src/content/concepts/output.md → src/content/concepts/output.mdx
diff --git a/src/content/concepts/plugins.md → src/content/concepts/plugins.mdx b/src/content/concepts/plugins.md → src/content/concepts/plugins.mdx
@@ -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!');
     });
   }
 }

diff --git a/src/content/concepts/targets.md → src/content/concepts/targets.mdx b/src/content/concepts/targets.md → src/content/concepts/targets.mdx
diff --git a/src/content/concepts/under-the-hood.md → src/content/concepts/under-the-hood.mdx b/src/content/concepts/under-the-hood.md → src/content/concepts/under-the-hood.mdx
diff --git a/src/content/concepts/why-webpack.md → src/content/concepts/why-webpack.mdx b/src/content/concepts/why-webpack.md → src/content/concepts/why-webpack.mdx
diff --git a/.../configuration/configuration-languages.md → ...configuration/configuration-languages.mdx b/.../configuration/configuration-languages.md → ...configuration/configuration-languages.mdx
diff --git a/src/content/configuration/dev-server.md → src/content/configuration/dev-server.mdx b/src/content/configuration/dev-server.md → src/content/configuration/dev-server.mdx
diff --git a/src/content/configuration/devtool.md → src/content/configuration/devtool.mdx b/src/content/configuration/devtool.md → src/content/configuration/devtool.mdx
diff --git a/src/content/configuration/entry-context.md → src/content/configuration/entry-context.mdx b/src/content/configuration/entry-context.md → src/content/configuration/entry-context.mdx
diff --git a/src/content/configuration/node.md → src/content/configuration/node.mdx b/src/content/configuration/node.md → src/content/configuration/node.mdx
diff --git a/src/content/configuration/performance.md → src/content/configuration/performance.mdx b/src/content/configuration/performance.md → src/content/configuration/performance.mdx
diff --git a/src/content/configuration/plugins.md → src/content/configuration/plugins.mdx b/src/content/configuration/plugins.md → src/content/configuration/plugins.mdx
diff --git a/src/content/configuration/target.md → src/content/configuration/target.mdx b/src/content/configuration/target.md → src/content/configuration/target.mdx
diff --git a/src/content/contribute/debugging.md → src/content/contribute/debugging.mdx b/src/content/contribute/debugging.md → src/content/contribute/debugging.mdx
diff --git a/src/content/contribute/index.md → src/content/contribute/index.mdx b/src/content/contribute/index.md → 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/[email protected]?color=blue" width=300 />
-  </a>
+
+<a
+  href="https://opencollective.com/webpack/donate"
+  target="_blank"
+  rel="noopenner noreferrer"
+>
+  <img
+    src="https://opencollective.com/webpack/donate/[email protected]?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 → src/content/contribute/plugin-patterns.mdx b/src/content/contribute/plugin-patterns.md → src/content/contribute/plugin-patterns.mdx
diff --git a/src/content/contribute/writers-guide.md → src/content/contribute/writers-guide.mdx b/src/content/contribute/writers-guide.md → src/content/contribute/writers-guide.mdx
diff --git a/src/content/contribute/writing-a-loader.md → src/content/contribute/writing-a-loader.mdx b/src/content/contribute/writing-a-loader.md → src/content/contribute/writing-a-loader.mdx
diff --git a/src/content/contribute/writing-a-plugin.md → src/content/contribute/writing-a-plugin.mdx b/src/content/contribute/writing-a-plugin.md → src/content/contribute/writing-a-plugin.mdx
diff --git a/src/content/glossary.md → src/content/glossary.mdx b/src/content/glossary.md → src/content/glossary.mdx
diff --git a/src/content/guides/asset-management.md → src/content/guides/asset-management.mdx b/src/content/guides/asset-management.md → 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 → src/content/guides/asset-modules.mdx b/src/content/guides/asset-modules.md → src/content/guides/asset-modules.mdx
diff --git a/src/content/guides/author-libraries.md → src/content/guides/author-libraries.mdx b/src/content/guides/author-libraries.md → src/content/guides/author-libraries.mdx
diff --git a/src/content/guides/build-performance.md → src/content/guides/build-performance.mdx b/src/content/guides/build-performance.md → src/content/guides/build-performance.mdx
diff --git a/src/content/guides/caching.md → src/content/guides/caching.mdx b/src/content/guides/caching.md → 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 → src/content/guides/code-splitting.mdx b/src/content/guides/code-splitting.md → 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 → src/content/guides/csp.mdx b/src/content/guides/csp.md → src/content/guides/csp.mdx
diff --git a/src/content/guides/dependency-management.md → src/content/guides/dependency-management.mdx b/src/content/guides/dependency-management.md → src/content/guides/dependency-management.mdx
diff --git a/src/content/guides/development-vagrant.md → src/content/guides/development-vagrant.mdx b/src/content/guides/development-vagrant.md → src/content/guides/development-vagrant.mdx
diff --git a/src/content/guides/development.md → src/content/guides/development.mdx b/src/content/guides/development.md → src/content/guides/development.mdx
diff --git a/src/content/guides/entry-advanced.md → src/content/guides/entry-advanced.mdx b/src/content/guides/entry-advanced.md → src/content/guides/entry-advanced.mdx
diff --git a/src/content/guides/environment-variables.md → src/content/guides/environment-variables.mdx b/src/content/guides/environment-variables.md → src/content/guides/environment-variables.mdx
diff --git a/src/content/guides/hot-module-replacement.md → ...content/guides/hot-module-replacement.mdx b/src/content/guides/hot-module-replacement.md → ...content/guides/hot-module-replacement.mdx
diff --git a/src/content/guides/index.md → src/content/guides/index.mdx b/src/content/guides/index.md → src/content/guides/index.mdx
diff --git a/src/content/guides/installation.md → src/content/guides/installation.mdx b/src/content/guides/installation.md → src/content/guides/installation.mdx
diff --git a/src/content/guides/integrations.md → src/content/guides/integrations.mdx b/src/content/guides/integrations.md → src/content/guides/integrations.mdx
diff --git a/src/content/guides/lazy-loading.md → src/content/guides/lazy-loading.mdx b/src/content/guides/lazy-loading.md → src/content/guides/lazy-loading.mdx
diff --git a/src/content/guides/output-management.md → src/content/guides/output-management.mdx b/src/content/guides/output-management.md → src/content/guides/output-management.mdx
diff --git a/src/content/guides/production.md → src/content/guides/production.mdx b/src/content/guides/production.md → src/content/guides/production.mdx
diff --git a/...ent/guides/progressive-web-application.md → ...nt/guides/progressive-web-application.mdx b/...ent/guides/progressive-web-application.md → ...nt/guides/progressive-web-application.mdx
diff --git a/src/content/guides/public-path.md → src/content/guides/public-path.mdx b/src/content/guides/public-path.md → src/content/guides/public-path.mdx
diff --git a/src/content/guides/shimming.md → src/content/guides/shimming.mdx b/src/content/guides/shimming.md → src/content/guides/shimming.mdx
diff --git a/src/content/guides/tree-shaking.md → src/content/guides/tree-shaking.mdx b/src/content/guides/tree-shaking.md → src/content/guides/tree-shaking.mdx
diff --git a/src/content/guides/typescript.md → src/content/guides/typescript.mdx b/src/content/guides/typescript.md → src/content/guides/typescript.mdx
diff --git a/src/content/index.md b/src/content/index.md