root
/
webpack
mirror of https://github.com/webpack/webpack.git
1
0
Fork 0
Code Issues Actions 1 Packages Projects Releases Wiki Activity

chore(examples): fix exmaples template syntax 

fixes: #9000
This commit is contained in:
Yuta Hiroto 2019-04-04 22:04:47 +01:00
parent 88d01c76a9
commit eb7d7ea678
No known key found for this signature in database
GPG Key ID: E03998F3E2B165C2
45 changed files with 606 additions and 622 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
examples/aggressive-merging/template.md
View File

@ -1,19 +1,19 @@
# pageA.js
``` javascript
{{pageA.js}}
```javascript
_{{pageA.js}}_
```
# pageB.js
``` javascript
{{pageB.js}}
```javascript
_{{pageB.js}}_
```
# pageC.js
``` javascript
{{pageC.js}}
```javascript
_{{pageC.js}}_
```
# common.js
@ -22,8 +22,8 @@ a big file...
# webpack.config.js
``` javascript
{{webpack.config.js}}
```javascript
_{{webpack.config.js}}_
```
# Info
@ -31,11 +31,11 @@ a big file...
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

45
examples/chunkhash/template.md
View File

@ -4,50 +4,47 @@ 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
``` javascript
{{example.js}}
```javascript
_{{example.js}}_
```
# webpack.config.js
``` javascript
{{webpack.config.js}}
```javascript
_{{webpack.config.js}}_
```
# index.html
``` html
```html
<html>
<head>
</head>
<body>
<head> </head>
<body>
<!-- inlined minimized file "runtime~main.[chunkhash].js" -->
<script>
_{{production:dist/runtime~main.chunkhash.js}}_
</script>
<!-- inlined minimized file "runtime~main.[chunkhash].js" -->
<script>
{{production:dist/runtime~main.chunkhash.js}}
</script>
<script src="dist/main.[chunkhash].js"></script>
</body>
<script src="dist/main.[chunkhash].js"></script>
</body>
</html>
```
# dist/runtime~main.[chunkhash].js
``` javascript
{{dist/runtime~main.chunkhash.js}}
```javascript
_{{dist/runtime~main.chunkhash.js}}_
```
# dist/main.[chunkhash].js
``` javascript
{{dist/main.chunkhash.js}}
```javascript
_{{dist/main.chunkhash.js}}_
```
# Info
@ -55,11 +52,11 @@ The configuration required for this is:
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

10
examples/code-splitted-require.context-amd/template.md
View File

@ -1,19 +1,19 @@
# example.js
``` javascript
{{example.js}}
_{{example.js}}_
```
# dist/output.js
``` javascript
{{dist/output.js}}
_{{dist/output.js}}_
```
# dist/1.output.js
``` javascript
{{dist/1.output.js}}
_{{dist/1.output.js}}_
```
# Info
@ -21,11 +21,11 @@
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

10
examples/code-splitted-require.context/template.md
View File

@ -1,19 +1,19 @@
# example.js
``` javascript
{{example.js}}
_{{example.js}}_
```
# dist/output.js
``` javascript
{{dist/output.js}}
_{{dist/output.js}}_
```
# dist/1.output.js
``` javascript
{{dist/1.output.js}}
_{{dist/1.output.js}}_
```
# Info
@ -21,11 +21,11 @@
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

21
examples/code-splitting-bundle-loader/template.md
View File

@ -4,27 +4,26 @@ The bundle loader is used to create a wrapper module for `file.js` that loads th
# example.js
``` javascript
{{example.js}}
```javascript
_{{example.js}}_
```
# file.js
``` javascript
{{file.js}}
```javascript
_{{file.js}}_
```
# dist/output.js
``` javascript
{{dist/output.js}}
```javascript
_{{dist/output.js}}_
```
# dist/1.output.js
``` javascript
{{dist/1.output.js}}
```javascript
_{{dist/1.output.js}}_
```
# Info
@ -32,11 +31,11 @@ The bundle loader is used to create a wrapper module for `file.js` that loads th
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

14
examples/code-splitting-harmony/template.md
View File

@ -8,28 +8,26 @@ Providing dynamic expressions to `import` is possible. The same limits as with d
# example.js
``` javascript
{{example.js}}
```javascript
_{{example.js}}_
```
# dist/output.js
``` javascript
{{dist/output.js}}
```javascript
_{{dist/output.js}}_
```
# Info
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

28
examples/code-splitting-native-import-context-filter/template.md
View File

@ -3,29 +3,29 @@
This example illustrates how to filter the ContextModule results of `import()` statements. only `.js` files that don't
end in `.noimport.js` within the `templates` folder will be bundled.
``` javascript
{{example.js}}
```javascript
_{{example.js}}_
```
# 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:
``` javascript
{{templates/foo.js}}
```javascript
_{{templates/foo.js}}_
```
# dist/output.js
``` javascript
{{dist/output.js}}
```javascript
_{{dist/output.js}}_
```
# Info
@ -33,11 +33,11 @@ All templates are of this pattern:
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

22
examples/code-splitting-native-import-context/template.md
View File

@ -2,26 +2,26 @@
This example illustrates how to leverage the `import()` syntax to create ContextModules which are separated into separate chunks for each module in the `./templates` folder.
``` javascript
{{example.js}}
```javascript
_{{example.js}}_
```
# templates/
* foo.js
* baz.js
* bar.js
- foo.js
- baz.js
- bar.js
All templates are of this pattern:
``` javascript
{{templates/foo.js}}
```javascript
_{{templates/foo.js}}_
```
# dist/output.js
``` javascript
{{dist/output.js}}
```javascript
_{{dist/output.js}}_
```
# Info
@ -29,11 +29,11 @@ All templates are of this pattern:
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

22
examples/code-splitting-specify-chunk-name/template.md
View File

@ -2,26 +2,26 @@
This example illustrates how to specify chunk name in `require.ensure()` and `import()` to separated modules into separate chunks manually.
``` javascript
{{example.js}}
```javascript
_{{example.js}}_
```
# templates/
* foo.js
* baz.js
* bar.js
- foo.js
- baz.js
- bar.js
All templates are of this pattern:
``` javascript
{{templates/foo.js}}
```javascript
_{{templates/foo.js}}_
```
# dist/output.js
``` javascript
{{dist/output.js}}
```javascript
_{{dist/output.js}}_
```
# Info
@ -29,11 +29,11 @@ All templates are of this pattern:
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

57
examples/code-splitting/template.md
View File

@ -1,52 +1,51 @@
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.
# example.js
``` javascript
{{example.js}}
```javascript
_{{example.js}}_
```
# dist/output.js
``` javascript
{{dist/output.js}}
```javascript
_{{dist/output.js}}_
```
# dist/1.output.js
``` javascript
{{dist/1.output.js}}
```javascript
_{{dist/1.output.js}}_
```
Minimized
``` javascript
{{production:dist/1.output.js}}
```javascript
_{{production:dist/1.output.js}}_
```
# Info
@ -54,11 +53,11 @@ Minimized
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

21
examples/coffee-script/template.md
View File

@ -1,26 +1,25 @@
# example.js
``` javascript
{{example.js}}
```javascript
_{{example.js}}_
```
# cup1.coffee
``` coffee-script
{{cup1.coffee}}
```coffee-script
_{{cup1.coffee}}_
```
# cup2.coffee
``` coffee-script
{{cup2.coffee}}
```coffee-script
_{{cup2.coffee}}_
```
# dist/output.js
``` javascript
{{dist/output.js}}
```javascript
_{{dist/output.js}}_
```
# Info
@ -28,11 +27,11 @@
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

32
examples/common-chunk-and-vendor-chunk/template.md
View File

@ -33,44 +33,44 @@ With this bundle configuration, you would load your third party libraries, then
# webpack.config.js
``` javascript
{{webpack.config.js}}
```javascript
_{{webpack.config.js}}_
```
# dist/vendor.js
``` javascript
{{dist/vendor.js}}
```javascript
_{{dist/vendor.js}}_
```
# dist/commons~pageA~pageB~pageC.js
``` javascript
{{dist/commons~pageA~pageB~pageC.js}}
```javascript
_{{dist/commons~pageA~pageB~pageC.js}}_
```
# dist/commons~pageB~pageC.js
``` javascript
{{dist/commons~pageB~pageC.js}}
```javascript
_{{dist/commons~pageB~pageC.js}}_
```
# dist/pageA.js
``` javascript
{{dist/pageA.js}}
```javascript
_{{dist/pageA.js}}_
```
# dist/pageB.js
``` javascript
{{dist/pageB.js}}
```javascript
_{{dist/pageB.js}}_
```
# dist/pageC.js
``` javascript
{{dist/pageC.js}}
```javascript
_{{dist/pageC.js}}_
```
# Info
@ -78,11 +78,11 @@ With this bundle configuration, you would load your third party libraries, then
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

79
examples/common-chunk-grandchildren/template.md
View File

@ -1,89 +1,88 @@
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
``` javascript
{{example.js}}
```javascript
_{{example.js}}_
```
# pageA.js
``` javascript
{{pageA.js}}
```javascript
_{{pageA.js}}_
```
# pageB.js
``` javascript
{{pageB.js}}
```javascript
_{{pageB.js}}_
```
# pageC.js
``` javascript
{{pageC.js}}
```javascript
_{{pageC.js}}_
```
# reusableComponent.js
``` javascript
{{reusableComponent.js}}
```javascript
_{{reusableComponent.js}}_
```
# webpack.config.js
``` javascript
{{webpack.config.js}}
```javascript
_{{webpack.config.js}}_
```
# dist/output.js
``` javascript
{{dist/output.js}}
```javascript
_{{dist/output.js}}_
```
# dist/0.output.js
``` javascript
{{dist/0.output.js}}
```javascript
_{{dist/0.output.js}}_
```
# dist/2.output.js
``` javascript
{{dist/2.output.js}}
```javascript
_{{dist/2.output.js}}_
```
# dist/3.output.js
``` javascript
{{dist/3.output.js}}
```javascript
_{{dist/3.output.js}}_
```
# dist/4.output.js
``` javascript
{{dist/4.output.js}}
```javascript
_{{dist/4.output.js}}_
```
# Info
@ -91,11 +90,11 @@ You can see that webpack outputs five files/chunks:
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

20
examples/commonjs/template.md
View File

@ -8,26 +8,26 @@ You can also see the info messages webpack prints to console (for both normal an
# example.js
``` javascript
{{example.js}}
```javascript
_{{example.js}}_
```
# increment.js
``` javascript
{{increment.js}}
```javascript
_{{increment.js}}_
```
# math.js
``` javascript
{{math.js}}
```javascript
_{{math.js}}_
```
# dist/output.js
``` javascript
{{dist/output.js}}
```javascript
_{{dist/output.js}}_
```
# Info
@ -35,11 +35,11 @@ You can also see the info messages webpack prints to console (for both normal an
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

21
examples/dll-app-and-vendor/0-vendor/template.md
View File

@ -8,26 +8,26 @@ A manifest is created which includes mappings from module names to internal ids.
### webpack.config.js
``` javascript
{{webpack.config.js}}
```javascript
_{{webpack.config.js}}_
```
# example-vendor
``` javascript
{{../node_modules/example-vendor.js}}
```javascript
_{{../node_modules/example-vendor.js}}_
```
# dist/vendor.js
``` javascript
{{dist/vendor.js}}
```javascript
_{{dist/vendor.js}}_
```
# dist/vendor-manifest.json
``` javascript
{{dist/vendor-manifest.json}}
```javascript
_{{dist/vendor-manifest.json}}_
```
# Info
@ -35,12 +35,11 @@ A manifest is created which includes mappings from module names to internal ids.
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

20
examples/dll-app-and-vendor/1-app/template.md
View File

@ -4,26 +4,26 @@ The previously built vendor dll is used. The DllReferencePlugin reads the conten
# webpack.config.js
``` javascript
{{webpack.config.js}}
```javascript
_{{webpack.config.js}}_
```
# example-app.js
``` javascript
{{example-app.js}}
```javascript
_{{example-app.js}}_
```
# example.html
``` html
{{example.html}}
```html
_{{example.html}}_
```
# dist/app.js
``` javascript
{{dist/app.js}}
```javascript
_{{dist/app.js}}_
```
# Info
@ -31,13 +31,13 @@ The previously built vendor dll is used. The DllReferencePlugin reads the conten
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```
<!-- @TODO:

21
examples/dll-entry-only/template.md
View File

@ -24,29 +24,28 @@ 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
{{example.js}}
```javascript
_{{example.js}}_
```
# webpack.config.js
``` javascript
{{webpack.config.js}}
```javascript
_{{webpack.config.js}}_
```
# dist/dll.js
``` javascript
{{dist/dll.js}}
```javascript
_{{dist/dll.js}}_
```
# dist/dll-manifest.json
``` javascript
{{dist/dll-manifest.json}}
```javascript
_{{dist/dll-manifest.json}}_
```
# Info
@ -54,11 +53,11 @@ and [scope hoisting example](https://github.com/webpack/webpack/tree/master/exam
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

16
examples/dll-user/template.md
View File

@ -6,20 +6,20 @@ This is the _user_ bundle, which uses the manifest from [dll-reference example](
# webpack.config.js
``` javascript
{{webpack.config.js}}
```javascript
_{{webpack.config.js}}_
```
# example.js
``` javascript
{{example.js}}
```javascript
_{{example.js}}_
```
# dist/output.js
``` javascript
{{dist/output.js}}
```javascript
_{{dist/output.js}}_
```
# Info
@ -27,11 +27,11 @@ This is the _user_ bundle, which uses the manifest from [dll-reference example](
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

17
examples/dll/template.md
View File

@ -4,23 +4,22 @@
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
{{webpack.config.js}}
```javascript
_{{webpack.config.js}}_
```
# dist/MyDll.alpha.js
``` javascript
{{dist/MyDll.alpha.js}}
```javascript
_{{dist/MyDll.alpha.js}}_
```
# dist/alpha-manifest.json
``` javascript
{{dist/alpha-manifest.json}}
```javascript
_{{dist/alpha-manifest.json}}_
```
# Info
@ -28,11 +27,11 @@ This is the _reference_ bundle (with the manifests) for [dll user example](https
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

16
examples/explicit-vendor-chunk/template.md
View File

@ -1,19 +1,19 @@
# webpack.config.js
``` javascript
{{webpack.config.js}}
```javascript
_{{webpack.config.js}}_
```
# dist/vendor.js
``` javascript
{{dist/vendor.js}}
```javascript
_{{dist/vendor.js}}_
```
# dist/pageA.js
``` javascript
{{dist/pageA.js}}
```javascript
_{{dist/pageA.js}}_
```
# Info
@ -21,11 +21,11 @@
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

18
examples/externals/template.md vendored
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"], ...)` |
@ -17,20 +17,20 @@ In the complex case we specify different values for each environment:
# example.js
``` javascript
{{example.js}}
```javascript
_{{example.js}}_
```
# webpack.config.js
``` javascript
{{webpack.config.js}}
```javascript
_{{webpack.config.js}}_
```
# dist/output.js
``` javascript
{{dist/output.js}}
```javascript
_{{dist/output.js}}_
```
# Info
@ -38,11 +38,11 @@ In the complex case we specify different values for each environment:
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

18
examples/extra-async-chunk-advanced/template.md
View File

@ -1,21 +1,19 @@
# example.js
``` javascript
{{example.js}}
```javascript
_{{example.js}}_
```
# webpack.config.js
``` javascript
{{webpack.config.js}}
```javascript
_{{webpack.config.js}}_
```
# dist/output.js
``` javascript
{{dist/output.js}}
```javascript
_{{dist/output.js}}_
```
# Info
@ -23,11 +21,11 @@
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

67
examples/extra-async-chunk/template.md
View File

@ -2,64 +2,63 @@ 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
{{example.js}}
```javascript
_{{example.js}}_
```
# dist/output.js
``` javascript
{{dist/output.js}}
```javascript
_{{dist/output.js}}_
```
# dist/0.output.js
``` javascript
{{dist/0.output.js}}
```javascript
_{{dist/0.output.js}}_
```
# dist/2.output.js
``` javascript
{{dist/2.output.js}}
```javascript
_{{dist/2.output.js}}_
```
# dist/3.output.js
``` javascript
{{dist/3.output.js}}
```javascript
_{{dist/3.output.js}}_
```
# Info
@ -67,11 +66,11 @@ Pretty useful for a router in a SPA.
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

29
examples/harmony-interop/template.md
View File

@ -1,38 +1,37 @@
# example.js
``` javascript
{{example.js}}
```javascript
_{{example.js}}_
```
# fs.js
``` javascript
{{fs.js}}
```javascript
_{{fs.js}}_
```
# reexport-commonjs.js
``` javascript
{{reexport-commonjs.js}}
```javascript
_{{reexport-commonjs.js}}_
```
# example2.js
``` javascript
{{example2.js}}
```javascript
_{{example2.js}}_
```
# harmony.js
``` javascript
{{harmony.js}}
```javascript
_{{harmony.js}}_
```
# dist/output.js
``` javascript
{{dist/output.js}}
```javascript
_{{dist/output.js}}_
```
# Info
@ -40,11 +39,11 @@
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

12
examples/harmony-library/template.md
View File

@ -1,13 +1,13 @@
# webpack.config.js
``` javascript
{{webpack.config.js}}
```javascript
_{{webpack.config.js}}_
```
# dist/MyLibrary.umd.js
``` javascript
{{dist/MyLibrary.umd.js}}
```javascript
_{{dist/MyLibrary.umd.js}}_
```
# Info
@ -15,11 +15,11 @@
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

24
examples/harmony-unused/template.md
View File

@ -8,32 +8,32 @@ In addition to that, `library.js` simulates an entry point to a big library. `li
# example.js
``` javascript
{{example.js}}
```javascript
_{{example.js}}_
```
# math.js
``` javascript
{{math.js}}
```javascript
_{{math.js}}_
```
# library.js
``` javascript
{{library.js}}
```javascript
_{{library.js}}_
```
# dist/output.js
``` javascript
{{dist/output.js}}
```javascript
_{{dist/output.js}}_
```
# dist/output.js
``` javascript
{{production:dist/output.js}}
```javascript
_{{production:dist/output.js}}_
```
# Info
@ -41,11 +41,11 @@ In addition to that, `library.js` simulates an entry point to a big library. `li
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

17
examples/harmony/template.md
View File

@ -1,20 +1,19 @@
# example.js
``` javascript
{{example.js}}
```javascript
_{{example.js}}_
```
# increment.js
``` javascript
{{increment.js}}
```javascript
_{{increment.js}}_
```
# dist/output.js
``` javascript
{{dist/output.js}}
```javascript
_{{dist/output.js}}_
```
# Info
@ -22,11 +21,11 @@
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

10
examples/http2-aggressive-splitting/template.md
View File

@ -16,8 +16,8 @@ The compression improves with bigger `maxSize`, as gzip works better for bigger
The backward compatibility (non HTTP2 client) improves with bigger `maxSize`, as the number of requests decreases.
``` js
{{webpack.config.js}}
```js
_{{webpack.config.js}}_
```
# Info
@ -25,17 +25,17 @@ The backward compatibility (non HTTP2 client) improves with bigger `maxSize`, as
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```
## Records
```
{{dist/records.json}}
_{{dist/records.json}}_
```

36
examples/hybrid-routing/template.md
View File

@ -1,53 +1,53 @@
# webpack.config.js
``` javascript
{{webpack.config.js}}
```javascript
_{{webpack.config.js}}_
```
# aEntry.js
``` javascript
{{aEntry.js}}
```javascript
_{{aEntry.js}}_
```
`bEntry.js` is similar. You may want to use a loader to generate this file.
# aPage.js
``` javascript
{{aPage.js}}
```javascript
_{{aPage.js}}_
```
`bEntry.js` is similar.
# router.js
``` javascript
{{router.js}}
```javascript
_{{router.js}}_
```
# pageA.html
``` html
{{pageA.html}}
```html
_{{pageA.html}}_
```
# dist/pageA~pageB.chunk.js
``` javascript
{{dist/pageA~pageB.chunk.js}}
```javascript
_{{dist/pageA~pageB.chunk.js}}_
```
# dist/pageA.bundle.js
``` javascript
{{dist/pageA.bundle.js}}
```javascript
_{{dist/pageA.bundle.js}}_
```
# dist/aPage.chunk.js
``` javascript
{{dist/aPage.chunk.js}}
```javascript
_{{dist/aPage.chunk.js}}_
```
# Info
@ -55,11 +55,11 @@
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

25
examples/i18n/template.md
View File

@ -4,35 +4,34 @@ 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
{{example.js}}
```javascript
_{{example.js}}_
```
# webpack.config.js
``` javascript
{{webpack.config.js}}
```javascript
_{{webpack.config.js}}_
```
# de.json
``` javascript
{{de.json}}
```javascript
_{{de.json}}_
```
# dist/de.output.js
``` javascript
{{dist/de.output.js}}
```javascript
_{{dist/de.output.js}}_
```
# dist/en.output.js
``` javascript
{{dist/en.output.js}}
```javascript
_{{dist/en.output.js}}_
```
# Info
@ -40,11 +39,11 @@ The I18nPlugin replaces every occurrence of the i18n function `__(...)` with a c
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

24
examples/loader/template.md
View File

@ -1,31 +1,31 @@
# example.js
``` javascript
{{example.js}}
```javascript
_{{example.js}}_
```
# file.js
``` javascript
{{file.js}}
```javascript
_{{file.js}}_
```
# loader.js
``` javascript
{{loader.js}}
```javascript
_{{loader.js}}_
```
# test.css
``` css
{{test.css}}
```css
_{{test.css}}_
```
# dist/output.js
``` javascript
{{dist/output.js}}
```javascript
_{{dist/output.js}}_
```
# Console output
@ -43,11 +43,11 @@ Prints in node.js (`enhanced-require example.js`) and in browser:
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

16
examples/many-pages/template.md
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.
@ -25,11 +25,11 @@ Note: decreasing `maxInitial/AsyncRequest` will increase duplication further to
## webpack.config.js
```
{{webpack.config.js}}
_{{webpack.config.js}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

24
examples/mixed/template.md
View File

@ -4,32 +4,32 @@ You see that everything is working nicely together.
# example.js
``` javascript
{{example.js}}
```javascript
_{{example.js}}_
```
# amd.js
``` javascript
{{amd.js}}
```javascript
_{{amd.js}}_
```
# commonjs.js
``` javascript
{{commonjs.js}}
```javascript
_{{commonjs.js}}_
```
# dist/output.js
``` javascript
{{dist/output.js}}
```javascript
_{{dist/output.js}}_
```
# dist/1.output.js
``` javascript
{{dist/1.output.js}}
```javascript
_{{dist/1.output.js}}_
```
# Info
@ -37,11 +37,11 @@ You see that everything is working nicely together.
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

21
examples/multi-compiler/template.md
View File

@ -1,26 +1,25 @@
# example.js
``` javascript
{{example.js}}
```javascript
_{{example.js}}_
```
# webpack.config.js
``` javascript
{{webpack.config.js}}
```javascript
_{{webpack.config.js}}_
```
# dist/desktop.js
``` javascript
{{dist/desktop.js}}
```javascript
_{{dist/desktop.js}}_
```
# dist/mobile.js
``` javascript
{{dist/mobile.js}}
```javascript
_{{dist/mobile.js}}_
```
# Info
@ -28,11 +27,11 @@
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

16
examples/multi-part-library/template.md
View File

@ -14,20 +14,20 @@ Note: When your library has dependencies that should not be included in the comp
# webpack.config.js
``` javascript
{{webpack.config.js}}
```javascript
_{{webpack.config.js}}_
```
# dist/MyLibrary.alpha.js
``` javascript
{{dist/MyLibrary.alpha.js}}
```javascript
_{{dist/MyLibrary.alpha.js}}_
```
# dist/MyLibrary.beta.js
``` javascript
{{dist/MyLibrary.beta.js}}
```javascript
_{{dist/MyLibrary.beta.js}}_
```
# Info
@ -35,11 +35,11 @@ Note: When your library has dependencies that should not be included in the comp
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

68
examples/multiple-entry-points/template.md
View File

@ -8,72 +8,72 @@ 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
``` javascript
{{pageA.js}}
```javascript
_{{pageA.js}}_
```
# pageB.js
``` javascript
{{pageB.js}}
```javascript
_{{pageB.js}}_
```
# webpack.config.js
``` javascript
{{webpack.config.js}}
```javascript
_{{webpack.config.js}}_
```
# pageA.html
``` html
{{pageA.html}}
```html
_{{pageA.html}}_
```
# dist/commons.js
``` javascript
{{dist/commons.js}}
```javascript
_{{dist/commons.js}}_
```
# dist/pageA.js
``` javascript
{{dist/pageA.js}}
```javascript
_{{dist/pageA.js}}_
```
# dist/pageB.js
``` javascript
{{dist/pageB.js}}
```javascript
_{{dist/pageB.js}}_
```
# dist/1.js
``` javascript
{{dist/1.js}}
```javascript
_{{dist/1.js}}_
```
# Info
@ -81,11 +81,11 @@ You can also see the info that is printed to console. It shows among others:
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

21
examples/named-chunks/template.md
View File

@ -1,26 +1,25 @@
# example.js
``` javascript
{{example.js}}
```javascript
_{{example.js}}_
```
# dist/output.js
``` javascript
{{dist/output.js}}
```javascript
_{{dist/output.js}}_
```
# dist/1.output.js
``` javascript
{{dist/1.output.js}}
```javascript
_{{dist/1.output.js}}_
```
# dist/2.output.js
``` javascript
{{dist/2.output.js}}
```javascript
_{{dist/2.output.js}}_
```
# Info
@ -28,11 +27,11 @@
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

8
examples/require.context/template.md
View File

@ -1,7 +1,7 @@
# example.js
``` javascript
{{example.js}}
_{{example.js}}_
```
# templates/
@ -21,7 +21,7 @@ module.exports = function() {
# dist/output.js
``` javascript
{{dist/output.js}}
_{{dist/output.js}}_
```
# Info
@ -29,13 +29,13 @@ module.exports = function() {
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```
# Code Splitting

10
examples/require.resolve/template.md
View File

@ -1,20 +1,20 @@
# example.js
``` javascript
{{example.js}}
_{{example.js}}_
```
# a.js
``` javascript
{{a.js}}
_{{a.js}}_
```
# dist/output.js
``` javascript
{{dist/output.js}}
_{{dist/output.js}}_
```
# Info
@ -22,11 +22,11 @@
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

67
examples/scope-hoisting/template.md
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)
@ -22,85 +22,80 @@ While module concatenation identifiers in modules are renamed to avoid conflicts
# example.js
``` javascript
{{example.js}}
```javascript
_{{example.js}}_
```
# lazy.js
``` javascript
{{lazy.js}}
```javascript
_{{lazy.js}}_
```
# a.js
``` javascript
{{node_modules/a.js}}
```javascript
_{{node_modules/a.js}}_
```
# b.js
``` javascript
{{node_modules/b.js}}
```javascript
_{{node_modules/b.js}}_
```
# c.js
``` javascript
{{node_modules/c.js}}
```javascript
_{{node_modules/c.js}}_
```
# d.js
``` javascript
{{node_modules/d.js}}
```javascript
_{{node_modules/d.js}}_
```
# cjs.js
``` javascript
{{node_modules/cjs.js}}
```javascript
_{{node_modules/cjs.js}}_
```
# shared.js
``` javascript
{{node_modules/shared.js}}
```javascript
_{{node_modules/shared.js}}_
```
# shared2.js
``` javascript
{{node_modules/shared2.js}}
```javascript
_{{node_modules/shared2.js}}_
```
# webpack.config.js
``` javascript
{{webpack.config.js}}
```javascript
_{{webpack.config.js}}_
```
# dist/output.js
``` javascript
{{dist/output.js}}
```javascript
_{{dist/output.js}}_
```
# dist/1.output.js
``` javascript
{{dist/1.output.js}}
```javascript
_{{dist/1.output.js}}_
```
Minimized
``` javascript
{{production:dist/1.output.js}}
```javascript
_{{production:dist/1.output.js}}_
```
# Info
@ -108,11 +103,11 @@ Minimized
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

28
examples/side-effects/template.md
View File

@ -10,37 +10,37 @@ 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
``` javascript
{{example.js}}
```javascript
_{{example.js}}_
```
# node_modules/big-module/package.json
``` javascript
{{node_modules/big-module/package.json}}
```javascript
_{{node_modules/big-module/package.json}}_
```
# node_modules/big-module-with-flag/package.json
``` javascript
{{node_modules/big-module-with-flag/package.json}}
```javascript
_{{node_modules/big-module-with-flag/package.json}}_
```
# node_modules/big-module(-with-flag)/index.js
``` javascript
{{node_modules/big-module-with-flag/index.js}}
```javascript
_{{node_modules/big-module-with-flag/index.js}}_
```
# dist/output.js
``` javascript
{{dist/output.js}}
```javascript
_{{dist/output.js}}_
```
# Info
@ -48,11 +48,11 @@ Advantages:
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

68
examples/source-map/template.md
View File

@ -2,78 +2,88 @@ This example demonstrates various types of source-maps.
# example.coffee
``` coffeescript
{{example.coffee}}
```coffeescript
_{{example.coffee}}_
```
# webpack.config.js
``` javascript
{{webpack.config.js}}
```javascript
_{{webpack.config.js}}_
```
# Generated source-maps
## source-map.js and source-map.js.map
``` javascript
{{dist/bundle-source-map.js}}
```javascript
_{{dist/bundle-source-map.js}}_
```
``` javascript
{{dist/bundle-source-map.js.map}}
```javascript
_{{dist/bundle-source-map.js.map}}_
```
## hidden-source-map.js and hidden-source-map.js.map
``` javascript
{{dist/bundle-hidden-source-map.js}}
```javascript
_{{dist/bundle-hidden-source-map.js}}_
```
``` javascript
{{dist/bundle-hidden-source-map.js.map}}
```javascript
_{{dist/bundle-hidden-source-map.js.map}}_
```
## inline-source-map.js
``` javascript
{{dist/bundle-inline-source-map.js}}
```javascript
_{{dist/bundle-inline-source-map.js}}_
```
## nosources-source-map.js.map
``` javascript
{{dist/bundle-nosources-source-map.js.map}}
```javascript
_{{dist/bundle-nosources-source-map.js.map}}_
```
## eval-source-map.js
``` javascript
{{dist/bundle-eval-source-map.js}}
```javascript
_{{dist/bundle-eval-source-map.js}}_
```
## eval.js
``` javascript
{{dist/bundle-eval.js}}
```javascript
_{{dist/bundle-eval.js}}_
```
## cheap-eval-source-map.js
``` javascript
{{dist/bundle-cheap-eval-source-map.js}}
```javascript
_{{dist/bundle-cheap-eval-source-map.js}}_
```
## cheap-module-eval-source-map.js
``` javascript
{{dist/bundle-cheap-module-eval-source-map.js}}
```javascript
_{{dist/bundle-cheap-module-eval-source-map.js}}_
```
## cheap-module-source-map.js.map
``` javascript
{{dist/bundle-cheap-module-source-map.js.map}}
```javascript
_{{dist/bundle-cheap-module-source-map.js.map}}_
```
## cheap-source-map.js.map
``` javascript
{{dist/bundle-cheap-source-map.js.map}}
```javascript
_{{dist/bundle-cheap-source-map.js.map}}_
```
# webpack output
```
{{stdout}}
_{{stdout}}_
```

20
examples/two-explicit-vendor-chunks/template.md
View File

@ -1,25 +1,25 @@
# webpack.config.js
``` javascript
{{webpack.config.js}}
```javascript
_{{webpack.config.js}}_
```
# dist/vendor1.js
``` javascript
{{dist/vendor1.js}}
```javascript
_{{dist/vendor1.js}}_
```
# dist/vendor2.js
``` javascript
{{dist/vendor2.js}}
```javascript
_{{dist/vendor2.js}}_
```
# dist/pageA.js
``` javascript
{{dist/pageA.js}}
```javascript
_{{dist/pageA.js}}_
```
# Info
@ -27,11 +27,11 @@
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

24
examples/wasm-simple/template.md
View File

@ -4,32 +4,32 @@ WebAssembly modules can be imported like other modules. Their download and compi
# example.js
``` javascript
{{example.js}}
```javascript
_{{example.js}}_
```
# math.js
``` javascript
{{math.js}}
```javascript
_{{math.js}}_
```
# dist/output.js
``` javascript
{{dist/output.js}}
```javascript
_{{dist/output.js}}_
```
# dist/1.output.js
``` javascript
{{dist/1.output.js}}
```javascript
_{{dist/1.output.js}}_
```
# dist/2.output.js
``` javascript
{{dist/2.output.js}}
```javascript
_{{dist/2.output.js}}_
```
# Info
@ -37,11 +37,11 @@ WebAssembly modules can be imported like other modules. Their download and compi
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```

25
examples/web-worker/template.md
View File

@ -1,32 +1,31 @@
# example.js
``` javascript
{{example.js}}
```javascript
_{{example.js}}_
```
# worker.js
``` javascript
{{worker.js}}
```javascript
_{{worker.js}}_
```
# dist/output.js
``` javascript
{{dist/output.js}}
```javascript
_{{dist/output.js}}_
```
# dist/[hash].worker.js
``` javascript
{{dist/hash.worker.js}}
```javascript
_{{dist/hash.worker.js}}_
```
# dist/1.[hash].worker.js
``` javascript
{{dist/1.hash.worker.js}}
```javascript
_{{dist/1.hash.worker.js}}_
```
# Info
@ -34,11 +33,11 @@
## Unoptimized
```
{{stdout}}
_{{stdout}}_
```
## Production mode
```
{{production:stdout}}
_{{production:stdout}}_
```