Merge branch 'master' into add-default-ignored-value

Author: EslamHiko

.github/FUNDING.yml

@@ -0,0 +1,2 @@
+open_collective: webpack
+

.gitignore

@@ -9,4 +9,5 @@ npm-debug.log
 yarn-error.log
 package-lock.json
 .cache
-internal-links.tap
+internal-links.tap
+stats.json

README.md

@@ -1,61 +1,59 @@
 # webpack.js.org
 
-[![Build Status][13]][10]
-[![Standard Version][12]][11]
+[![Build Status][build-status]][build-status-url]
+[![Standard Version][release]][release-url]
+[![chat on gitter][chat]][chat-url]
 
 Guides, documentation, and all things webpack.
 
-
 ## Content Progress
 
 Now that we've covered much of the backlog of _missing documentation_, we are
 starting to heavily review each section of the site's content to sort and
 structure it appropriately. The following issues should provide a pretty good
 idea of where things are, and where they are going:
 
-- [Guides - Review and Simplify][1]
-- [Concepts - Review and Organize][2]
-- [API - v4 Rewrite][8]
+- [Guides - Review and Simplify][guides-url]
+- [Concepts - Review and Organize][concepts-url]
+- [API - v4 Rewrite][api-url]
 
 We haven't created issues for the other sections yet, but they will be coming
-soon. For dev-related work please see [General - Updates & Fixes][3].
-
+soon. For dev-related work please see [General - Updates & Fixes][general-url].
 
 ## Translation
 
-To help translate this documentation please jump to the [translate branch][4].
-
+To help translate this documentation please jump to the [translate branch][translate-url].
 
 ## Contributing
 
-Read through the [writer's guide][7] if you're interested in editing the
-content on this site. See the [contributors page][5] to learn how to set up and
+Read through the [writer's guide][writer-guide-url] if you're interested in editing the
+content on this site. See the [contributors page][contributing-url] to learn how to set up and
 start working on the site locally.
 
-
 ## License
 
-The content is available under the [Creative Commons BY 4.0][6] license.
-
+The content is available under the [Creative Commons BY 4.0][license-url] license.
 
 ## Special Thanks
 
 _BrowserStack_ has graciously allowed us to do cross-browser and cross-os
 testing of the site at no cost...
 
-[![BrowserStackLogo](./browserstack-logo.png)][9]
-
-
-[1]: https://github.com/webpack/webpack.js.org/issues/1258
-[2]: https://github.com/webpack/webpack.js.org/issues/1386
-[3]: https://github.com/webpack/webpack.js.org/issues/1525
-[4]: https://github.com/webpack/webpack.js.org/tree/translation
-[5]: https://github.com/webpack/webpack.js.org/blob/master/.github/CONTRIBUTING.md
-[6]: https://creativecommons.org/licenses/by/4.0/
-[7]: https://webpack.js.org/writers-guide
-[8]: https://github.com/webpack/webpack.js.org/pull/1754
-[9]: http://browserstack.com/
-[10]: http://travis-ci.org/webpack/webpack.js.org
-[11]: https://github.com/conventional-changelog/standard-version
-[12]: https://img.shields.io/badge/release-standard%20version-brightgreen.svg
-[13]: https://secure.travis-ci.org/webpack/webpack.js.org.svg
+[![BrowserStackLogo][browserstack]][browserstack-url]
+
+[api-url]: https://github.com/webpack/webpack.js.org/pull/1754
+[build-status]: https://secure.travis-ci.org/webpack/webpack.js.org.svg
+[build-status-url]: http://travis-ci.org/webpack/webpack.js.org
+[browserstack]: ./browserstack-logo.png
+[browserstack-url]: http://browserstack.com/
+[chat]: https://badges.gitter.im/webpack/webpack.svg
+[chat-url]: https://gitter.im/webpack/webpack
+[concepts-url]: https://github.com/webpack/webpack.js.org/issues/1386
+[contributing-url]: https://github.com/webpack/webpack.js.org/blob/master/.github/CONTRIBUTING.md
+[general-url]: https://github.com/webpack/webpack.js.org/issues/1525
+[guides-url]: https://github.com/webpack/webpack.js.org/issues/1258
+[license-url]: https://creativecommons.org/licenses/by/4.0/
+[release]: https://img.shields.io/badge/release-standard%20version-brightgreen.svg
+[release-url]: https://github.com/conventional-changelog/standard-version
+[translate-url]: https://github.com/webpack/webpack.js.org/tree/translation
+[writer-guide-url]: https://webpack.js.org/contribute/writers-guide

package.json

@@ -30,13 +30,14 @@
     "update-repos": "node src/utilities/fetch-package-repos.js",
     "content": "node src/scripts/build-content-tree.js ./src/content ./src/_content.json",
     "build-test": "npm run build && http-server dist/",
+    "bundle-analyze": "run-s clean fetch content && cross-env NODE_ENV=production webpack --config webpack.ssg.js && cross-env NODE_ENV=production webpack --config webpack.prod.js  --profile --json > stats.json && webpack-bundle-analyzer stats.json",
     "fetch": "run-p fetch:*",
     "fetch:readmes": "node src/utilities/fetch-package-readmes.js",
     "fetch:supporters": "node src/utilities/fetch-supporters.js",
     "fetch:starter-kits": "node src/utilities/fetch-starter-kits.js",
     "prebuild": "npm run clean",
     "build": "run-s fetch content && cross-env NODE_ENV=production webpack --config webpack.ssg.js && cross-env NODE_ENV=production webpack --config webpack.prod.js",
-    "postbuild": "npm run sitemap",
+    "postbuild": "bundlesize && npm run sitemap",
     "test": "npm run lint",
     "lint": "run-s lint:*",
     "lint:js": "eslint src --ext .js,.jsx,.md --cache true --cache-location .cache/.eslintcache",
@@ -62,6 +63,12 @@
       "npm run lint:markdown"
     ]
   },
+  "bundlesize": [
+    {
+      "path": "./dist/index.bundle.js",
+      "maxSize": "200 kB"
+    }
+  ],
   "devDependencies": {
     "@mdx-js/loader": "0.15.7",
     "@mdx-js/mdx": "0.15.7",
@@ -76,6 +83,7 @@
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
+    "bundlesize": "^0.17.1",
     "copy-webpack-plugin": "4.5.2",
     "cross-env": "5.2.0",
     "css-loader": "^0.28.10",
@@ -135,6 +143,7 @@
     "through2": "^2.0.3",
     "uglifyjs-webpack-plugin": "^1.1.6",
     "webpack": "^4.30.0",
+    "webpack-bundle-analyzer": "^3.3.2",
     "webpack-cli": "^3.2.3",
     "webpack-dev-server": "^3.2.1",
     "webpack-merge": "^4.1.0"

src/components/Page/Page.jsx

@@ -5,7 +5,7 @@ import React from 'react';
 import PageLinks from '../PageLinks/PageLinks';
 import Markdown from '../Markdown/Markdown';
 import Contributors from '../Contributors/Contributors';
-import Placeholder from '../Placeholder/Placeholder';
+import {PlaceholderString} from '../Placeholder/Placeholder';
 import Configuration from '../Configuration/Configuration';
 
 // Load Styling
@@ -19,7 +19,7 @@ class Page extends React.Component {
     const isDynamicContent = content instanceof Promise;
 
     this.state = {
-      content: isDynamicContent ? Placeholder() : content.default || content,
+      content: isDynamicContent ? PlaceholderString() : content.default || content,
       contentLoaded: isDynamicContent ? false : true
     };
   }

src/components/Placeholder/Placeholder.js

@@ -1,8 +1,10 @@
+import React from 'react';
+
 // Import Styling
 import './Placeholder.scss';
 
 // Placeholder string
-const Placeholder = () => (`
+const PlaceholderString = () => (`
   <div class="placeholder">
     <p class="placeholder__medium">&nbsp;</p>
     <p class="placeholder__large">&nbsp;</p>
@@ -22,4 +24,17 @@ const Placeholder = () => (`
   </div>
 `);
 
-export default Placeholder;
+function PlaceholderComponent() {
+  return (
+    <div className="placeholder">
+      <p>&nbsp;</p>
+      <p>&nbsp;</p>
+      <p>&nbsp;</p>
+    </div>
+  );
+}
+
+export {
+  PlaceholderString,
+  PlaceholderComponent
+};

src/components/Splash/Splash.jsx

@@ -5,7 +5,7 @@ import React from 'react';
 import Container from '../Container/Container';
 import SplashViz from '../SplashViz/SplashViz';
 import Markdown from '../Markdown/Markdown';
-import Support from '../Support/Support';
+import {PlaceholderComponent} from '../Placeholder/Placeholder';
 
 // Import helpers
 import isClient from '../../utilities/is-client';
@@ -16,6 +16,8 @@ import SplashContent from '../../content/index.md';
 // Load Styling
 import './Splash.scss';
 
+const Support = React.lazy(() => import('../Support/Support'));
+
 const Splash = () => (
   <div className="splash">
     <SplashViz />
@@ -42,7 +44,7 @@ const Splash = () => (
           </p>
 
           { isClient ? (
-            <React.Fragment>
+            <React.Suspense fallback={<PlaceholderComponent />}>
               <h2>Latest Sponsors</h2>
               <Support rank="latest" />
 
@@ -60,7 +62,7 @@ const Splash = () => (
 
               <h2>Backers</h2>
               <Support rank="backer" />
-            </React.Fragment>
+            </React.Suspense>
           ) : null }
         </Markdown>
       </Container>

src/components/StarterKits/StarterKits.jsx

@@ -1,15 +1,18 @@
 import React from 'react';
 import Container from '../Container/Container';
 import Link from '../Link/Link';
-import Kits from './_starter-kits.json';
+import {PlaceholderComponent} from '../Placeholder/Placeholder';
 import './StarterKits.scss';
+import isClient from '../../utilities/is-client';
 
 // NOTE: The table classes used in this component correspond to
 // those used in the markdown utility. Ideally we will soon create
 // a table component that both the markdown utility and this page
 // can use. This component could even use something like griddle
 // to allow sorting and such.
 
+const StarterKitsTable = React.lazy(() => import('./StarterKitsTable'));
+
 const StarterKits = props => (
   <Container className="starter-kits page__content markdown">
     <h1>Starter Kits</h1>
@@ -42,30 +45,11 @@ const StarterKits = props => (
             <div className="table-th">Tags</div>
           </div>
         </div>
-        <div className="table-body">
-          { Kits.map((kit, i) => (
-            <div className="table-tr" key={ i }>
-              <div className="table-td">
-                <div className="table-td-title">Project Name</div>
-                <div className="table-td-content">
-                  <Link to={ kit.githubUrl }>{ kit.githubRepoName }</Link>
-                </div>
-              </div>
-              <div className="table-td">
-                <div className="table-td-title">Maintainer</div>
-                <div className="table-td-content">{ kit.githubUserName }</div>
-              </div>
-              <div className="table-td">
-                <div className="table-td-title">Tags</div>
-                <div className="table-td-content">
-                  { kit.tags.map((tag, i) => (
-                    <span key={ i } className="starter-kits__tag">{ tag }</span>
-                  )) }
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
+        { isClient ? (
+          <React.Suspense fallback={<PlaceholderComponent />}>
+            <StarterKitsTable />
+          </React.Suspense>) : null
+        }
       </div>
     </div>
   </Container>

src/components/StarterKits/StarterKitsTable.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import Kits from './_starter-kits.json';
+import Link from '../Link/Link';
+
+const StarterKitsTable = props => (
+    <div className="table-body">
+    { Kits.map((kit, i) => (
+      <div className="table-tr" key={ i }>
+        <div className="table-td">
+          <div className="table-td-title">Project Name</div>
+          <div className="table-td-content">
+            <Link to={ kit.githubUrl }>{ kit.githubRepoName }</Link>
+          </div>
+        </div>
+        <div className="table-td">
+          <div className="table-td-title">Maintainer</div>
+          <div className="table-td-content">{ kit.githubUserName }</div>
+        </div>
+        <div className="table-td">
+          <div className="table-td-title">Tags</div>
+          <div className="table-td-content">
+            { kit.tags.map((tag, i) => (
+              <span key={ i } className="starter-kits__tag">{ tag }</span>
+            )) }
+          </div>
+        </div>
+      </div>
+    ))}
+  </div>
+);
+
+export default StarterKitsTable;

src/components/Support/Support.jsx

@@ -144,7 +144,7 @@ export default class Support extends React.Component {
 
           {
             supporters.map((supporter, index) => (
-              <a key={ supporter.id || supporter.slug || index }
+              <a key={ supporter.slug || index }
                 className="support__item"
                 title={ `$${formatMoney(supporter.totalDonations / 100)} by ${supporter.name || supporter.slug}` }
                 target="_blank"

src/content/api/loaders.md

@@ -436,6 +436,13 @@ Emit a file. This is webpack-specific.
 Access to the `compilation`'s `inputFileSystem` property.
 
 
+### `this.mode`
+
+Read in which [`mode`](/configuration/mode/) webpack is running.
+
+Possible values: `'production'`, `'development'`, `'none'`
+
+
 ## Deprecated context properties
 
 W> The usage of these properties is highly discouraged since we are planning to remove them from the context. They are still listed here for documentation purposes.