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

chore(examples): regenerate README.md

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

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 */
/*!********************!*\

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:

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

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

@ -3,7 +3,7 @@
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 */,

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 */,

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 */,

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){}]]);
```

11
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 */
/*!********************!*\

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) {

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:

10
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 */
/*!********************!*\

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

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 */
/*!************************!*\

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"]}}}}
```

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 */
/*!********************!*\

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

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 = {};

8
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"));

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:

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:

15
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 */
/*!********************!*\

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-unused/README.md
View File

@ -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)}]);
```

9
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 */
/*!**********************!*\

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 = {

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 */

13
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 = {};

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 */
/*!********************!*\

12
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.

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 */,

11
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 = {};

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();

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 */

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 */
/*!***************************!*\

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})}]]);
```

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 */
/*!********************!*\

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":""}
```

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 = {};

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 */

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 */