Merge branch 'master' into docs/dev-server-sock-port

Author: EugeneHlushko

.github/PULL_REQUEST_TEMPLATE.md

@@ -7,4 +7,4 @@ _describe your changes..._
 
 
 [1]: https://cla.js.foundation/webpack/webpack.js.org
-[2]: https://webpack.js.org/writers-guide/
+[2]: https://webpack.js.org/contribute/writers-guide/

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

@@ -35,7 +35,7 @@
     "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.prod.js",
+    "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",
     "test": "npm run lint",
     "lint": "run-s lint:*",
@@ -45,7 +45,7 @@
     "lint:prose": "cp .proselintrc ~/ && proselint src/content",
     "lint:links": "hyperlink -r dist/index.html --canonicalroot https://webpack.js.org/ -i --todo https://img.shields.io --todo https://codecov.io/gh --todo 'content-type-mismatch https://travis-ci.org' --todo 'Asset is used as both Html and Image' | tee internal-links.tap | tap-spot",
     "linkcheck": "hyperlink -r dist/index.html --canonicalroot https://webpack.js.org/ --skip support__ --skip sidecar.gitter.im --skip vimdoc.sourceforge.net --skip img.shields.io --skip npmjs.com/package/ --skip opencollective.com/webpack --todo external-redirect | tee external-links.tap | tap-spot",
-    "sitemap": "cd dist && sitemap-static --prefix=https://webpack.js.org/ > sitemap.xml",
+    "sitemap": "cd dist && sitemap-static --pretty --prefix=https://webpack.js.org/ > sitemap.xml",
     "serve": "npm run build && sirv start ./dist --port 4000",
     "deploy": "gh-pages -d dist"
   },
@@ -109,6 +109,7 @@
     "modularscale-sass": "^3.0.3",
     "node-sass": "^4.5.3",
     "npm-run-all": "^4.1.1",
+    "offline-plugin": "^5.0.7",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "postcss-loader": "^2.1.3",
     "redirect-webpack-plugin": "^0.1.1",

src/assets/PWA/images/icons/icon-128x128.png

@@ -4,8 +4,12 @@
 
 .gitter {
   position: fixed;
-  right: 1.5em;
+  right: 1em;
   bottom: 3em;
+
+  @include break {
+    right: 1.5em;
+  }
 }
 
 .gitter__button {

src/assets/PWA/images/icons/icon-144x144.png

@@ -6,7 +6,7 @@ import Shield from '../Shield/Shield';
 import SidebarItem from '../SidebarItem/SidebarItem';
 
 // Load Styling
-import '../Sidebar/Sidebar.scss';
+import './Sidebar.scss';
 
 // Create and export the component
 export default ({

src/assets/PWA/images/icons/icon-152x152.png

@@ -31,6 +31,11 @@ import './Site.scss';
 // Load Content Tree
 import Content from '../../_content.json';
 
+// call offline plugin so it can build
+if (isClient) {
+  require('offline-plugin/runtime').install();
+}
+
 class Site extends React.Component {
   state = {
     mobileSidebarOpen: false
@@ -77,6 +82,7 @@ class Site extends React.Component {
                   <Route path="/vote" component={Vote} />
                   <Route path="/organization" component={Organization} />
                   <Route path="/starter-kits" component={StarterKits} />
+                  <Route path="/app-shell" component={() => <React.Fragment />} />
                   {pages.map(page => (
                     <Route
                       key={page.url}

src/assets/PWA/images/icons/icon-192x192.png

@@ -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/assets/PWA/images/icons/icon-384x384.png

@@ -14,6 +14,7 @@ contributors:
   - EugeneHlushko
   - wizardofhogwarts
   - lukasgeiter
+  - furkle
 ---
 
 Loaders are transformations that are applied on the source code of a module. They allow you to pre-process files as you `import` or “load” them. Thus, loaders are kind of like “tasks” in other build tools and provide a powerful way to handle front-end build steps. Loaders can transform files from a different language (like TypeScript) to JavaScript or inline images as data URLs. Loaders even allow you to do things like `import` CSS files directly from your JavaScript modules!
@@ -94,7 +95,25 @@ It's possible to specify loaders in an `import` statement, or any [equivalent "i
 import Styles from 'style-loader!css-loader?modules!./styles.css';
 ```
 
-It's possible to override any loaders in the configuration by prefixing the entire rule with `!`.
+It's possible to override any loaders, preLoaders and postLoaders from the [configuration](/configuration) by prefixing the inline `import` statement:
+
+- Prefixing with `!` will disable all configured normal loaders
+
+```js
+import Styles from '!style-loader!css-loader?modules!./styles.css';
+```
+
+- Prefixing with `!!` will disable all configured loaders (preLoaders, loaders, postLoaders)
+
+```js
+import Styles from '!!style-loader!css-loader?modules!./styles.css';
+```
+
+- Prefixing with `-!` will disable all configured preLoaders and loaders but not postLoaders
+
+```js
+import Styles from '-!style-loader!css-loader?modules!./styles.css';
+```
 
 Options can be passed with a query parameter, e.g. `?key=value&foo=bar`, or a JSON object, e.g. `?{"key":"value","foo":"bar"}`.
 
@@ -130,4 +149,4 @@ functions (loaders). Users now have more flexibility to include fine-grained log
 
 Loaders follow the standard [module resolution](/concepts/module-resolution/). In most cases it will be loaded from the [module path](/concepts/module-resolution/#module-paths) (think `npm install`, `node_modules`).
 
-A loader module is expected to export a function and be written in Node.js compatible JavaScript. They are most commonly managed with npm, but you can also have custom loaders as files within your application. By convention, loaders are usually named `xxx-loader` (e.g. `json-loader`). See ["How to Write a Loader?"](/development/how-to-write-a-loader) for more information.
+A loader module is expected to export a function and be written in Node.js compatible JavaScript. They are most commonly managed with npm, but you can also have custom loaders as files within your application. By convention, loaders are usually named `xxx-loader` (e.g. `json-loader`). See ["Writing a Loader"](/contribute/writing-a-loader/) for more information.

src/assets/PWA/images/icons/icon-512x512.png

@@ -977,3 +977,20 @@ module.exports = {
 ```
 
 will name the AMD module of the UMD build. Otherwise an anonymous `define` is used.
+
+## `output.futureEmitAssets`
+
+`boolean: false`
+
+Tells webpack to use the future version of asset emitting logic, which allows freeing memory of assets after emitting. It could break plugins which assume that assets are still readable after they were emitted. 
+
+W> `output.futureEmitAssets` option will be removed in webpack v5.0.0 and this behaviour will become the new default.
+
+```javascript
+module.exports = {
+  //...
+  output: {
+    futureEmitAssets: true
+  }
+};
+```

src/assets/PWA/images/icons/icon-72x72.png

@@ -217,7 +217,7 @@ which is what enables users to leave off the extension when importing:
 import File from '../path/to/file';
 ```
 
-W> Using this will __override the default array__, meaning that webpack will no longer try to resolve modules using the default extensions. For modules that are imported with their extension, e.g. `import SomeFile from './somefile.ext'`, to be properly resolved, a string containing "\*" must be included in the array.
+W> Using this will __override the default array__, meaning that webpack will no longer try to resolve modules using the default extensions.
 
 
 ### `resolve.mainFields`

src/assets/PWA/images/icons/icon-96x96.png

@@ -33,13 +33,14 @@ module.exports = {
 };
 ```
 
-| Preset | Alternative | Description |
-|--------|-------------|-------------|
-| `"errors-only"` | _none_  | Only output when errors happen |
-| `"minimal"`     | _none_  | Only output when errors or new compilation happen |
-| `"none"`        | `false` | Output nothing |
-| `"normal"`      | `true`  | Standard output |
-| `"verbose"`     | _none_  | Output everything |
+| Preset              | Alternative | Description                                       |
+|---------------------|-------------|---------------------------------------------------|
+| `"errors-only"`     | _none_      | Only output when errors happen                    |
+| `"errors-warnings"` | _none_      | Only output errors and warnings happen            |
+| `"minimal"`         | _none_      | Only output when errors or new compilation happen |
+| `"none"`            | `false`     | Output nothing                                    |
+| `"normal"`          | `true`      | Standard output                                   |
+| `"verbose"`         | _none_      | Output everything                                 |
 
 For more granular control, it is possible to specify exactly what information you want. Please note that all of the options in this object are optional.
 
@@ -146,6 +147,9 @@ module.exports = {
     // Show dependencies and origin of warnings/errors (since webpack 2.5.0)
     moduleTrace: true,
 
+    // Show outputPath
+    outputPath: true | false,
+
     // Show performance hint when file size exceeds `performance.maxAssetSize`
     performance: true,
 

src/components/Gitter/Gitter.scss

@@ -331,7 +331,7 @@ T> Using webpackPreload incorrectly can actually hurt performance, so be careful
 Once you start splitting your code, it can be useful to analyze the output to check where modules have ended up. The [official analyze tool](https://github.com/webpack/analyse) is a good place to start. There are some other community-supported options out there as well:
 
 - [webpack-chart](https://alexkuz.github.io/webpack-chart/): Interactive pie chart for webpack stats.
-- [webpack-visualizer](https://chrisbateman.github.io/webpack-visualizer/): Visualize and analyze your bundles to see which modules are taking up space and which are might be duplicates.
+- [webpack-visualizer](https://chrisbateman.github.io/webpack-visualizer/): Visualize and analyze your bundles to see which modules are taking up space and which might be duplicates.
 - [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer): A plugin and CLI utility that represents bundle content as a convenient interactive zoomable treemap.
 - [webpack bundle optimize helper](https://webpack.jakoblind.no/optimize): This tool will analyze your bundle and give you actionable suggestions on what to improve to reduce your bundle size.
 

src/components/Sidebar/Sidebar.jsx

@@ -1,8 +1,9 @@
 ---
 title: License
-sort: 4
+sort: 5
 contributors:
   - EugeneHlushko
+  - pranshuchittora
 ---
 
 ## webpack

src/components/Site/Site.jsx

@@ -157,7 +157,7 @@ The algorithm is deterministic and changes to the modules will only have local i
 
 When the chunk has a name already, each part will get a new name derived from that name. Depending on the value of `optimization.splitChunks.hidePathInfo` it will add a key derived from the first module name or a hash of it.
 
-`maxSize` options is intended to be used with HTTP/2 and long term caching. It increase the request count for better caching. It could also be used to decrease the file size for faster rebuilding.
+`maxSize` option is intended to be used with HTTP/2 and long term caching. It increases the request count for better caching. It could also be used to decrease the file size for faster rebuilding.
 
 T> `maxSize` takes higher priority than `maxInitialRequest/maxAsyncRequests`. Actual priority is `maxInitialRequest/maxAsyncRequests < maxSize < minSize`.
 

src/components/Support/Support.jsx

@@ -0,0 +1,6 @@
+---
+title: Vote
+sort: 4
+contributors:
+  - pranshuchittora
+---

src/content/concepts/loaders.mdx

@@ -20,6 +20,12 @@ const bundles = [
   '/index.bundle.js'
 ];
 
+// As github pages uses trailing slash, we need to provide it to canonicals for consistency
+// between canonical href and final url served by github pages.
+function enforceTrailingSlash (url) {
+  return url.replace(/\/?$/, '/');
+}
+
 // Export method for `SSGPlugin`
 export default locals => {
   let { assets } = locals.webpackStats.compilation;
@@ -49,6 +55,10 @@ export default locals => {
             <link key={ path } rel="stylesheet" href={ `/${path}` } />
           ))}
           <link rel="manifest" href="/manifest.json" />
+          <link rel="canonical" href={`https://webpack.js.org${enforceTrailingSlash(locals.path)}`} />
+          <link rel="apple-touch-icon" href="/images/icons/icon-192x192.png" />
+          <link rel="apple-touch-icon" sizes="152x152" href="/images/icons/icon-152x152.png" />
+          <link rel="icon" sizes="192x192" href="/images/icons/icon-192x192.png" />
         </head>
         <body>
           <div id="root">

src/content/configuration/output.md

@@ -3,4 +3,5 @@
   src: url('../assets/geomanist-medium.woff2') format('woff2'), url('../assets/geomanist-medium.woff') format('woff');
   font-weight: 600;
   font-style: normal;
+  font-display: swap;
 }

src/content/configuration/resolve.md

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:400,600|Source+Sans+Pro:400,400i,600');
+@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:400,600|Source+Sans+Pro:400,400i,600&display=swap');
 
 @import 'vars';
 @import 'fonts';