From 6c2552c915f87084068dce5b84ea94dafbfe7f6a Mon Sep 17 00:00:00 2001 From: Albus Dumbledore Date: Mon, 23 Mar 2020 08:15:56 +0530 Subject: [PATCH 1/8] docs(many-pages): grammatical fixes in README.md --- examples/many-pages/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/examples/many-pages/README.md b/examples/many-pages/README.md index 061ec3b3e..67900ffaa 100644 --- a/examples/many-pages/README.md +++ b/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 From 7e86cc96a14c57d1d81adc8545297c25dea821bf Mon Sep 17 00:00:00 2001 From: Albus Dumbledore Date: Mon, 23 Mar 2020 08:28:42 +0530 Subject: [PATCH 2/8] docs(many-pages): grammatical fixes in template.md --- examples/many-pages/template.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/examples/many-pages/template.md b/examples/many-pages/template.md index 75d82d7cc..fa3c49319 100644 --- a/examples/many-pages/template.md +++ b/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 From e8f9941bfd8e906c46044622dfe4bfbbb4fe85aa Mon Sep 17 00:00:00 2001 From: Albus Dumbledore Date: Mon, 23 Mar 2020 08:33:03 +0530 Subject: [PATCH 3/8] docs(mixed): improve README.md --- examples/mixed/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/examples/mixed/README.md b/examples/mixed/README.md index 283445651..4e6cd3571 100644 --- a/examples/mixed/README.md +++ b/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 From cd18c1c668d9f48e8975d14fa75a7e16b3589958 Mon Sep 17 00:00:00 2001 From: Albus Dumbledore Date: Mon, 23 Mar 2020 08:35:41 +0530 Subject: [PATCH 4/8] docs(mixed): improve template.md --- examples/mixed/template.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/mixed/template.md b/examples/mixed/template.md index 83956754d..a1dd79d72 100644 --- a/examples/mixed/template.md +++ b/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. From 9ff955c2254883c156c5b1f96edc5c47a0fd7ed7 Mon Sep 17 00:00:00 2001 From: Albus Dumbledore Date: Fri, 27 Mar 2020 07:33:41 +0530 Subject: [PATCH 5/8] docs(multi-part-library): improve README.md --- examples/multi-part-library/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/multi-part-library/README.md b/examples/multi-part-library/README.md index e3d698c43..677f76dbb 100644 --- a/examples/multi-part-library/README.md +++ b/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. From 7f164e1e0579fd4e4e38f5c3268b69d2f15c9a47 Mon Sep 17 00:00:00 2001 From: Albus Dumbledore Date: Fri, 27 Mar 2020 07:39:32 +0530 Subject: [PATCH 6/8] docs(multi-part-library): improve template.md --- examples/multi-part-library/template.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/examples/multi-part-library/template.md b/examples/multi-part-library/template.md index fe79e1572..f1083c204 100644 --- a/examples/multi-part-library/template.md +++ b/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. From 8872cc6ac8c31ae2912870f0d721ba6eb3684298 Mon Sep 17 00:00:00 2001 From: Albus Dumbledore Date: Fri, 27 Mar 2020 08:20:58 +0530 Subject: [PATCH 7/8] docs(multiple-entry-points): improve README.md --- examples/multiple-entry-points/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/multiple-entry-points/README.md b/examples/multiple-entry-points/README.md index 6ea95797f..7daae8d8b 100644 --- a/examples/multiple-entry-points/README.md +++ b/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 From acf61b347baf99a5986ced17f2d9ccfdbf4d888a Mon Sep 17 00:00:00 2001 From: Albus Dumbledore Date: Fri, 27 Mar 2020 08:26:17 +0530 Subject: [PATCH 8/8] docs(multiple-entry-points): improve template.md --- examples/multiple-entry-points/template.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/multiple-entry-points/template.md b/examples/multiple-entry-points/template.md index e9073bfb8..2f3934834 100644 --- a/examples/multiple-entry-points/template.md +++ b/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