chore(examples): regenerate README.md

This commit is contained in:
Yuta Hiroto 2019-04-08 19:29:40 +01:00
parent 83b0013209
commit 47969598eb
No known key found for this signature in database
GPG Key ID: E03998F3E2B165C2
41 changed files with 345 additions and 361 deletions

View File

@ -4,8 +4,8 @@ A very simple solution to this problem is to create another chunk which contains
The configuration required for this is:
* use `[chunkhash]` in `output.filename` (Note that this example doesn't do this because of the example generator infrastructure, but you should)
* use `[chunkhash]` in `output.chunkFilename` (Note that this example doesn't do this because of the example generator infrastructure, but you should)
- use `[chunkhash]` in `output.filename` (Note that this example doesn't do this because of the example generator infrastructure, but you should)
- use `[chunkhash]` in `output.chunkFilename` (Note that this example doesn't do this because of the example generator infrastructure, but you should)
# example.js
@ -39,17 +39,14 @@ module.exports = {
```html
<html>
<head>
</head>
<head> </head>
<body>
<!-- inlined minimized file "runtime~main.[chunkhash].js" -->
<script>
!function(e){function r(r){for(var n,i,a=r[0],c=r[1],l=r[2],p=0,s=[];p<a.length;p++)i=a[p],o[i]&&s.push(o[i][0]),o[i]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,l||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,a=1;a<t.length;a++){var c=t[a];0!==o[c]&&(n=!1)}n&&(u.splice(r--,1),e=i(i.s=t[0]))}return e}var n={},o={1:0},u=[];function i(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,i),t.l=!0,t.exports}i.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise(function(r,n){t=o[e]=[r,n]});r.push(t[2]=n);var u,a=document.createElement("script");a.charset="utf-8",a.timeout=120,i.nc&&a.setAttribute("nonce",i.nc),a.src=function(e){return i.p+""+({}[e]||e)+".[chunkhash].js"}(e),u=function(r){a.onerror=a.onload=null,clearTimeout(c);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src,i=new Error("Loading chunk "+e+" failed.\n("+n+": "+u+")");i.type=n,i.request=u,t[1](i)}o[e]=void 0}};var c=setTimeout(function(){u({type:"timeout",target:a})},12e4);a.onerror=a.onload=u,document.head.appendChild(a)}return Promise.all(r)},i.m=e,i.c=n,i.d=function(e,r,t){i.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,r){if(1&r&&(e=i(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(i.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)i.d(t,n,function(r){return e[r]}.bind(null,n));return t},i.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(r,"a",r),r},i.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},i.p="dist/",i.oe=function(e){throw console.error(e),e};var a=window.webpackJsonp=window.webpackJsonp||[],c=a.push.bind(a);a.push=r,a=a.slice();for(var l=0;l<a.length;l++)r(a[l]);var f=c;t()}([]);
</script>
<script src="dist/main.[chunkhash].js"></script>
</body>
</html>
```

View File

@ -16,7 +16,6 @@ require("bundle-loader!./file.js")(function(fileJsExports) {
module.exports = "It works";
```
# dist/output.js
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>

View File

@ -24,7 +24,6 @@ Promise.all([loadC("1"), loadC("2")]).then(function(arr) {
});
```
# dist/output.js
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
@ -322,7 +321,6 @@ module.exports = webpackAsyncContext;
/******/ ]);
```
# Info
## Unoptimized

View File

@ -28,12 +28,12 @@ getTemplate("baz.noimport");
# templates/
* foo.js
* foo.noimport.js
* baz.js
* foo.noimport.js
* bar.js
* foo.noimport.js
- foo.js
- foo.noimport.js
- baz.js
- foo.noimport.js
- bar.js
- foo.noimport.js
All templates are of this pattern:

View File

@ -20,9 +20,9 @@ getTemplate("baz");
# templates/
* foo.js
* baz.js
* bar.js
- foo.js
- baz.js
- bar.js
All templates are of this pattern:

View File

@ -20,9 +20,9 @@ import("./templates/ba" + createContextVar /* webpackChunkName: "chunk-bar-baz"
# templates/
* foo.js
* baz.js
* bar.js
- foo.js
- baz.js
- bar.js
All templates are of this pattern:

View File

@ -1,26 +1,26 @@
This example illustrates a very simple case of Code Splitting with `require.ensure`.
* `a` and `b` are required normally via CommonJS
* `c` is depended through the `require.ensure` array.
* This means: make it available, but don't execute it
* webpack will load it on demand
* `b` and `d` are required via CommonJs in the `require.ensure` callback
* webpack detects that these are in the on-demand-callback and
* will load them on demand
* webpacks optimizer can optimize `b` away
* as it is already available through the parent chunks
- `a` and `b` are required normally via CommonJS
- `c` is depended through the `require.ensure` array.
- This means: make it available, but don't execute it
- webpack will load it on demand
- `b` and `d` are required via CommonJs in the `require.ensure` callback
- webpack detects that these are in the on-demand-callback and
- will load them on demand
- webpacks optimizer can optimize `b` away
- as it is already available through the parent chunks
You can see that webpack outputs two files/chunks:
* `output.js` is the entry chunk and contains
* the module system
* chunk loading logic
* the entry point `example.js`
* module `a`
* module `b`
* `1.output.js` is an additional chunk (on demand loaded) and contains
* module `c`
* module `d`
- `output.js` is the entry chunk and contains
- the module system
- chunk loading logic
- the entry point `example.js`
- module `a`
- module `b`
- `1.output.js` is an additional chunk (on demand loaded) and contains
- module `c`
- module `d`
You can see that chunks are loaded via JSONP. The additional chunks are pretty small and minimize well.
@ -35,7 +35,6 @@ require.ensure(["c"], function(require) {
});
```
# dist/output.js
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>

View File

@ -1,4 +1,3 @@
# example.js
```javascript

View File

@ -1,24 +1,23 @@
This example illustrates how common modules from deep ancestors of an entry point can be split into a separate common chunk
* `pageA` and `pageB` are dynamically required
* `pageC` and `pageA` both require the `reusableComponent`
* `pageB` dynamically requires `PageC`
- `pageA` and `pageB` are dynamically required
- `pageC` and `pageA` both require the `reusableComponent`
- `pageB` dynamically requires `PageC`
You can see that webpack outputs five files/chunks:
* `output.js` is the entry chunk and contains
* the module system
* chunk loading logic
* the entry point `example.js`
* `0.output.js` is an additional chunk
* module `reusableComponent`
* `1.output.js` is an additional chunk
* module `pageB`
* `2.output.js` is an additional chunk
* module `pageA`
* `3.output.js` is an additional chunk
* module `pageC`
- `output.js` is the entry chunk and contains
- the module system
- chunk loading logic
- the entry point `example.js`
- `0.output.js` is an additional chunk
- module `reusableComponent`
- `1.output.js` is an additional chunk
- module `pageB`
- `2.output.js` is an additional chunk
- module `pageA`
- `3.output.js` is an additional chunk
- module `pageC`
# example.js

View File

@ -208,4 +208,3 @@ chunk {0} vendor.js (main) 57 bytes [entry] [rendered]
DllPlugin
+ 1 hidden module
```

View File

@ -24,7 +24,6 @@ from the corresponding modules `a.js`, `b.js` and `cjs.js`. None of the other mo
Also see [tree shaking](https://github.com/webpack/webpack/tree/master/examples/harmony-unused)
and [scope hoisting example](https://github.com/webpack/webpack/tree/master/examples/scope-hoisting).
# example.js
```javascript

View File

@ -4,7 +4,6 @@
This is the _reference_ bundle (with the manifests) for [dll user example](https://github.com/webpack/webpack/tree/master/examples/dll-user)
# webpack.config.js
```javascript

View File

@ -9,7 +9,7 @@ In the simple case we just need to specify a string (`"add"`). Then it's resolve
In the complex case we specify different values for each environment:
| environment | config value | resolved as |
|--------------------|--------------------------|------------------------------|
| ------------------ | ------------------------ | ---------------------------- |
| CommonJs (strict) | `["./math", "subtract"]` | `require("./math").subtract` |
| CommonJs (node.js) | `"./subtract"` | `require("./subtract")` |
| AMD | `"subtract"` | `define(["subtract"], ...)` |

View File

@ -1,5 +1,3 @@
# example.js
```javascript

View File

@ -2,36 +2,35 @@ This example shows automatically created async commons chunks.
The example entry references two chunks:
* entry chunk
* async require -> chunk X
* async require -> chunk Y
* chunk X
* module `a`
* module `b`
* module `c`
* chunk Y
* module `a`
* module `b`
* module `d`
- entry chunk
- async require -> chunk X
- async require -> chunk Y
- chunk X
- module `a`
- module `b`
- module `c`
- chunk Y
- module `a`
- module `b`
- module `d`
These chunks share modules `a` and `b`. The optimization extract these into chunk Z:
Note: Actually the optimization compare size of chunk Z to some minimum value, but this is disabled from this example. In practice there is no configuration needed for this.
* entry chunk
* async require -> chunk X & Z
* async require -> chunk Y & Z
* chunk X
* module `c`
* chunk Y
* module `d`
* chunk Z
* module `a`
* module `b`
- entry chunk
- async require -> chunk X & Z
- async require -> chunk Y & Z
- chunk X
- module `c`
- chunk Y
- module `d`
- chunk Z
- module `a`
- module `b`
Pretty useful for a router in a SPA.
# example.js
```javascript

View File

@ -1,4 +1,3 @@
# example.js
```javascript

View File

@ -1,4 +1,3 @@
# example.js
```javascript

View File

@ -4,7 +4,6 @@ The `webpack.config.js` exports an array of all config combinations that should
The I18nPlugin replaces every occurrence of the i18n function `__(...)` with a const string. i. e. `__("Hello World")` with `"Hello World"` resp. `"Hallo Welt"`.
# example.js
```javascript

View File

@ -6,15 +6,15 @@ This example application contains 7 pages, each of them importing 1-3 modules fr
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.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.
# Interpreting the result
* `pageA.js` the normal output files for the entrypoint `pageA`
* `vendors~pageD~pageE~pageF~pageG.js` vendor libs shared by these pages extracted into a separate output file when larger then the threshold in size
* `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
- `pageA.js` the normal output files for the entrypoint `pageA`
- `vendors~pageD~pageE~pageF~pageG.js` vendor libs shared by these pages extracted into a separate output file when larger then the threshold in size
- `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.

View File

@ -1,4 +1,3 @@
# example.js
```javascript

View File

@ -8,25 +8,25 @@ You can use
You can see the output files:
* `commons.js` contains:
* module `common.js` which is used in both pages
* `pageA.js` contains: (`pageB.js` is similar)
* the module system
* chunk loading logic
* the entry point `pageA.js`
* it would contain any other module that is only used by `pageA`
* `0.chunk.js` is an additional chunk which is used by both pages. It contains:
* module `shared.js`
- `commons.js` contains:
- module `common.js` which is used in both pages
- `pageA.js` contains: (`pageB.js` is similar)
- the module system
- chunk loading logic
- the entry point `pageA.js`
- it would contain any other module that is only used by `pageA`
- `0.chunk.js` is an additional chunk which is used by both pages. It contains:
- module `shared.js`
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
* see lines starting with `chunk`
* the modules that are in the chunks
* the reasons why the modules are included
* the reasons why a chunk is created
* see lines starting with `>`
- the generated files
- 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
- the reasons why a chunk is created
- see lines starting with `>`
# pageA.js

View File

@ -23,7 +23,6 @@ require.ensure(["b"], function(require) {
});
```
# dist/output.js
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>

View File

@ -8,9 +8,9 @@ All modules except `cjs` are EcmaScript modules. `cjs` is a CommonJs module.
The interesting thing here is that putting all modules in single scope won't work, because of multiple reasons:
* Modules `lazy`, `c`, `d` and `cjs` need to be in a separate chunk
* Module `shared` is accessed by two chunks (different scopes)
* Module `cjs` is a CommonJs module
- Modules `lazy`, `c`, `d` and `cjs` need to be in a separate chunk
- Module `shared` is accessed by two chunks (different scopes)
- Module `cjs` is a CommonJs module
![](graph2.png)
@ -96,8 +96,6 @@ export * from "shared2";
export var y = "y";
```
# webpack.config.js
```javascript
@ -111,9 +109,6 @@ module.exports = {
};
```
# dist/output.js
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>

View File

@ -10,8 +10,8 @@ After being built by webpack, the output bundle contains `index.js` `a.js` `b.js
Advantages:
* Smaller bundles
* Faster bootup
- Smaller bundles
- Faster bootup
# example.js

View File

@ -51,6 +51,7 @@ module.exports = [
# Generated source-maps
## source-map.js and source-map.js.map
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
/* 0 */
@ -89,6 +90,7 @@ race = function(winner, ...runners) {
```
## hidden-source-map.js and hidden-source-map.js.map
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
/* 0 */
@ -126,6 +128,7 @@ race = function(winner, ...runners) {
```
## inline-source-map.js
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
/* 0 */
@ -160,11 +163,13 @@ race = function(winner, ...runners) {
```
## nosources-source-map.js.map
```javascript
{"version":3,"sources":["webpack:///./example.coffee"],"names":[],"mappings":";;;;;;;;AAAA;;;AAAA;;AAGA,OACE;EAAA,MAAQ,IAAI,CAAC,IAAb;EACA,QAAQ,MADR;EAEA,MAAQ,SAAC,CAAD;WAAO,IAAI,OAAO,CAAP;EAAX;AAFR,EAJF;;;AASA,OAAO,SAAC,MAAD,KAAS,OAAT;SACL,MAAM,MAAN,EAAc,OAAd;AADK","file":"./bundle-nosources-source-map.js","sourceRoot":""}
```
## eval-source-map.js
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
/* 0 */
@ -181,6 +186,7 @@ eval("// Taken from http://coffeescript.org/\n\n// Objects:\nvar math, race;\n\n
```
## eval.js
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
/* 0 */
@ -197,6 +203,7 @@ eval("// Taken from http://coffeescript.org/\n\n// Objects:\nvar math, race;\n\n
```
## cheap-eval-source-map.js
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
/* 0 */
@ -213,6 +220,7 @@ eval("// Taken from http://coffeescript.org/\n\n// Objects:\nvar math, race;\n\n
```
## cheap-module-eval-source-map.js
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
/* 0 */
@ -229,11 +237,13 @@ eval("// Taken from http://coffeescript.org/\n\n// Objects:\nvar math, race;\n\n
```
## cheap-module-source-map.js.map
```javascript
{"version":3,"file":"./bundle-cheap-module-source-map.js","sources":["webpack:///./example.coffee"],"sourcesContent":["# Taken from http://coffeescript.org/\n\n# Objects:\nmath =\n root: Math.sqrt\n square: square\n cube: (x) -> x * square x\n\n# Splats:\nrace = (winner, runners...) ->\n print winner, runners\n"],"mappings":";;;;;;;;AAAA;AACA;;AADA;AACA;AAEA;AACA;AACA;AACA;AAAA;AAAA;AAFA;AACA;;AAIA;AACA;AADA;;;;A","sourceRoot":""}
```
## cheap-source-map.js.map
```javascript
{"version":3,"file":"./bundle-cheap-source-map.js","sources":["webpack:///./example.coffee"],"sourcesContent":["// Taken from http://coffeescript.org/\n\n// Objects:\nvar math, race;\n\nmath = {\n root: Math.sqrt,\n square: square,\n cube: function(x) {\n return x * square(x);\n }\n};\n\n// Splats:\nrace = function(winner, ...runners) {\n return print(winner, runners);\n};\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;A","sourceRoot":""}
```

View File

@ -1,4 +1,3 @@
# example.js
```javascript