Merge pull request #10621 from wizardofhogwarts/patch-5

docs: improve examples

examples/many-pages/README.md

@@ -2,12 +2,12 @@
 
 This example illustrates webpack's algorithm for automatic deduplication using `optimization.splitChunks`.
 
-This example application contains 7 pages, each importing 1-3 modules from the `node_modules` folder (vendor libs) and 0-3 modules from the `stuff` folder (application modules). In reality an application is probably more complex, but the same mechanisms apply.
+This example application contains 7 pages, each importing 1-3 modules from the `node_modules` folder (vendor libs) and 0-3 modules from the `stuff` folder (application modules). In reality, an application is probably more complex, but the same mechanisms apply.
 
 The following configuration is used:
 
 - `optimization.splitChunks.chunks: "all"` - This opt-in into automatic splitting of initial chunks which is off by default
-- `optimization.splitChunks.maxInitial/AsyncRequests: 20` - This opt-in into a HTTP2 optimized splitting mode by increasing the allowed amount of requests. Browser only supports 6 requests in parallel for HTTP1.1.
+- `optimization.splitChunks.maxInitial/AsyncRequests: 20` - This opt-in into an HTTP2 optimized splitting mode by increasing the allowed amount of requests. The browser only supports 6 requests in parallel for HTTP1.1.
 
 # Interpreting the result
 
@@ -16,11 +16,11 @@ The following configuration is used:
 - `vendors~pageA.js` vendors only used by a single page but larger than the threshold in size
 - `pageA~pageD~pageF.js` application modules shared by these pages and larger than the threshold in size
 
-The threshold is here 40 bytes, but by default (in a real application) 30kb.
+Here, the threshold is 40 bytes but by default (in a real application) 30kb.
 
 Some modules are intentionally duplicated, i. e. `./stuff/s4.js` is shared by `pageA` and `pageC`, but it's the only shared module so no separate output file is created because it would be smaller than the threshold. A separate request (which comes with an overhead and worsen gzipping) is not worth the extra bytes.
 
-Note: decreasing `maxInitial/AsyncRequest` will increase duplication further to reduce the number of requests. Duplication doesn't affect initial page load, it only affects download size of navigations to other pages of the application.
+Note: decreasing `maxInitial/AsyncRequest` will increase duplication further to reduce the number of requests. Duplication doesn't affect the initial page load, it only affects download size of navigations to other pages of the application.
 
 ## webpack.config.js
 

examples/many-pages/template.md

@@ -2,12 +2,12 @@
 
 This example illustrates webpack's algorithm for automatic deduplication using `optimization.splitChunks`.
 
-This example application contains 7 pages, each importing 1-3 modules from the `node_modules` folder (vendor libs) and 0-3 modules from the `stuff` folder (application modules). In reality an application is probably more complex, but the same mechanisms apply.
+This example application contains 7 pages, each importing 1-3 modules from the `node_modules` folder (vendor libs) and 0-3 modules from the `stuff` folder (application modules). In reality, an application is probably more complex, but the same mechanisms apply.
 
 The following configuration is used:
 
 - `optimization.splitChunks.chunks: "all"` - This opt-in into automatic splitting of initial chunks which is off by default
-- `optimization.splitChunks.maxInitial/AsyncRequests: 20` - This opt-in into a HTTP2 optimized splitting mode by increasing the allowed amount of requests. Browser only supports 6 requests in parallel for HTTP1.1.
+- `optimization.splitChunks.maxInitial/AsyncRequests: 20` - This opt-in into an HTTP2 optimized splitting mode by increasing the allowed amount of requests. The browser only supports 6 requests in parallel for HTTP1.1.
 
 # Interpreting the result
 
@@ -16,11 +16,11 @@ The following configuration is used:
 - `vendors~pageA.js` vendors only used by a single page but larger than the threshold in size
 - `pageA~pageD~pageF.js` application modules shared by these pages and larger than the threshold in size
 
-The threshold is here 40 bytes, but by default (in a real application) 30kb.
+Here, the threshold is 40 bytes but by default (in a real application) 30kb.
 
 Some modules are intentionally duplicated, i. e. `./stuff/s4.js` is shared by `pageA` and `pageC`, but it's the only shared module so no separate output file is created because it would be smaller than the threshold. A separate request (which comes with an overhead and worsen gzipping) is not worth the extra bytes.
 
-Note: decreasing `maxInitial/AsyncRequest` will increase duplication further to reduce the number of requests. Duplication doesn't affect initial page load, it only affects download size of navigations to other pages of the application.
+Note: decreasing `maxInitial/AsyncRequest` will increase duplication further to reduce the number of requests. Duplication doesn't affect the initial page load, it only affects download size of navigations to other pages of the application.
 
 ## webpack.config.js
 

examples/mixed/README.md

@@ -1,11 +1,11 @@
-This example shows how you can mix different module styles in webpack. Here CommonJs, AMD and Harmony Modules (ES6 Modules) are used. In addition to that there are different types of dynamic requires (`"../require.context/templates/"+amd1+".js"` and `Math.random() < 0.5 ? "./commonjs" : "./amd"`).
+This example shows how you can mix different module styles in webpack. Here CommonJS, AMD and Harmony Modules (ES6 Modules) are used. In addition to that there are different types of dynamic requires (`"../require.context/templates/"+amd1+".js"` and `Math.random() < 0.5 ? "./commonjs" : "./amd"`).
 
 You see that everything is working nicely together.
 
 # example.js
 
 ```javascript
-// CommonJs-style requires
+// CommonJS-style requires
 var commonjs1 = require("./commonjs");
 var amd1 = require("./amd");
 var harmony1 = require("./harmony");
@@ -41,7 +41,7 @@ define(
 # commonjs.js
 
 ```javascript
-// CommonJs Module Format
+// CommonJS Module Format
 module.exports = 123;
 
 // but you can use amd style requires
@@ -68,7 +68,7 @@ require(
 /*! runtime requirements: module, __webpack_require__, __webpack_require__.oe, __webpack_require__.* */
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
-// CommonJs Module Format
+// CommonJS Module Format
 module.exports = 123;
 
 // but you can use amd style requires

examples/mixed/template.md

@@ -1,4 +1,4 @@
-This example shows how you can mix different module styles in webpack. Here CommonJs, AMD and Harmony Modules (ES6 Modules) are used. In addition to that there are different types of dynamic requires (`"../require.context/templates/"+amd1+".js"` and `Math.random() < 0.5 ? "./commonjs" : "./amd"`).
+This example shows how you can mix different module styles in webpack. Here CommonJS, AMD and Harmony Modules (ES6 Modules) are used. In addition to that there are different types of dynamic requires (`"../require.context/templates/"+amd1+".js"` and `Math.random() < 0.5 ? "./commonjs" : "./amd"`).
 
 You see that everything is working nicely together.
 

examples/multi-part-library/README.md

@@ -1,8 +1,8 @@
-This example demonstrates how to build a complex library with webpack. The library consist of multiple parts that are usable on its own and together.
+This example demonstrates how to build a complex library with webpack. The library consists of multiple parts that are usable on its own and together.
 
-When using this library with script tags it exports itself to the namespace `MyLibrary` and each part to a property in this namespace (`MyLibrary.alpha` and `MyLibrary.beta`). When consuming the library with CommonsJs or AMD it just export each part.
+When using this library with script tags it exports itself to the namespace `MyLibrary` and each part to a property in this namespace (`MyLibrary.alpha` and `MyLibrary.beta`). When consuming the library with CommonsJS or AMD it just exports each part.
 
-We are using multiple entry points (`entry` option) to build every part of the library as separate output file. The `output.filename` option contains `[name]` to give each output file a different name.
+We are using multiple entry points (`entry` option) to build every part of the library as a separate output file. The `output.filename` option contains `[name]` to give each output file a different name.
 
 We are using the `libraryTarget` option to generate a UMD ([Universal Module Definition](https://github.com/umdjs/umd)) module that is consumable in CommonsJs, AMD and with script tags. The `library` option defines the namespace. We are using `[name]` in the `library` option to give every entry a different namespace.
 

examples/multi-part-library/template.md

@@ -1,10 +1,10 @@
-This example demonstrates how to build a complex library with webpack. The library consist of multiple parts that are usable on its own and together.
+This example demonstrates how to build a complex library with webpack. The library consists of multiple parts that are usable on its own and together.
 
-When using this library with script tags it exports itself to the namespace `MyLibrary` and each part to a property in this namespace (`MyLibrary.alpha` and `MyLibrary.beta`). When consuming the library with CommonsJs or AMD it just export each part.
+When using this library with script tags it exports itself to the namespace `MyLibrary` and each part to a property in this namespace (`MyLibrary.alpha` and `MyLibrary.beta`). When consuming the library with CommonsJS or AMD it just exports each part.
 
-We are using multiple entry points (`entry` option) to build every part of the library as separate output file. The `output.filename` option contains `[name]` to give each output file a different name.
+We are using multiple entry points (`entry` option) to build every part of the library as a separate output file. The `output.filename` option contains `[name]` to give each output file a different name.
 
-We are using the `libraryTarget` option to generate a UMD ([Universal Module Definition](https://github.com/umdjs/umd)) module that is consumable in CommonsJs, AMD and with script tags. The `library` option defines the namespace. We are using `[name]` in the `library` option to give every entry a different namespace.
+We are using the `libraryTarget` option to generate a UMD ([Universal Module Definition](https://github.com/umdjs/umd)) module that is consumable in CommonsJS, AMD and with script tags. The `library` option defines the namespace. We are using `[name]` in the `library` option to give every entry a different namespace.
 
 You can see that webpack automatically wraps your module so that it is consumable in every environment. All you need is this simple config.
 

examples/multiple-entry-points/README.md

@@ -1,6 +1,6 @@
 This example shows how to use multiple entry points with a commons chunk.
 
-In this example you have two (HTML) pages `pageA` and `pageB`. You want to create individual bundles for each page. In addition to this you want to create a shared bundle that contains all modules used in both pages (assuming there are many/big modules in common). The pages also use Code Splitting to load a less used part of the features on demand.
+In this example, you have two (HTML) pages `pageA` and `pageB`. You want to create individual bundles for each page. In addition to this, you want to create a shared bundle that contains all modules used in both pages (assuming there are many/big modules in common). The pages also use Code Splitting to load a less used part of the features on demand.
 
 You can see how to define multiple entry points via the `entry` option.
 
@@ -21,7 +21,7 @@ You can see the output files:
 You can also see the info that is printed to console. It shows among others:
 
 - the generated files
-- the chunks with file, name and id
+- the chunks with file, name, and id
   - see lines starting with `chunk`
 - the modules that are in the chunks
 - the reasons why the modules are included

examples/multiple-entry-points/template.md

@@ -1,6 +1,6 @@
 This example shows how to use multiple entry points with a commons chunk.
 
-In this example you have two (HTML) pages `pageA` and `pageB`. You want to create individual bundles for each page. In addition to this you want to create a shared bundle that contains all modules used in both pages (assuming there are many/big modules in common). The pages also use Code Splitting to load a less used part of the features on demand.
+In this example, you have two (HTML) pages `pageA` and `pageB`. You want to create individual bundles for each page. In addition to this, you want to create a shared bundle that contains all the modules used in both pages (assuming there are many/big modules in common). The pages also use Code Splitting to load a less used part of the features on demand.
 
 You can see how to define multiple entry points via the `entry` option.
 
@@ -21,7 +21,7 @@ You can see the output files:
 You can also see the info that is printed to console. It shows among others:
 
 - the generated files
-- the chunks with file, name and id
+- the chunks with file, name, and id
   - see lines starting with `chunk`
 - the modules that are in the chunks
 - the reasons why the modules are included