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
 
; +} 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 = () => {
-
+
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 + + + + + ... + + + ... + + + +``` 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 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) 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 <= 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 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..14a441009d2d 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: -webpack logo default with proper spacing on light background +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,16 @@ 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: -
- webpack logo default with proper spacing on light background +export const style = { + display: 'block', + background: '#111', +}; + +
+ webpack logo default with proper spacing on light background
[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.** -icon example +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): -icon square big example +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): -icon square small example +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 ;)) -icon square small example +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` |
 
| -| Denim: | HEX `#1d78c1` | `rgb: 29, 120, 193` |
 
| -| Fiord: | HEX `#465E69` | `rgb: 70, 94, 105` |
 
| -| Outer Space: | HEX `#2B3A42` | `rgb: 43, 58, 66` |
 
| -| White: | HEX `#ffffff` | `rgb: 255, 255, 255` |
 
| -| Concrete: | HEX `#f2f2f2` | `rgb: 242, 242, 242` |
 
| -| Alto: | HEX `#dedede` | `rgb: 222, 222, 222` |
 
| -| Dusty Gray: | HEX `#999999` | `rgb: 153, 153, 153` |
 
| -| Dove Gray: | HEX `#666666` | `rgb: 102, 102, 102` |
 
| -| Emperor: | HEX `#535353` | `rgb: 83, 83, 83` |
 
| -| Mine Shaft: | HEX `#333333` | `rgb: 51, 51, 51` |
 
| +| Color Name | HEX Code | RGB Code | Sample | +| ------------ | ------------- | -------------------- | ---------------------------------- | +| Malibu: | HEX `#8dd6f9` | `rgb: 141, 214, 249` | | +| Denim: | HEX `#1d78c1` | `rgb: 29, 120, 193` | | +| Fiord: | HEX `#465E69` | `rgb: 70, 94, 105` | | +| Outer Space: | HEX `#2B3A42` | `rgb: 43, 58, 66` | | +| White: | HEX `#ffffff` | `rgb: 255, 255, 255` | | +| Concrete: | HEX `#f2f2f2` | `rgb: 242, 242, 242` | | +| Alto: | HEX `#dedede` | `rgb: 222, 222, 222` | | +| Dusty Gray: | HEX `#999999` | `rgb: 153, 153, 153` | | +| Dove Gray: | HEX `#666666` | `rgb: 102, 102, 102` | | +| Emperor: | HEX `#535353` | `rgb: 83, 83, 83` | | +| Mine Shaft: | HEX `#333333` | `rgb: 51, 51, 51` | | In addition, you can grab the following file types directly from these links: 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 diff --git a/src/content/concepts/configuration.md b/src/content/concepts/configuration.mdx similarity index 100% rename from src/content/concepts/configuration.md rename to src/content/concepts/configuration.mdx 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 98% rename from src/content/concepts/plugins.md rename to src/content/concepts/plugins.mdx index 3582647142f2..a4c19d321c59 100644 --- a/src/content/concepts/plugins.md +++ 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!'); }); } } 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/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 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 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...
- - - + + + + +
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! - - 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. - - ## 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 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 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: in webpack + - title: <link rel="prefetch/preload"> 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 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 - -
-
- -**src/index.js** - -```js -import bar from './bar.js'; - -bar(); -``` - -
-
- -**src/bar.js** - -```js -export default function bar() { - // -} -``` - -
-
- -## Bundle It - -
-
- -**[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', - }, -}; -``` - -
-
- -**page.html** - -```html - - - - - ... - - - ... - - - -``` - -
-
- -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 + +
+
+ +
+
+ +
+
+ +## Bundle It + +
+
+ +
+
+ +
+
+ +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/license.md b/src/content/license.mdx similarity index 100% rename from src/content/license.md rename to src/content/license.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 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 = { 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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