Merge branch 'master' into rebuild

# Conflicts:
#	src/content/configuration/index.md
#	src/content/configuration/resolve.md
#	yarn.lock

Author: EugeneHlushko

src/content/api/compiler-hooks.md

@@ -81,7 +81,7 @@ Runs a plugin before the environment is prepared.
 
 `SyncHook`
 
-Executes a plugin a environment setup is complete.
+Executes a plugin after the environment setup is complete.
 
 
 ### `beforeRun`

src/content/api/loaders.md

@@ -6,6 +6,9 @@ contributors:
   - jhnns
   - tbroadley
   - byzyk
+  - sokra
+  - EugeneHlushko
+  - jantimon
 ---
 
 A loader is just a JavaScript module that exports a function. The [loader runner](https://github.com/webpack/loader-runner) calls this function and passes the result of the previous loader or the resource file into it. The `this` context of the function is filled-in by webpack and the [loader runner](https://github.com/webpack/loader-runner) with some useful methods that allow the loader (among other things) to change its invocation style to async, or get query parameters.
@@ -565,3 +568,64 @@ As you can see below, not only error message, but also details about which loade
 W> The loader path in the error is displayed since webpack 4.12
 
 T> All the errors and warnings will be recorded into `stats`. Please see [Stats Data](/api/stats/#errors-and-warnings).
+
+
+### Inline matchResource
+
+A new inline request syntax was introduced in webpack v4. Prefixing `<match-resource>!=!` to a request will set the `matchResource` for this request.
+
+W> It is not recommended to use this syntax in application code.
+Inline request syntax is intended to only be used by loader generated code.
+Not following this recommendation will make your code webpack-specific and non-standard.
+
+T> A relative `matchResource` will resolve relative to the current context of the containing module.
+
+When a `matchResource` is set, it will be used to match with the [`module.rules`](/configuration/module/#module-rules) instead of the original resource. This can be useful if further loaders should be applied to the resource, or if the module type need to be changed. It's also displayed in the stats and used for matching [`Rule.issuer`](/configuration/module/#rule-issuer) and [`test` in `splitChunks`](/plugins/split-chunks-plugin/#splitchunks-cachegroups-cachegroup-test).
+
+Example:
+
+__file.js__
+
+```javascript
+/* STYLE: body { background: red; } */
+console.log('yep');
+```
+
+A loader could transform the file into the following file and use the `matchResource` to apply the user-specified CSS processing rules:
+
+__file.js__ (transformed by loader)
+
+```javascript
+import './file.js.css!=!extract-style-loader/getStyles!./file.js';
+console.log('yep');
+```
+
+This will add a dependency to `extract-style-loader/getStyles!./file.js` and treat the result as `file.js.css`. Because [`module.rules`](/configuration/module/#module-rules) has a rule matching `/\.css$/` and it will apply to this dependency.
+
+The loader could look like this:
+
+__extract-style-loader/index.js__
+
+```javascript
+const stringifyRequest = require('loader-utils').stringifyRequest;
+const getRemainingRequest = require('loader-utils').getRemainingRequest;
+const getStylesLoader = require.resolve('./getStyle');
+
+module.exports = function (source) {
+  if (STYLES_REGEXP.test(source)) {
+    source = source.replace(STYLES_REGEXP, '');
+    const remReq = getRemainingRequest(this);
+    return `import ${stringifyRequest(`${this.resource}.css!=!${getStylesLoader}!${remReq}`)};${source}`;
+  }
+  return source;
+};
+```
+
+__extract-style-loader/getStyles.js__
+
+```javascript
+module.exports = function(source) {
+  const match = STYLES_REGEXP.match(source);
+  return match[0];
+};
+```

src/content/api/stats.mdx

@@ -134,7 +134,7 @@ What good would these statistics be without some description of the compiled app
   ],
   "errors": 0, // Number of errors when resolving or processing the module
   "failed": false, // Whether or not compilation failed on this module
-  "id": 0, // The ID of the module (analagous to [`module.id`](/api/module-variables#module-id-commonjs-))
+  "id": 0, // The ID of the module (analogous to [`module.id`](/api/module-variables#module-id-commonjs-))
   "identifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // A unique ID used internally
   "name": "./lib/index.web.js", // Path to the actual file
   "optional": false, // All requests to this module are with `try... catch` blocks (irrelevant with ESM)

src/content/concepts/entry-points.md

@@ -67,7 +67,7 @@ Below is a list of entry configurations and their real-world use cases:
 
 ### Separate App and Vendor Entries
 
-T> In webpack version < 4 it was common to add vendors as separate entrypoint to compile it as separate file (in combination with the `CommonsChunkPlugin`). This is discouraged in webpack 4. Instead the `optimization.splitChunks` option takes care of separating vendors and app modules and creating a separate file. __Do not__ create a entry for vendors or other stuff which is not the starting point of execution.
+T> In webpack version < 4 it was common to add vendors as separate entrypoint to compile it as separate file (in combination with the `CommonsChunkPlugin`). This is discouraged in webpack 4. Instead the `optimization.splitChunks` option takes care of separating vendors and app modules and creating a separate file. __Do not__ create an entry for vendors or other stuff which is not the starting point of execution.
 
 ### Multi Page Application
 

src/content/concepts/index.md

@@ -35,7 +35,7 @@ To get started you only need to understand its __Core Concepts__:
 
 This document is intended to give a __high-level__ overview of these concepts, while providing links to detailed concept specific use cases.
 
-For a better understanding of the ideas behind module bundlers and how they work under the hood consult these resources:
+For a better understanding of the ideas behind module bundlers and how they work under the hood, consult these resources:
 
 - [Manually Bundling an Application](https://www.youtube.com/watch?v=UNMkLHzofQI)
 - [Live Coding a Simple Module Bundler](https://www.youtube.com/watch?v=Gc9-7PBqOC8)

src/content/concepts/mode.md

@@ -42,7 +42,7 @@ Option                | Description
 `production`          | Sets `process.env.NODE_ENV` on `DefinePlugin` to value `production`. Enables `FlagDependencyUsagePlugin`, `FlagIncludedChunksPlugin`, `ModuleConcatenationPlugin`, `NoEmitOnErrorsPlugin`, `OccurrenceOrderPlugin`, `SideEffectsFlagPlugin` and `TerserPlugin`.
 `none`                | Opts out of any default optimization options
 
-If not set, webpack sets `production` as the default value for `mode`. The supported values for mode are:
+If not set, webpack sets `production` as the default value for `mode`.
 
 T> Please remember that setting `NODE_ENV` doesn't automatically set `mode`.
 

src/content/configuration/configuration-languages.md

@@ -84,11 +84,13 @@ __package.json__
 ```json
 {
   "scripts": {
-    "build": "TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack"
+    "build": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack"
   }
 }
 ```
 
+W> We had been getting reports that `TS_NODE_PROJECT` might not work with `"TS_NODE_PROJECT" unrecognized command` error. Therefore running it with `cross-env` seems to fix the issue, for more info [see this issue](https://github.com/webpack/webpack.js.org/issues/2733).
+
 
 ## CoffeeScript
 

src/content/configuration/externals.md

@@ -12,7 +12,7 @@ contributors:
 
 The `externals` configuration option provides a way of excluding dependencies from the output bundles. Instead, the created bundle relies on that dependency to be present in the consumer's environment. This feature is typically most useful to __library developers__, however there are a variety of applications for it.
 
-T> __consumer__ here is any end user application that includes the library that you have bundled using webpack.
+T> __consumer__ here is any end-user application that includes the library that you have bundled using webpack.
 
 
 ## `externals`
@@ -117,7 +117,7 @@ This syntax is used to describe all the possible ways that an external library c
 
 ### function
 
-It might be useful to define your own function to control the behavior of what you want to externalize from webpack. [webpack-node-externals](https://www.npmjs.com/package/webpack-node-externals), for example, excludes all modules from the `node_modules` directory and provides some options to, for example, whitelist packages.
+It might be useful to define your own function to control the behavior of what you want to externalize from webpack. [webpack-node-externals](https://www.npmjs.com/package/webpack-node-externals), for example, excludes all modules from the `node_modules` directory and provides some options too, for example, whitelist packages.
 
 It basically comes down to this:
 
@@ -149,7 +149,7 @@ module.exports = {
 };
 ```
 
-In this case any dependency named `jQuery`, capitalized or not, or `$` would be externalized.
+In this case, any dependency named `jQuery`, capitalized or not, or `$` would be externalized.
 
 ### Combining syntaxes
 

src/content/configuration/module.md

@@ -19,7 +19,7 @@ These options determine how the [different types of modules](/concepts/modules)
 
 ## `module.noParse`
 
-`RegExp | [RegExp] | function | string | [string]`
+`RegExp` `[RegExp]` `function(resource)` `string` `[string]`
 
 Prevent webpack from parsing any files matching the given regular expression(s). Ignored files __should not__ have calls to `import`, `require`, `define` or any other importing mechanism. This can boost build performance when ignoring large libraries.
 
@@ -308,25 +308,16 @@ module.exports = {
 
 ## `Rule.use`
 
-`[UseEntry] | function`
+`[UseEntry]` `function(info)`
+
+__`[UseEntry]`__
 
 `Rule.use` can be an array of [UseEntry](#useentry) which are applied to modules. Each entry specifies a loader to be used.
 
 Passing a string (i.e. `use: [ 'style-loader' ]`) is a shortcut to the loader property (i.e. `use: [ { loader: 'style-loader '} ]`).
 
 Loaders can be chained by passing multiple loaders, which will be applied from right to left (last to first configured).
 
-`Rule.use` can be a function which receives the object argument describing the module being loaded, and must return an array of `UseEntry`.
-
-The object parameter has the following fields:
-
-- `compiler`: The current webpack compiler (can be undefined)
-- `issuer`: The path to the module that is importing the module being loaded
-- `realResource`: Always the path to the module being loaded
-- `resource`: The path to the module being loaded, it is usually equal to `realResource` except when the resource name is overwritten via `!=!` in request string
-
-The same shortcut as an array can be used for the return value (i.e. `use: [ 'style-loader' ]`).
-
 __webpack.config.js__
 
 ```javascript
@@ -357,6 +348,46 @@ module.exports = {
 };
 ```
 
+__`function(info)`__
+
+`Rule.use` can also be a function which receives the object argument describing the module being loaded, and must return an array of `UseEntry` items.
+
+The `info` object parameter has the following fields:
+
+- `compiler`: The current webpack compiler (can be undefined)
+- `issuer`: The path to the module that is importing the module being loaded
+- `realResource`: Always the path to the module being loaded
+- `resource`: The path to the module being loaded, it is usually equal to `realResource` except when the resource name is overwritten via `!=!` in request string
+
+The same shortcut as an array can be used for the return value (i.e. `use: [ 'style-loader' ]`).
+
+__webpack.config.js__
+
+```javascript
+module.exports = {
+  //...
+  module: {
+    rules: [
+      {
+        use: (info) => ([
+          {
+            loader: 'custom-svg-loader'
+          },
+          {
+            loader: 'svgo-loader',
+            options: {
+              plugins: [{
+                cleanupIDs: { prefix: basename(info.resource) }
+              }]
+            }
+          }
+        ])
+      }
+    ]
+  }
+};
+```
+
 See [UseEntry](#useentry) for details.
 
 
@@ -404,14 +435,20 @@ module.exports = {
 
 ## `UseEntry`
 
-`object`
+`object` `function(info)`
+
+__`object`__
 
 It must have a `loader` property being a string. It is resolved relative to the configuration [`context`](/configuration/entry-context#context) with the loader resolving options ([resolveLoader](/configuration/resolve#resolveloader)).
 
 It can have an `options` property being a string or object. This value is passed to the loader, which should interpret it as loader options.
 
 For compatibility a `query` property is also possible, which is an alias for the `options` property. Use the `options` property instead.
 
+Note that webpack needs to generate a unique module identifier from the resource and all loaders including options. It tries to do this with a `JSON.stringify` of the options object. This is fine in 99.9% of cases, but may be not unique if you apply the same loaders with different options to the resource and the options have some stringified values.
+
+It also breaks if the options object cannot be stringified (i.e. circular JSON). Because of this you can have a `ident` property in the options object which is used as unique identifier.
+
 __webpack.config.js__
 
 ```javascript
@@ -430,9 +467,42 @@ module.exports = {
 };
 ```
 
-Note that webpack needs to generate a unique module identifier from the resource and all loaders including options. It tries to do this with a `JSON.stringify` of the options object. This is fine in 99.9% of cases, but may be not unique if you apply the same loaders with different options to the resource and the options have some stringified values.
+__`function(info)`__
 
-It also breaks if the options object cannot be stringified (i.e. circular JSON). Because of this you can have a `ident` property in the options object which is used as unique identifier.
+A `UseEntry` can also be a function which receives the object argument describing the module being loaded, and must return an options object. This can be used to vary the loader options on a per-module basis.
+
+The `info` object parameter has the following fields:
+
+- `compiler`: The current webpack compiler (can be undefined)
+- `issuer`: The path to the module that is importing the module being loaded
+- `realResource`: Always the path to the module being loaded
+- `resource`: The path to the module being loaded, it is usually equal to `realResource` except when the resource name is overwritten via `!=!` in request string
+
+__webpack.config.js__
+
+```javascript
+module.exports = {
+  //...
+  module: {
+    rules: [
+      {
+        loader: 'file-loader',
+        options: {
+          outputPath: 'svgs'
+        }
+      },
+      (info) => ({
+        loader: 'svgo-loader',
+        options: {
+          plugins: [{
+            cleanupIDs: { prefix: basename(info.resource) }
+          }]
+        }
+      })
+    ]
+  }
+};
+```
 
 
 ## Module Contexts

src/content/configuration/plugins.md

@@ -6,18 +6,21 @@ contributors:
   - skipjack
   - yatharthk
   - byzyk
+  - EugeneHlushko
 ---
 
 The `plugins` option is used to customize the webpack build process in a variety of ways. webpack comes with a variety built-in plugins available under `webpack.[plugin-name]`. See [Plugins page](/plugins) for a list of plugins and documentation but note that there are a lot more out in the community.
 
-T> Note: This page only discusses using plugins, however if you are interested in writing your own please visit [Writing a Plugin](/development/how-to-write-a-plugin/).
+T> Note: This page only discusses using plugins, however if you are interested in writing your own please visit [Writing a Plugin](/contribute/writing-a-plugin/).
 
 
 ## `plugins`
 
-`array`
+[`[Plugin]`](/plugins/)
 
-A list of webpack plugins. For example, [`DefinePlugin`](/plugins/define-plugin/) allows you to create global constants which can be configured at compile time. This can be useful for allowing different behavior between development builds and release builds.
+An array of webpack plugins. For example, [`DefinePlugin`](/plugins/define-plugin/) allows you to create global constants which can be configured at compile time. This can be useful for allowing different behavior between development builds and release builds.
+
+__webpack.config.js__
 
 ```js
 module.exports = {
@@ -32,6 +35,8 @@ module.exports = {
 
 A more complex example, using multiple plugins, might look something like this:
 
+__webpack.config.js__
+
 ```js
 var webpack = require('webpack');
 // importing plugins that do not come by default in webpack