opensourcemirror
/
webpack
mirror of https://github.com/webpack/webpack.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #9006 from hiroppy/feature/fix-template-syntax 

fix examples template syntax
This commit is contained in:
Tobias Koppers 2019-04-08 21:09:56 +02:00 committed by GitHub
parent 9e6085072a 47969598eb
commit 51174616b3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
87 changed files with 954 additions and 986 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
examples/aggressive-merging/README.md
View File

@ -1,6 +1,6 @@
# pageA.js
``` javascript
```javascript
require(["./common"], function(common) {
common(require("./a"));
});
@ -8,7 +8,7 @@ require(["./common"], function(common) {
# pageB.js
``` javascript
```javascript
require(["./common"], function(common) {
common(require("./b"));
});
@ -16,7 +16,7 @@ require(["./common"], function(common) {
# pageC.js
``` javascript
```javascript
require(["./a"], function(a) {
console.log(a + require("./b"));
});
@ -28,7 +28,7 @@ a big file...
# webpack.config.js
``` javascript
```javascript
var path = require("path");
var AggressiveMergingPlugin = require("../../lib/optimize/AggressiveMergingPlugin");
module.exports = {

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}}_
```

35
examples/chunkhash/README.md
View File

@ -4,12 +4,12 @@ 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
```javascript
// some module
import("./async1");
import("./async2");
@ -17,7 +17,7 @@ import("./async2");
# webpack.config.js
``` javascript
```javascript
var path = require("path");
module.exports = {
// mode: "development || "production",
@ -37,20 +37,17 @@ module.exports = {
# index.html
``` html
```html
<html>
<head>
</head>
<body>
<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>
<!-- 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>
<script src="dist/main.[chunkhash].js"></script>
</body>
</html>
```
@ -58,7 +55,7 @@ module.exports = {
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // install a JSONP callback for chunk loading
/******/ function webpackJsonpCallback(data) {
@ -281,13 +278,13 @@ module.exports = {
</details>
``` javascript
```javascript
/******/ ([]);
```
# dist/main.[chunkhash].js
``` javascript
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
/* 0 */
/*!********************!*\

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}}_
```

11
examples/code-splitting-bundle-loader/README.md
View File

@ -4,7 +4,7 @@ The bundle loader is used to create a wrapper module for `file.js` that loads th
# example.js
``` javascript
```javascript
require("bundle-loader!./file.js")(function(fileJsExports) {
console.log(fileJsExports);
});
@ -12,16 +12,15 @@ require("bundle-loader!./file.js")(function(fileJsExports) {
# file.js
``` javascript
```javascript
module.exports = "It works";
```
# dist/output.js
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // install a JSONP callback for chunk loading
/******/ function webpackJsonpCallback(data) {
@ -224,7 +223,7 @@ module.exports = "It works";
</details>
``` javascript
```javascript
/******/ ([
/* 0 */
/*!********************!*\
@ -267,7 +266,7 @@ __webpack_require__.e(/*! require.ensure */ 1).then((function(require) {
# dist/1.output.js
``` javascript
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],{
/***/ 2:

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}}_
```

8
examples/code-splitting-harmony/README.md
View File

@ -8,7 +8,7 @@ Providing dynamic expressions to `import` is possible. The same limits as with d
# example.js
``` javascript
```javascript
import a from "a";
import("b").then(function(b) {
@ -24,12 +24,11 @@ Promise.all([loadC("1"), loadC("2")]).then(function(arr) {
});
```
# dist/output.js
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // install a JSONP callback for chunk loading
/******/ function webpackJsonpCallback(data) {
@ -232,7 +231,7 @@ Promise.all([loadC("1"), loadC("2")]).then(function(arr) {
</details>
``` javascript
```javascript
/******/ ([
/* 0 */,
/* 1 */,
@ -322,7 +321,6 @@ module.exports = webpackAsyncContext;
/******/ ]);
```
# Info
## Unoptimized

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}}_
```

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

@ -1,9 +1,9 @@
# example.js
This example illustrates how to filter the ContextModule results of `import()` statements. only `.js` files that don't
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
```javascript
async function getTemplate(templateName) {
try {
let template = await import(
@ -28,16 +28,16 @@ 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:
``` javascript
```javascript
var foo = "foo";
export default foo;
@ -47,7 +47,7 @@ export default foo;
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // install a JSONP callback for chunk loading
/******/ function webpackJsonpCallback(data) {
@ -250,7 +250,7 @@ export default foo;
</details>
``` javascript
```javascript
/******/ ([
/* 0 */,
/* 1 */,

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

@ -1,31 +1,31 @@
# example.js
This example illustrates how to filter the ContextModule results of `import()` statements. only `.js` files that don't
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}}_
```

14
examples/code-splitting-native-import-context/README.md
View File

@ -2,7 +2,7 @@
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
```javascript
async function getTemplate(templateName) {
try {
let template = await import(`./templates/${templateName}`);
@ -20,13 +20,13 @@ getTemplate("baz");
# templates/
* foo.js
* baz.js
* bar.js
- foo.js
- baz.js
- bar.js
All templates are of this pattern:
``` javascript
```javascript
var foo = "foo";
export default foo;
@ -36,7 +36,7 @@ export default foo;
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // install a JSONP callback for chunk loading
/******/ function webpackJsonpCallback(data) {
@ -239,7 +239,7 @@ export default foo;
</details>
``` javascript
```javascript
/******/ ([
/* 0 */,
/* 1 */,

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}}_
```

14
examples/code-splitting-specify-chunk-name/README.md
View File

@ -2,7 +2,7 @@
This example illustrates how to specify chunk name in `require.ensure()` and `import()` to separated modules into separate chunks manually.
``` javascript
```javascript
import("./templates/foo" /* webpackChunkName: "chunk-foo" */ ).then(function(foo) {
console.log('foo:', foo);
})
@ -20,13 +20,13 @@ 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:
``` javascript
```javascript
var foo = "foo";
export default foo;
@ -36,7 +36,7 @@ export default foo;
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // install a JSONP callback for chunk loading
/******/ function webpackJsonpCallback(data) {
@ -239,7 +239,7 @@ export default foo;
</details>
``` javascript
```javascript
/******/ ([
/* 0 */,
/* 1 */,

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}}_
```

47
examples/code-splitting/README.md
View File

@ -1,32 +1,32 @@
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
```javascript
var a = require("a");
var b = require("b");
require.ensure(["c"], function(require) {
@ -35,12 +35,11 @@ require.ensure(["c"], function(require) {
});
```
# dist/output.js
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // install a JSONP callback for chunk loading
/******/ function webpackJsonpCallback(data) {
@ -243,7 +242,7 @@ require.ensure(["c"], function(require) {
</details>
``` javascript
```javascript
/******/ ([
/* 0 */
/*!***************************!*\
@ -285,7 +284,7 @@ __webpack_require__.e(/*! require.ensure */ 1).then((function(require) {
# dist/1.output.js
``` javascript
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
/* 0 */,
/* 1 */,
@ -315,7 +314,7 @@ __webpack_require__.e(/*! require.ensure */ 1).then((function(require) {
Minimized
``` javascript
```javascript
(window.webpackJsonp=window.webpackJsonp||[]).push([[1],[,,,function(n,o){},function(n,o){}]]);
```

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}}_
```

13
examples/coffee-script/README.md
View File

@ -1,13 +1,12 @@
# example.js
``` javascript
```javascript
console.log(require("./cup1"));
```
# cup1.coffee
``` coffee-script
```coffee-script
module.exports =
cool: "stuff"
answer: 42
@ -17,7 +16,7 @@ module.exports =
# cup2.coffee
``` coffee-script
```coffee-script
console.log "yeah coffee-script"
module.exports = 42
@ -27,7 +26,7 @@ module.exports = 42
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
@ -118,7 +117,7 @@ module.exports = 42
</details>
``` javascript
```javascript
/******/ ([
/* 0 */
/*!********************!*\
@ -200,4 +199,4 @@ chunk {0} output.js (main) 206 bytes [entry] [rendered]
single entry ./example.js main
[2] ./cup1.coffee 118 bytes {0} [built]
cjs require ./cup1 [1] ./example.js 1:12-29
```
```

23
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}}_
```

16
examples/common-chunk-and-vendor-chunk/README.md
View File

@ -33,7 +33,7 @@ With this bundle configuration, you would load your third party libraries, then
# webpack.config.js
``` javascript
```javascript
var path = require("path");
module.exports = {
@ -71,7 +71,7 @@ module.exports = {
# dist/vendor.js
``` javascript
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],{
/***/ 1:
@ -101,7 +101,7 @@ module.exports = "vendor2";
# dist/commons~pageA~pageB~pageC.js
``` javascript
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{
/***/ 3:
@ -120,7 +120,7 @@ module.exports = "utility2";
# dist/commons~pageB~pageC.js
``` javascript
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[4],{
/***/ 6:
@ -141,7 +141,7 @@ module.exports = "utility3";
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // install a JSONP callback for chunk loading
/******/ function webpackJsonpCallback(data) {
@ -300,7 +300,7 @@ module.exports = "utility3";
</details>
``` javascript
```javascript
/******/ ([
/* 0 */
/*!******************!*\
@ -333,7 +333,7 @@ module.exports = "utility1";
# dist/pageB.js
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // install a JSONP callback for chunk loading
/******/ function webpackJsonpCallback(data) {
@ -511,7 +511,7 @@ module.exports = "pageB";
# dist/pageC.js
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // install a JSONP callback for chunk loading
/******/ function webpackJsonpCallback(data) {

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}}_
```

55
examples/common-chunk-grandchildren/README.md
View File

@ -1,28 +1,27 @@
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
```javascript
var main = function() {
console.log("Main class");
require.ensure([], () => {
@ -40,7 +39,7 @@ main();
# pageA.js
``` javascript
```javascript
var reusableComponent = require("./reusableComponent");
module.exports = function() {
@ -51,7 +50,7 @@ module.exports = function() {
# pageB.js
``` javascript
```javascript
module.exports = function() {
console.log("Page B");
require.ensure([], ()=>{
@ -63,7 +62,7 @@ module.exports = function() {
# pageC.js
``` javascript
```javascript
var reusableComponent = require("./reusableComponent");
module.exports = function() {
@ -74,7 +73,7 @@ module.exports = function() {
# reusableComponent.js
``` javascript
```javascript
module.exports = function() {
console.log("reusable Component");
};
@ -82,7 +81,7 @@ module.exports = function() {
# webpack.config.js
``` javascript
```javascript
"use strict";
const path = require("path");
@ -108,7 +107,7 @@ module.exports = {
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // install a JSONP callback for chunk loading
/******/ function webpackJsonpCallback(data) {
@ -311,7 +310,7 @@ module.exports = {
</details>
``` javascript
```javascript
/******/ ([
/* 0 */
/*!**************************!*\
@ -352,7 +351,7 @@ main();
# dist/0.output.js
``` javascript
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],{
/***/ 4:
@ -374,7 +373,7 @@ module.exports = function() {
# dist/2.output.js
``` javascript
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{
/***/ 2:
@ -399,7 +398,7 @@ module.exports = function() {
# dist/3.output.js
``` javascript
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[3],{
/***/ 3:
@ -425,7 +424,7 @@ module.exports = function() {
# dist/4.output.js
``` javascript
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[4],{
/***/ 5:

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}}_
```

12
examples/commonjs/README.md
View File

@ -8,7 +8,7 @@ You can also see the info messages webpack prints to console (for both normal an
# example.js
``` javascript
```javascript
const inc = require('./increment').increment;
const a = 1;
inc(a); // 2
@ -16,7 +16,7 @@ inc(a); // 2
# increment.js
``` javascript
```javascript
const add = require('./math').add;
exports.increment = function(val) {
return add(val, 1);
@ -25,7 +25,7 @@ exports.increment = function(val) {
# math.js
``` javascript
```javascript
exports.add = function() {
var sum = 0, i = 0, args = arguments, l = args.length;
while (i < l) {
@ -39,7 +39,7 @@ exports.add = function() {
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
@ -130,7 +130,7 @@ exports.add = function() {
</details>
``` javascript
```javascript
/******/ ([
/* 0 */
/*!********************!*\
@ -214,4 +214,4 @@ chunk {0} output.js (main) 326 bytes [entry] [rendered]
cjs require ./increment [0] ./example.js 1:12-34
[2] ./math.js 156 bytes {0} [built]
cjs require ./math [1] ./increment.js 1:12-29
```
```

22
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}}_
```

9
examples/dll-app-and-vendor/0-vendor/README.md
View File

@ -8,7 +8,7 @@ A manifest is created which includes mappings from module names to internal ids.
### webpack.config.js
``` javascript
```javascript
var path = require("path");
var webpack = require("../../../");
@ -32,7 +32,7 @@ module.exports = {
# example-vendor
``` javascript
```javascript
export function square(n) {
return n * n;
}
@ -40,7 +40,7 @@ export function square(n) {
# dist/vendor.js
``` javascript
```javascript
var vendor_lib_a132d30959ef28c3f004 =
```
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
@ -171,7 +171,7 @@ function square(n) {
# dist/vendor-manifest.json
``` javascript
```javascript
{"name":"vendor_lib_a132d30959ef28c3f004","content":{"../node_modules/example-vendor.js":{"id":1,"buildMeta":{"exportsType":"namespace","providedExports":["square"]}}}}
```
@ -208,4 +208,3 @@ chunk {0} vendor.js (main) 57 bytes [entry] [rendered]
DllPlugin
+ 1 hidden module
```

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}}_
```

10
examples/dll-app-and-vendor/1-app/README.md
View File

@ -4,7 +4,7 @@ The previously built vendor dll is used. The DllReferencePlugin reads the conten
# webpack.config.js
``` javascript
```javascript
var path = require("path");
var webpack = require("../../../");
@ -27,7 +27,7 @@ module.exports = {
# example-app.js
``` javascript
```javascript
import { square } from "example-vendor";
console.log(square(7));
@ -36,7 +36,7 @@ console.log(new square(7));
# example.html
``` html
```html
<html>
<head></head>
<body>
@ -50,7 +50,7 @@ console.log(new square(7));
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
@ -141,7 +141,7 @@ console.log(new square(7));
</details>
``` javascript
```javascript
/******/ ([
/* 0 */
/*!************************!*\

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:

9
examples/dll-entry-only/README.md
View File

@ -24,17 +24,16 @@ 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
```javascript
export { a, b } from "./a";
export { c } from "./cjs";
```
# webpack.config.js
``` javascript
```javascript
var path = require("path");
var webpack = require("../../");
@ -63,7 +62,7 @@ module.exports = {
# dist/dll.js
``` javascript
```javascript
var dll_3eea518f6d09aac41ec7 =
```
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
@ -224,7 +223,7 @@ var cjs = __webpack_require__(1);
# dist/dll-manifest.json
``` javascript
```javascript
{"name":"dll_3eea518f6d09aac41ec7","content":{"./example.js":{"id":2,"buildMeta":{"exportsType":"namespace","providedExports":["a","b","c"]}}}}
```

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}}_
```

8
examples/dll-user/README.md
View File

@ -6,7 +6,7 @@ This is the _user_ bundle, which uses the manifest from [dll-reference example](
# webpack.config.js
``` javascript
```javascript
var path = require("path");
var webpack = require("../../");
module.exports = {
@ -27,7 +27,7 @@ module.exports = {
# example.js
``` javascript
```javascript
console.log(require("../dll/alpha"));
console.log(require("../dll/a"));
@ -42,7 +42,7 @@ console.log(require("module"));
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
@ -133,7 +133,7 @@ console.log(require("module"));
</details>
``` javascript
```javascript
/******/ ([
/* 0 */
/*!********************!*\

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}}_
```

7
examples/dll/README.md
View File

@ -4,10 +4,9 @@
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
```javascript
var path = require("path");
var webpack = require("../../");
module.exports = {
@ -35,7 +34,7 @@ module.exports = {
# dist/MyDll.alpha.js
``` javascript
```javascript
var alpha_d61ee01b5c383d26e2c0 =
```
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
@ -182,7 +181,7 @@ module.exports = "module";
# dist/alpha-manifest.json
``` javascript
```javascript
{"name":"alpha_d61ee01b5c383d26e2c0","content":{"./alpha.js":{"id":1,"buildMeta":{"providedExports":true}},"./a.js":{"id":2,"buildMeta":{"providedExports":true}},"../node_modules/module.js":{"id":3,"buildMeta":{"providedExports":true}}}}
```

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}}_
```

6
examples/explicit-vendor-chunk/README.md
View File

@ -1,6 +1,6 @@
# webpack.config.js
``` javascript
```javascript
var path = require("path");
var webpack = require("../../");
module.exports = [
@ -45,7 +45,7 @@ module.exports = [
# dist/vendor.js
``` javascript
```javascript
var vendor_d9f5eab93a0e9010218f =
```
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
@ -181,7 +181,7 @@ module.exports = "Vendor2";
# dist/pageA.js
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};

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}}_
```

10
examples/externals/README.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,7 +17,7 @@ In the complex case we specify different values for each environment:
# example.js
``` javascript
```javascript
var add = require("add");
var subtract = require("subtract");
@ -26,7 +26,7 @@ exports.exampleValue = subtract(add(42, 2), 2);
# webpack.config.js
``` javascript
```javascript
module.exports = {
// mode: "development || "production",
output: {
@ -48,7 +48,7 @@ module.exports = {
# dist/output.js
``` javascript
```javascript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("add"), require("./subtract"));
@ -228,4 +228,4 @@ chunk {0} output.js (main) 194 bytes [entry] [rendered]
cjs require add [0] ./example.js 1:10-24
[2] external {"root":"subtract","commonjs2":"./subtract","commonjs":["./math","subtract"],"amd":"subtract"} 42 bytes {0} [built]
cjs require subtract [0] ./example.js 2:15-34
```
```

20
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}}_
```

10
examples/extra-async-chunk-advanced/README.md
View File

@ -1,8 +1,6 @@
# example.js
``` javascript
```javascript
require(["./a", "./b", "./c"], function(a, b, c) {});
require.ensure(["./a"], function(require) {
@ -23,7 +21,7 @@ require.ensure(["./a", "./e"], function(require) {
# webpack.config.js
``` javascript
```javascript
module.exports = {
// mode: "development || "production",
optimization: {
@ -39,7 +37,7 @@ module.exports = {
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // install a JSONP callback for chunk loading
/******/ function webpackJsonpCallback(data) {
@ -242,7 +240,7 @@ module.exports = {
</details>
``` javascript
```javascript
/******/ ({
/***/ 2:

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}}_
```

55
examples/extra-async-chunk/README.md
View File

@ -2,39 +2,38 @@ 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
```javascript
// a chunks with a, b, c
require(["./a", "./b", "./c"]);
@ -49,7 +48,7 @@ require.ensure(["./a"], function(require) {
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // install a JSONP callback for chunk loading
/******/ function webpackJsonpCallback(data) {
@ -252,7 +251,7 @@ require.ensure(["./a"], function(require) {
</details>
``` javascript
```javascript
/******/ ({
/***/ 2:
@ -279,7 +278,7 @@ Promise.all(/*! require.ensure */[__webpack_require__.e(0), __webpack_require__.
# dist/0.output.js
``` javascript
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],[
/* 0 */
/*!**************!*\
@ -306,7 +305,7 @@ module.exports = "b";
# dist/2.output.js
``` javascript
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{
/***/ 3:
@ -325,7 +324,7 @@ module.exports = "c";
# dist/3.output.js
``` javascript
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[3],{
/***/ 4:

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}}_
```

17
examples/harmony-interop/README.md
View File

@ -1,7 +1,6 @@
# example.js
``` javascript
```javascript
// harmony module
// import from CommonJs module
@ -22,7 +21,7 @@ import "./example2";
# fs.js
``` javascript
```javascript
// an example CommonJs module
// content is omitted for brevity
exports.readFile = function() {};
@ -34,7 +33,7 @@ exports.readFile = function() {};
# reexport-commonjs.js
``` javascript
```javascript
// reexport a CommonJs module
export * from "./fs";
// Note that the default export doesn't reexport via export *
@ -46,7 +45,7 @@ export * from "./fs";
# example2.js
``` javascript
```javascript
// CommonJs module
// require a harmony module
@ -58,7 +57,7 @@ var namedExport = module.named;
# harmony.js
``` javascript
```javascript
// just some exports
export default "default";
export var named = "named";
@ -68,7 +67,7 @@ export var named = "named";
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
@ -159,7 +158,7 @@ export var named = "named";
</details>
``` javascript
```javascript
/******/ ([
/* 0 */
/*!********************!*\
@ -336,4 +335,4 @@ chunk {0} output.js (main) 1.13 KiB [entry] [rendered]
[4] ./harmony.js 75 bytes {0} [built]
[exports: default, named]
cjs require ./harmony [3] ./example2.js 4:13-33
```
```

31
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}}_
```

4
examples/harmony-library/README.md
View File

@ -1,6 +1,6 @@
# webpack.config.js
``` javascript
```javascript
var path = require("path");
module.exports = {
// mode: "development || "production",
@ -16,7 +16,7 @@ module.exports = {
# dist/MyLibrary.umd.js
``` javascript
```javascript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();

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}}_
```

14
examples/harmony-unused/README.md
View File

@ -1,4 +1,4 @@
This example demonstrates how webpack tracks the using of ES6 imports and exports. Only used exports are emitted to the resulting bundle. The minimizing step then removes the declarations because they are unused.
This example demonstrates how webpack tracks the using of ES6 imports and exports. Only used exports are emitted to the resulting bundle. The minimizing step then removes the declarations because they are unused.
Excluding unused exports from bundles is known as "[tree-shaking](http://www.2ality.com/2015/12/webpack-tree-shaking.html)".
@ -8,7 +8,7 @@ In addition to that, `library.js` simulates an entry point to a big library. `li
# example.js
``` javascript
```javascript
import { add } from './math';
import * as library from "./library";
@ -18,7 +18,7 @@ library.reexportedMultiply(1, 2);
# math.js
``` javascript
```javascript
export function add() {
var sum = 0, i = 0, args = arguments, l = args.length;
while (i < l) {
@ -42,7 +42,7 @@ export function list() {
# library.js
``` javascript
```javascript
export { a, b, c } from "./abc";
export { add as reexportedAdd, multiply as reexportedMultiply } from "./math";
```
@ -51,7 +51,7 @@ export { add as reexportedAdd, multiply as reexportedMultiply } from "./math";
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
@ -142,7 +142,7 @@ export { add as reexportedAdd, multiply as reexportedMultiply } from "./math";
</details>
``` javascript
```javascript
/******/ ([
/* 0 */
/*!********************!*\
@ -245,7 +245,7 @@ function c() { console.log("c"); }
# dist/output.js
``` javascript
```javascript
!function(t){var e={};function n(r){if(e[r])return e[r].exports;var u=e[r]={i:r,l:!1,exports:{}};return t[r].call(u.exports,u,u.exports,n),u.l=!0,u.exports}n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var u in t)n.d(r,u,function(e){return t[e]}.bind(null,u));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="dist/",n(n.s=3)}([function(t,e,n){"use strict";function r(){for(var t=0,e=0,n=arguments,r=n.length;e<r;)t+=n[e++];return t}function u(){for(var t=1,e=0,n=arguments,r=n.length;e<r;)t*=n[e++];return t}n.d(e,"a",function(){return r}),n.d(e,"b",function(){return u})},function(t,e,n){"use strict"},function(t,e,n){"use strict";n(1);var r=n(0);n.d(e,"a",function(){return r.b})},function(t,e,n){"use strict";n.r(e);var r=n(0),u=n(2);Object(r.a)(1,2),u.a(1,2)}]);
```

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

@ -1,4 +1,4 @@
This example demonstrates how webpack tracks the using of ES6 imports and exports. Only used exports are emitted to the resulting bundle. The minimizing step then removes the declarations because they are unused.
This example demonstrates how webpack tracks the using of ES6 imports and exports. Only used exports are emitted to the resulting bundle. The minimizing step then removes the declarations because they are unused.
Excluding unused exports from bundles is known as "[tree-shaking](http://www.2ality.com/2015/12/webpack-tree-shaking.html)".
@ -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}}_
```

11
examples/harmony/README.md
View File

@ -1,7 +1,6 @@
# example.js
``` javascript
```javascript
import { increment as inc } from './increment';
var a = 1;
inc(a); // 2
@ -14,7 +13,7 @@ import("./async-loaded").then(function(asyncLoaded) {
# increment.js
``` javascript
```javascript
import { add } from './math';
export function increment(val) {
return add(val, 1);
@ -25,7 +24,7 @@ export function increment(val) {
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // install a JSONP callback for chunk loading
/******/ function webpackJsonpCallback(data) {
@ -228,7 +227,7 @@ export function increment(val) {
</details>
``` javascript
```javascript
/******/ ([
/* 0 */
/*!**********************!*\
@ -355,4 +354,4 @@ chunk {1} 1.output.js 24 bytes <{0}> [rendered]
[1] ./async-loaded.js 24 bytes {1} [built]
[exports: answer]
import() ./async-loaded ./example.js 6:0-24
```
```

19
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}}_
```

2
examples/http2-aggressive-splitting/README.md
View File

@ -16,7 +16,7 @@ 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
```js
var path = require("path");
var webpack = require("../../");
module.exports = {

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}}_
```

18
examples/hybrid-routing/README.md
View File

@ -1,6 +1,6 @@
# webpack.config.js
``` javascript
```javascript
var path = require("path");
module.exports = {
// mode: "development || "production",
@ -30,7 +30,7 @@ module.exports = {
# aEntry.js
``` javascript
```javascript
// Just show the page "a"
var render = require("./render");
render(require("./aPage"));
@ -40,7 +40,7 @@ render(require("./aPage"));
# aPage.js
``` javascript
```javascript
module.exports = function() {
return "This is page A.";
};
@ -50,7 +50,7 @@ module.exports = function() {
# router.js
``` javascript
```javascript
var render = require("./render");
// Event when another page should be opened
@ -73,7 +73,7 @@ window.onLinkToPage = function onLinkToPage(name) { // name is "a" or "b"
# pageA.html
``` html
```html
<html>
<head></head>
<body>
@ -86,7 +86,7 @@ window.onLinkToPage = function onLinkToPage(name) { // name is "a" or "b"
# dist/pageA~pageB.chunk.js
``` javascript
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],[
/* 0 */
/*!*******************!*\
@ -177,7 +177,7 @@ module.exports = webpackAsyncContext;
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // install a JSONP callback for chunk loading
/******/ function webpackJsonpCallback(data) {
@ -402,7 +402,7 @@ module.exports = webpackAsyncContext;
</details>
``` javascript
```javascript
/******/ ({
/***/ 4:
@ -436,7 +436,7 @@ render(__webpack_require__(/*! ./aPage */ 1));
# dist/aPage.chunk.js
``` javascript
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],[
/* 0 */,
/* 1 */

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}}_
```

15
examples/i18n/README.md
View File

@ -4,17 +4,16 @@ 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
```javascript
console.log(__("Hello World"));
console.log(__("Missing Text"));
```
# webpack.config.js
``` javascript
```javascript
var path = require("path");
var I18nPlugin = require("i18n-webpack-plugin");
var languages = {
@ -37,7 +36,7 @@ module.exports = Object.keys(languages).map(function(language) {
# de.json
``` javascript
```javascript
{
"Hello World": "Hallo Welt"
}
@ -47,7 +46,7 @@ module.exports = Object.keys(languages).map(function(language) {
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
@ -138,7 +137,7 @@ module.exports = Object.keys(languages).map(function(language) {
</details>
``` javascript
```javascript
/******/ ([
/* 0 */
/*!********************!*\
@ -156,7 +155,7 @@ console.log("Missing Text");
# dist/en.output.js
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
@ -314,4 +313,4 @@ Child de:
WARNING in ./example.js
Missing localization: Missing Text
```
```

27
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}}_
```

12
examples/loader/README.md
View File

@ -1,6 +1,6 @@
# example.js
``` javascript
```javascript
// use our loader
console.dir(require("./loader!./file"));
@ -11,13 +11,13 @@ console.dir(require("!css-loader!./test.css")); // manual
# file.js
``` javascript
```javascript
exports.foo = "bar";
```
# loader.js
``` javascript
```javascript
module.exports = function(content) {
return "exports.answer = 42;\n" + content;
}
@ -25,7 +25,7 @@ module.exports = function(content) {
# test.css
``` css
```css
.some-class {
color: hotpink;
}
@ -35,7 +35,7 @@ module.exports = function(content) {
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
@ -126,7 +126,7 @@ module.exports = function(content) {
</details>
``` javascript
```javascript
/******/ ([
/* 0 */
/*!********************!*\

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}}_
```

14
examples/many-pages/README.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.
@ -138,4 +138,4 @@ chunk {12} vendors~pageB.js (vendors~pageB) 43 bytes ={2}= ={5}= [initial] [re
chunk {13} vendors~pageC.js (vendors~pageC) 43 bytes ={2}= ={6}= [initial] [rendered] split chunk (cache group: vendors) (name: vendors~pageC)
> ./pages/c pageC
1 module
```
```

18
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}}_
```

12
examples/mixed/README.md
View File

@ -4,7 +4,7 @@ You see that everything is working nicely together.
# example.js
``` javascript
```javascript
// CommonJs-style requires
var commonjs1 = require("./commonjs");
var amd1 = require("./amd");
@ -23,7 +23,7 @@ require([
# amd.js
``` javascript
```javascript
// AMD Module Format
define(
"app/amd", // anonym is also supported
@ -40,7 +40,7 @@ define(
# commonjs.js
``` javascript
```javascript
// CommonJs Module Format
module.exports = 123;
@ -58,7 +58,7 @@ require(
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // install a JSONP callback for chunk loading
/******/ function webpackJsonpCallback(data) {
@ -261,7 +261,7 @@ require(
</details>
``` javascript
```javascript
/******/ ([
/* 0 */
/*!*********************!*\
@ -346,7 +346,7 @@ __webpack_require__.e(/*! AMD require */ 1).then(function() { var __WEBPACK_AMD_
# dist/1.output.js
``` javascript
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
/* 0 */,
/* 1 */,

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}}_
```

13
examples/multi-compiler/README.md
View File

@ -1,7 +1,6 @@
# example.js
``` javascript
```javascript
if(ENV === "mobile") {
require("./mobile-stuff");
}
@ -10,7 +9,7 @@ console.log("Running " + ENV + " build");
# webpack.config.js
``` javascript
```javascript
var path = require("path");
var webpack = require("../../");
module.exports = [
@ -50,7 +49,7 @@ module.exports = [
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
@ -141,7 +140,7 @@ module.exports = [
</details>
``` javascript
```javascript
/******/ ([
/* 0 */
/*!********************!*\
@ -159,7 +158,7 @@ console.log("Running " + "desktop" + " build");
# dist/mobile.js
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
@ -327,4 +326,4 @@ Child desktop:
> ./example main
[0] ./example.js 94 bytes {0} [built]
single entry ./example main
```
```

23
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}}_
```

6
examples/multi-part-library/README.md
View File

@ -14,7 +14,7 @@ Note: When your library has dependencies that should not be included in the comp
# webpack.config.js
``` javascript
```javascript
var path = require("path");
module.exports = {
// mode: "development || "production",
@ -33,7 +33,7 @@ module.exports = {
# dist/MyLibrary.alpha.js
``` javascript
```javascript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
@ -156,7 +156,7 @@ module.exports = "alpha";
# dist/MyLibrary.beta.js
``` javascript
```javascript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();

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}}_
```

50
examples/multiple-entry-points/README.md
View File

@ -8,29 +8,29 @@ 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
```javascript
var common = require("./common");
require(["./shared"], function(shared) {
shared("This is page A");
@ -39,7 +39,7 @@ require(["./shared"], function(shared) {
# pageB.js
``` javascript
```javascript
var common = require("./common");
require.ensure(["./shared"], function(require) {
var shared = require("./shared");
@ -49,7 +49,7 @@ require.ensure(["./shared"], function(require) {
# webpack.config.js
``` javascript
```javascript
module.exports = {
// mode: "development || "production",
entry: {
@ -74,7 +74,7 @@ module.exports = {
# pageA.html
``` html
```html
<html>
<head></head>
<body>
@ -86,7 +86,7 @@ module.exports = {
# dist/commons.js
``` javascript
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],[
/* 0 */
/*!*******************!*\
@ -105,7 +105,7 @@ module.exports = "Common";
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // install a JSONP callback for chunk loading
/******/ function webpackJsonpCallback(data) {
@ -330,7 +330,7 @@ module.exports = "Common";
</details>
``` javascript
```javascript
/******/ ({
/***/ 2:
@ -352,7 +352,7 @@ __webpack_require__.e(/*! AMD require */ 1).then(function() { var __WEBPACK_AMD_
# dist/pageB.js
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // install a JSONP callback for chunk loading
/******/ function webpackJsonpCallback(data) {
@ -595,7 +595,7 @@ __webpack_require__.e(/*! require.ensure */ 1).then((function(require) {
# dist/1.js
``` javascript
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
/* 0 */,
/* 1 */

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}}_
```

11
examples/named-chunks/README.md
View File

@ -1,6 +1,6 @@
# example.js
``` javascript
```javascript
var a = require("a");
require.ensure(["b"], function(require) {
@ -23,12 +23,11 @@ require.ensure(["b"], function(require) {
});
```
# dist/output.js
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // install a JSONP callback for chunk loading
/******/ function webpackJsonpCallback(data) {
@ -231,7 +230,7 @@ require.ensure(["b"], function(require) {
</details>
``` javascript
```javascript
/******/ ([
/* 0 */,
/* 1 */,
@ -280,7 +279,7 @@ __webpack_require__.e(/*! require.ensure */ 2).then((function(require) {
# dist/1.output.js
``` javascript
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
/* 0 */
/*!***************************!*\
@ -319,7 +318,7 @@ __webpack_require__.e(/*! require.ensure */ 2).then((function(require) {
# dist/2.output.js
``` javascript
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],[
/* 0 */
/*!***************************!*\

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}}_
```

39
examples/scope-hoisting/README.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,7 +22,7 @@ While module concatenation identifiers in modules are renamed to avoid conflicts
# example.js
``` javascript
```javascript
import { a, x, y } from "a";
import * as b from "b";
@ -33,7 +33,7 @@ import("./lazy").then(function(lazy) {
# lazy.js
``` javascript
```javascript
export * from "c";
import * as d from "d";
export { d };
@ -41,7 +41,7 @@ export { d };
# a.js
``` javascript
```javascript
// module a
export var a = "a";
export * from "shared";
@ -49,7 +49,7 @@ export * from "shared";
# b.js
``` javascript
```javascript
// module b
export function a() {
return "b";
@ -58,7 +58,7 @@ export function a() {
# c.js
``` javascript
```javascript
// module c
import { c as e } from "cjs";
@ -69,21 +69,21 @@ export { x, y } from "shared";
# d.js
``` javascript
```javascript
// module d
export var a = "d";
```
# cjs.js
``` javascript
```javascript
// module cjs (commonjs)
exports.c = "e";
```
# shared.js
``` javascript
```javascript
// shared module
export var x = "x";
export * from "shared2";
@ -91,16 +91,14 @@ export * from "shared2";
# shared2.js
``` javascript
```javascript
// shared2 module
export var y = "y";
```
# webpack.config.js
``` javascript
```javascript
module.exports = {
// mode: "development" || "production",
optimization: {
@ -111,14 +109,11 @@ module.exports = {
};
```
# dist/output.js
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // install a JSONP callback for chunk loading
/******/ function webpackJsonpCallback(data) {
@ -321,7 +316,7 @@ module.exports = {
</details>
``` javascript
```javascript
/******/ ([
/* 0 */
/*!********************************************!*\
@ -387,7 +382,7 @@ __webpack_require__.e(/*! import() */ 1).then(__webpack_require__.bind(null, /*!
# dist/1.output.js
``` javascript
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
/* 0 */,
/* 1 */,
@ -455,7 +450,7 @@ var a = "d";
Minimized
``` javascript
```javascript
(window.webpackJsonp=window.webpackJsonp||[]).push([[1],[,,function(n,r){r.c="e"},function(n,r,t){"use strict";t.r(r);var c={};t.r(c),t.d(c,"a",function(){return e});var o=t(2),u=t(0),d=String.fromCharCode(o.c.charCodeAt(0)-2),e="d";t.d(r,"c",function(){return d}),t.d(r,"x",function(){return u.a}),t.d(r,"y",function(){return u.b}),t.d(r,"d",function(){return c})}]]);
```

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}}_
```

16
examples/side-effects/README.md
View File

@ -10,12 +10,12 @@ 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
```javascript
import { a as a1, b as b1 } from "big-module";
import { a as a2, b as b2 } from "big-module-with-flag";
@ -29,7 +29,7 @@ console.log(
# node_modules/big-module/package.json
``` javascript
```javascript
{
"name": "big-module"
}
@ -37,7 +37,7 @@ console.log(
# node_modules/big-module-with-flag/package.json
``` javascript
```javascript
{
"name": "big-module-with-flag",
"sideEffects": false
@ -46,7 +46,7 @@ console.log(
# node_modules/big-module(-with-flag)/index.js
``` javascript
```javascript
export { a } from "./a";
export { b } from "./b";
export { c } from "./c";
@ -56,7 +56,7 @@ export { c } from "./c";
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
@ -147,7 +147,7 @@ export { c } from "./c";
</details>
``` javascript
```javascript
/******/ ([
/* 0 */
/*!********************!*\

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}}_
```

38
examples/source-map/README.md
View File

@ -2,7 +2,7 @@ This example demonstrates various types of source-maps.
# example.coffee
``` coffeescript
```coffeescript
# Taken from http://coffeescript.org/
# Objects:
@ -18,7 +18,7 @@ race = (winner, runners...) ->
# webpack.config.js
``` javascript
```javascript
var path = require("path");
module.exports = [
@ -51,7 +51,8 @@ module.exports = [
# Generated source-maps
## source-map.js and source-map.js.map
``` javascript
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
/* 0 */
/*!*************************************************************!*\
@ -84,12 +85,13 @@ race = function(winner, ...runners) {
//# sourceMappingURL=bundle-source-map.js.map
```
``` javascript
```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-source-map.js","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"],"sourceRoot":""}
```
## hidden-source-map.js and hidden-source-map.js.map
``` javascript
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
/* 0 */
/*!*************************************************************!*\
@ -121,12 +123,13 @@ race = function(winner, ...runners) {
],[[0,0]]]);
```
``` javascript
```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-hidden-source-map.js","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"],"sourceRoot":""}
```
## inline-source-map.js
``` javascript
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
/* 0 */
/*!*************************************************************!*\
@ -160,12 +163,14 @@ race = function(winner, ...runners) {
```
## nosources-source-map.js.map
``` javascript
```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
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
/* 0 */
/*!*************************************************************!*\
@ -181,7 +186,8 @@ eval("// Taken from http://coffeescript.org/\n\n// Objects:\nvar math, race;\n\n
```
## eval.js
``` javascript
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
/* 0 */
/*!*************************************************************!*\
@ -197,7 +203,8 @@ eval("// Taken from http://coffeescript.org/\n\n// Objects:\nvar math, race;\n\n
```
## cheap-eval-source-map.js
``` javascript
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
/* 0 */
/*!*************************************************************!*\
@ -213,7 +220,8 @@ eval("// Taken from http://coffeescript.org/\n\n// Objects:\nvar math, race;\n\n
```
## cheap-module-eval-source-map.js
``` javascript
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
/* 0 */
/*!*************************************************************!*\
@ -229,12 +237,14 @@ eval("// Taken from http://coffeescript.org/\n\n// Objects:\nvar math, race;\n\n
```
## cheap-module-source-map.js.map
``` javascript
```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
```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":""}
```

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}}_
```

6
examples/template-common.js
View File

@ -51,15 +51,15 @@ exports.replaceBase = (template) => {
};
exports.needResults = (template, prefix) => {
const regExp = prefix ? new RegExp(`\\{\\{${prefix}:`) : /\{\{/;
const regExp = prefix ? new RegExp(`_\\{\\{${prefix}:`) : /_\{\{/;
return regExp.test(template);
};
exports.replaceResults = (template, baseDir, stdout, prefix) => {
const regexp = new RegExp("\\{\\{" + (prefix ? prefix + ":" : "") + "([^:\\}]+)\\}\\}", "g");
const regexp = new RegExp("_\\{\\{" + (prefix ? prefix + ":" : "") + "([^:\\}]+)\\}\\}_", "g");
return template.replace(regexp, function(match) {
match = match.substr(2 + (prefix ? prefix.length + 1 : 0), match.length - 4 - (prefix ? prefix.length + 1 : 0));
match = match.substr(3 + (prefix ? prefix.length + 1 : 0), match.length - 6 - (prefix ? prefix.length + 1 : 0));
if(match === "stdout")
return stdout;
return fs.readFileSync(path.join(baseDir, match), "utf-8").replace(/[\r\n]*$/, "");

10
examples/two-explicit-vendor-chunks/README.md
View File

@ -1,6 +1,6 @@
# webpack.config.js
``` javascript
```javascript
var path = require("path");
module.exports = {
// mode: "development || "production",
@ -38,7 +38,7 @@ module.exports = {
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
@ -129,7 +129,7 @@ module.exports = {
</details>
``` javascript
```javascript
/******/ ([
/* 0 */
/*!***********************!*\
@ -157,7 +157,7 @@ module.exports = "Vendor1";
# dist/vendor2.js
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
@ -284,7 +284,7 @@ __webpack_require__(/*! ./vendor1 */ 1);
# dist/pageA.js
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};

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}}_
```

12
examples/wasm-simple/README.md
View File

@ -4,7 +4,7 @@ WebAssembly modules can be imported like other modules. Their download and compi
# example.js
``` javascript
```javascript
import("./add.wasm").then(addModule => {
console.log(addModule.add(22, 2200));
import("./math").then(math => {
@ -35,7 +35,7 @@ function timed(name, fn) {
# math.js
``` javascript
```javascript
import { add } from "./add.wasm";
import { factorial } from "./factorial.wasm";
import { fibonacci } from "./fibonacci.wasm";
@ -57,7 +57,7 @@ export function fibonacciJavascript(i) {
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // install a JSONP callback for chunk loading
/******/ function webpackJsonpCallback(data) {
@ -323,7 +323,7 @@ export function fibonacciJavascript(i) {
</details>
``` javascript
```javascript
/******/ ([
/* 0 */
/*!********************!*\
@ -366,7 +366,7 @@ function timed(name, fn) {
# dist/1.output.js
``` javascript
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
/* 0 */,
/* 1 */
@ -472,7 +472,7 @@ wasmExports["__webpack_init__"]()
# dist/2.output.js
``` javascript
```javascript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],[
/* 0 */,
/* 1 */

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}}_
```

13
examples/web-worker/README.md
View File

@ -1,7 +1,6 @@
# example.js
``` javascript
```javascript
var Worker = require("worker-loader?name=hash.worker.js!./worker");
var worker = new Worker;
worker.postMessage("b");
@ -12,7 +11,7 @@ worker.onmessage = function(event) {
# worker.js
``` javascript
```javascript
onmessage = function(event) {
var template = event.data;
require(["../require.context/templates/" + event.data], function(tmpl) {
@ -25,7 +24,7 @@ onmessage = function(event) {
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
@ -116,7 +115,7 @@ onmessage = function(event) {
</details>
``` javascript
```javascript
/******/ ([
/* 0 */
/*!********************!*\
@ -151,7 +150,7 @@ module.exports = function() {
# dist/[hash].worker.js
``` javascript
```javascript
/******/ (function(modules) { // webpackBootstrap
/******/ window["webpackChunk"] = function webpackChunkCallback(chunkIds, moreModules) {
/******/ for(var moduleId in moreModules) {
@ -286,7 +285,7 @@ onmessage = function(event) {
# dist/1.[hash].worker.js
``` javascript
```javascript
window["webpackChunk"]([1],[
/* 0 */,
/* 1 */

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}}_
```