Merge branch 'master' into next

Author: sokra

src/components/Support/Support.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Backers from './support-backers.json';
 import Additional from './support-additional.js';
+import SmallIcon from '../../assets/icon-square-small-slack.png';
 import './Support.scss';
 
 const SUPPORTERS = [ ...Backers ];
@@ -100,11 +101,11 @@ export default class Support extends React.Component {
                title={ `$${formatMoney(supporter.totalDonations / 100)} by ${supporter.name || supporter.slug}` }
                target="_blank"
                href={ supporter.website || `https://opencollective.com/${supporter.slug}` }>
-              { supporter.avatar ? <img
+              {<img
                 className={ `support__${rank}-avatar` }
-                src={ supporter.avatar }
-                alt={ supporter.name || supporter.slug ? `${supporter.name || supporter.slug}'s avatar` : 'avatar' } /> :
-                <span className={ `support__${rank}-avatar` }>{supporter.name || supporter.slug}</span> }
+                src={ supporter.avatar || SmallIcon }
+                alt={ supporter.name || supporter.slug ? `${supporter.name || supporter.slug}'s avatar` : 'avatar' } 
+                onError={ this._handleImgError } />}
               { rank === 'backer' ? <figure className="support__outline" /> : null }
             </a>
           ))
@@ -118,4 +119,14 @@ export default class Support extends React.Component {
       </div>
     );
   }
+  
+  /**
+   * Handle images that aren't found
+   *
+   * @param {object} e - React synthetic event
+   */
+  _handleImgError(e) {
+    const imgNode = e.target;
+    imgNode.src = SmallIcon;
+  }
 }

src/content/api/cli.md

@@ -109,12 +109,6 @@ Specifies a different [configuration](/configuration) file to pick up. Use this
 webpack --config example.config.js
 ```
 
-**Suppress output of webpack**
-
-```bash
-webpack --silent
-```
-
 **Print result of webpack as a JSON**
 
 ```bash

src/content/concepts/plugins.md

@@ -33,7 +33,7 @@ ConsoleLogOnBuildWebpackPlugin.prototype.apply = function(compiler) {
 };
 ```
 
-T> As a clever JavaScript developer you may remember the `Function.prototype.apply` method. Because of this method you can pass any function as plugin (`this` will point to the `compiler`). You can use this style to inline custom plugins in your configuration.
+T> As a clever JavaScript developer you may remember the [`Function.prototype.apply`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) method. Because of this method you can pass any function as plugin (`this` will point to the `compiler`). You can use this style to inline custom plugins in your configuration.
 
 
 ## Usage

src/content/configuration/stats.md

@@ -62,7 +62,7 @@ stats: {
   // Context directory for request shortening
   context: "../src/",
   // `webpack --colors` equivalent
-  colors: true,
+  colors: false,
   // Display the distance from the entry point for each module
   depth: false,
   // Display the entry points with the corresponding bundles

src/content/contribute/writing-a-loader.md

@@ -98,7 +98,7 @@ Loaders should do only a single task. This not only makes the job of maintaining
 
 ### Chaining
 
-Take advantage of the fact that loaders can be chained together. Instead of writing a single loader that tackles five tasks, write five simpler loaders that divide this effort. Isolating them not only keeps each individual loader simple, but may allow for them to be used for something you hadn't though of originally.
+Take advantage of the fact that loaders can be chained together. Instead of writing a single loader that tackles five tasks, write five simpler loaders that divide this effort. Isolating them not only keeps each individual loader simple, but may allow for them to be used for something you hadn't thought of originally.
 
 Take the case of rendering a template file with data specified via loader options or query parameters. It could be written as a single loader that compiles the template from source, executes it and returns a module that exports a string containing the HTML code. However, in accordance with guidelines, a simple `apply-loader` exists that can be chained with other open source loaders:
 

src/content/guides/author-libraries.md

@@ -307,7 +307,7 @@ Or, to add as standard module as per [this guide](https://github.com/dherman/def
 
 The key `main` refers to the [standard from `package.json`](https://docs.npmjs.com/files/package.json#main), and `module` to [a](https://github.com/dherman/defense-of-dot-js/blob/master/proposal.md) [proposal](https://github.com/rollup/rollup/wiki/pkg.module) to allow the JavaScript ecosystem upgrade to use ES2015 modules without breaking backwards compatibility.
 
-W> The `module` property should point to a script that utilizes ES2015 module syntax but no other syntax features that aren't yet supported by browsers or node. This enables
+W> The `module` property should point to a script that utilizes ES2015 module syntax but no other syntax features that aren't yet supported by browsers or node. This enables webpack to parse the module syntax itself, allowing for lighter bundles via [tree shaking](https://webpack.js.org/guides/tree-shaking/) if users are only consuming certain parts of the library.
 
 Now you can [publish it as an npm package](https://docs.npmjs.com/getting-started/publishing-npm-packages) and find it at [unpkg.com](https://unpkg.com/#/) to distribute it to your users.
 

src/content/guides/csp.md

@@ -0,0 +1,40 @@
+---
+title: Content Security Policies
+sort: 17
+contributors:
+  - EugeneHlushko
+  - probablyup
+related:
+  - title: Nonce purpose explained
+    url: https://stackoverflow.com/questions/42922784/what-s-the-purpose-of-the-html-nonce-attribute-for-script-and-style-elements
+  - title: On the Insecurity of Whitelists and the Future of Content Security Policy
+    url: https://research.google.com/pubs/pub45542.html
+  - title: Locking Down Your Website Scripts with CSP, Hashes, Nonces and Report URI
+    url: https://www.troyhunt.com/locking-down-your-website-scripts-with-csp-hashes-nonces-and-report-uri/
+  - title: CSP on MDN
+    url: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
+---
+
+Webpack is capable of adding `nonce` to all scripts that it loads. To activate the feature set a `__webpack_nonce__` variable needs to be included in your entry script. A unique hash based nonce should be generated and provided for each unique page view this is why `__webpack_nonce__` is specified in the entry file and not in the configuration. Please note that `nonce` should always be a base64-encoded string.
+
+
+## Examples
+
+In the entry file:
+
+``` js
+// ...
+__webpack_nonce__ = 'c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM=';
+// ...
+```
+
+
+## Enabling CSP
+
+Please note that CSPs are not enable by default. A corresponding header `Content-Security-Policy` or meta tag `<meta http-equiv="Content-Security-Policy" ...>` needs to be sent with the document to instruct the browser to enable the CSP. Here's an example of what a CSP header including a CDN white-listed URL might look like:
+
+``` http
+Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com;
+```
+
+For more information on CSP and `nonce` attribute, please refer to __Further Reading__ section at the bottom of this page.

src/content/guides/environment-variables.md

@@ -5,22 +5,23 @@ contributors:
   - simon04
   - grisanu
   - tbroadley
+  - legalcodes
 related:
   - title: The Fine Art of the webpack 3 Config
     url: https://blog.flennik.com/the-fine-art-of-the-webpack-2-config-dc4d19d7f172#d60a
 ---
 
-To disambiguate in your `webpack.config.js` between [development](/guides/development) and [production builds](/guides/production), you may use environment variables.
+To disambiguate in your `webpack.config.js` between [development](/guides/development) and [production builds](/guides/production) you may use environment variables.
 
-The webpack command line [environment option](/api/cli/#environment-options), `--env` allows you to pass in as many environment variables as you like. Environment variables will be made accessible in your `webpack.config.js`. For example, `--env.production` or `--env.NODE_ENV=local` (`NODE_ENV` is conventionally used to define the environment type, see [here](https://dzone.com/articles/what-you-should-know-about-node-env).)
+The webpack command line [environment option](/api/cli/#environment-options) `--env` allows you to pass in as many environment variables as you like. Environment variables will be made accessible in your `webpack.config.js`. For example, `--env.production` or `--env.NODE_ENV=local` (`NODE_ENV` is conventionally used to define the environment type, see [here](https://dzone.com/articles/what-you-should-know-about-node-env).)
 
 ```bash
 webpack --env.NODE_ENV=local --env.production --progress
 ```
 
 T> Setting up your `env` variable without assignment, `--env.production` sets `--env.production` to `true` by default. There are also other syntaxes that you can use. See the [webpack CLI](/api/cli/#environment-options) documentation for more information.
 
-There is, however a change that you will have to make to your webpack config. Typically, in your webpack config `module.exports` points to the configuration object. To use the `env` variable, you must convert `module.exports` to a function:
+There is one change that you will have to make to your webpack config. Typically, `module.exports` points to the configuration object. To use the `env` variable, you must convert `module.exports` to a function:
 
 __webpack.config.js__
 

src/content/guides/lazy-loading.md

@@ -108,3 +108,4 @@ Many frameworks and libraries have their own recommendations on how this should
 
 - React: [Code Splitting and Lazy Loading](https://reacttraining.com/react-router/web/guides/code-splitting)
 - Vue: [Lazy Load in Vue using Webpack's code splitting](https://alexjoverm.github.io/2017/07/16/Lazy-load-in-Vue-using-Webpack-s-code-splitting/)
+- AngularJS: [AngularJS + Webpack = lazyLoad](https://medium.com/@var_bin/angularjs-webpack-lazyload-bb7977f390dd) by [@var_bincom](https://twitter.com/var_bincom)

src/content/plugins/commons-chunk-plugin.md

@@ -149,7 +149,7 @@ Similar to the above one, but instead of moving common modules into the parent (
 new webpack.optimize.CommonsChunkPlugin({
   name: "app",
   // or
-  names: ["app", "subPageA"]
+  names: ["app", "subPageA"],
   // the name or list of names must match the name or names
   // of the entry points that create the async chunks
 
@@ -255,5 +255,5 @@ Since the `vendor` and `manifest` chunk use a different definition for `minChunk
 ## More Examples
 
 - [Common and Vendor Chunks](https://github.com/webpack/webpack/tree/master/examples/common-chunk-and-vendor-chunk)
-- [Multiple Common Chunks](https://github.com/webpack/webpack/tree/master/examples/multiple-commons-chunks)
-- [Multiple Entry Points with Commons Chunk](https://github.com/webpack/webpack/tree/master/examples/multiple-entry-points-commons-chunk-css-bundle)
+- [Multiple Common Chunks](https://github.com/webpack/webpack/tree/8b888fedfaeaac6bd39168c0952cc19e6c34280a/examples/multiple-commons-chunks)
+- [Multiple Entry Points with Commons Chunk](https://github.com/webpack/webpack/tree/8b888fedfaeaac6bd39168c0952cc19e6c34280a/examples/multiple-entry-points-commons-chunk-css-bundle)

src/content/plugins/source-map-dev-tool-plugin.md

@@ -3,6 +3,7 @@ title: SourceMapDevToolPlugin
 contributors:
   - johnnyreilly
   - simon04
+  - neilkennedy
 related:
   - title: Building Source Maps
     url: https://survivejs.com/webpack/building/source-maps/#-sourcemapdevtoolplugin-and-evalsourcemapdevtoolplugin-
@@ -39,6 +40,7 @@ The `fileContext` option is useful when you want to store source maps in an uppe
 
 T> Setting `module` and/or `columns` to `false` will yield less accurate source maps but will also improve compilation performance significantly.
 
+W> Remember that when using the [`UglifyJSPlugin`](/plugins/uglify-js-plugin), you must utilize the `sourceMap` option.
 
 ## Examples