chore(examples): regenerate README.md
This commit is contained in:
parent
83b0013209
commit
47969598eb
|
@ -1,6 +1,6 @@
|
||||||
# pageA.js
|
# pageA.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
require(["./common"], function(common) {
|
require(["./common"], function(common) {
|
||||||
common(require("./a"));
|
common(require("./a"));
|
||||||
});
|
});
|
||||||
|
@ -8,7 +8,7 @@ require(["./common"], function(common) {
|
||||||
|
|
||||||
# pageB.js
|
# pageB.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
require(["./common"], function(common) {
|
require(["./common"], function(common) {
|
||||||
common(require("./b"));
|
common(require("./b"));
|
||||||
});
|
});
|
||||||
|
@ -16,7 +16,7 @@ require(["./common"], function(common) {
|
||||||
|
|
||||||
# pageC.js
|
# pageC.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
require(["./a"], function(a) {
|
require(["./a"], function(a) {
|
||||||
console.log(a + require("./b"));
|
console.log(a + require("./b"));
|
||||||
});
|
});
|
||||||
|
@ -28,7 +28,7 @@ a big file...
|
||||||
|
|
||||||
# webpack.config.js
|
# webpack.config.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
var path = require("path");
|
var path = require("path");
|
||||||
var AggressiveMergingPlugin = require("../../lib/optimize/AggressiveMergingPlugin");
|
var AggressiveMergingPlugin = require("../../lib/optimize/AggressiveMergingPlugin");
|
||||||
module.exports = {
|
module.exports = {
|
||||||
|
|
|
@ -4,12 +4,12 @@ A very simple solution to this problem is to create another chunk which contains
|
||||||
|
|
||||||
The configuration required for this is:
|
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.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.chunkFilename` (Note that this example doesn't do this because of the example generator infrastructure, but you should)
|
||||||
|
|
||||||
# example.js
|
# example.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
// some module
|
// some module
|
||||||
import("./async1");
|
import("./async1");
|
||||||
import("./async2");
|
import("./async2");
|
||||||
|
@ -17,7 +17,7 @@ import("./async2");
|
||||||
|
|
||||||
# webpack.config.js
|
# webpack.config.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
var path = require("path");
|
var path = require("path");
|
||||||
module.exports = {
|
module.exports = {
|
||||||
// mode: "development || "production",
|
// mode: "development || "production",
|
||||||
|
@ -37,20 +37,17 @@ module.exports = {
|
||||||
|
|
||||||
# index.html
|
# index.html
|
||||||
|
|
||||||
``` html
|
```html
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head> </head>
|
||||||
</head>
|
<body>
|
||||||
<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 src="dist/main.[chunkhash].js"></script>
|
||||||
<script>
|
</body>
|
||||||
!function(e){function r(r){for(var n,i,a=r[0],c=r[1],l=r[2],p=0,s=[];p<a.length;p++)i=a[p],o[i]&&s.push(o[i][0]),o[i]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,l||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,a=1;a<t.length;a++){var c=t[a];0!==o[c]&&(n=!1)}n&&(u.splice(r--,1),e=i(i.s=t[0]))}return e}var n={},o={1:0},u=[];function i(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,i),t.l=!0,t.exports}i.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise(function(r,n){t=o[e]=[r,n]});r.push(t[2]=n);var u,a=document.createElement("script");a.charset="utf-8",a.timeout=120,i.nc&&a.setAttribute("nonce",i.nc),a.src=function(e){return i.p+""+({}[e]||e)+".[chunkhash].js"}(e),u=function(r){a.onerror=a.onload=null,clearTimeout(c);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src,i=new Error("Loading chunk "+e+" failed.\n("+n+": "+u+")");i.type=n,i.request=u,t[1](i)}o[e]=void 0}};var c=setTimeout(function(){u({type:"timeout",target:a})},12e4);a.onerror=a.onload=u,document.head.appendChild(a)}return Promise.all(r)},i.m=e,i.c=n,i.d=function(e,r,t){i.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,r){if(1&r&&(e=i(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(i.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)i.d(t,n,function(r){return e[r]}.bind(null,n));return t},i.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(r,"a",r),r},i.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},i.p="dist/",i.oe=function(e){throw console.error(e),e};var a=window.webpackJsonp=window.webpackJsonp||[],c=a.push.bind(a);a.push=r,a=a.slice();for(var l=0;l<a.length;l++)r(a[l]);var f=c;t()}([]);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script src="dist/main.[chunkhash].js"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -58,7 +55,7 @@ module.exports = {
|
||||||
|
|
||||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // install a JSONP callback for chunk loading
|
/******/ // install a JSONP callback for chunk loading
|
||||||
/******/ function webpackJsonpCallback(data) {
|
/******/ function webpackJsonpCallback(data) {
|
||||||
|
@ -281,13 +278,13 @@ module.exports = {
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ ([]);
|
/******/ ([]);
|
||||||
```
|
```
|
||||||
|
|
||||||
# dist/main.[chunkhash].js
|
# dist/main.[chunkhash].js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
|
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
|
||||||
/* 0 */
|
/* 0 */
|
||||||
/*!********************!*\
|
/*!********************!*\
|
||||||
|
|
|
@ -4,7 +4,7 @@ The bundle loader is used to create a wrapper module for `file.js` that loads th
|
||||||
|
|
||||||
# example.js
|
# example.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
require("bundle-loader!./file.js")(function(fileJsExports) {
|
require("bundle-loader!./file.js")(function(fileJsExports) {
|
||||||
console.log(fileJsExports);
|
console.log(fileJsExports);
|
||||||
});
|
});
|
||||||
|
@ -12,16 +12,15 @@ require("bundle-loader!./file.js")(function(fileJsExports) {
|
||||||
|
|
||||||
# file.js
|
# file.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
module.exports = "It works";
|
module.exports = "It works";
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
# dist/output.js
|
# dist/output.js
|
||||||
|
|
||||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // install a JSONP callback for chunk loading
|
/******/ // install a JSONP callback for chunk loading
|
||||||
/******/ function webpackJsonpCallback(data) {
|
/******/ function webpackJsonpCallback(data) {
|
||||||
|
@ -224,7 +223,7 @@ module.exports = "It works";
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ ([
|
/******/ ([
|
||||||
/* 0 */
|
/* 0 */
|
||||||
/*!********************!*\
|
/*!********************!*\
|
||||||
|
@ -267,7 +266,7 @@ __webpack_require__.e(/*! require.ensure */ 1).then((function(require) {
|
||||||
|
|
||||||
# dist/1.output.js
|
# dist/1.output.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],{
|
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],{
|
||||||
|
|
||||||
/***/ 2:
|
/***/ 2:
|
||||||
|
|
|
@ -8,7 +8,7 @@ Providing dynamic expressions to `import` is possible. The same limits as with d
|
||||||
|
|
||||||
# example.js
|
# example.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
import a from "a";
|
import a from "a";
|
||||||
|
|
||||||
import("b").then(function(b) {
|
import("b").then(function(b) {
|
||||||
|
@ -24,12 +24,11 @@ Promise.all([loadC("1"), loadC("2")]).then(function(arr) {
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
# dist/output.js
|
# dist/output.js
|
||||||
|
|
||||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // install a JSONP callback for chunk loading
|
/******/ // install a JSONP callback for chunk loading
|
||||||
/******/ function webpackJsonpCallback(data) {
|
/******/ function webpackJsonpCallback(data) {
|
||||||
|
@ -232,7 +231,7 @@ Promise.all([loadC("1"), loadC("2")]).then(function(arr) {
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ ([
|
/******/ ([
|
||||||
/* 0 */,
|
/* 0 */,
|
||||||
/* 1 */,
|
/* 1 */,
|
||||||
|
@ -322,7 +321,6 @@ module.exports = webpackAsyncContext;
|
||||||
/******/ ]);
|
/******/ ]);
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
# Info
|
# Info
|
||||||
|
|
||||||
## Unoptimized
|
## Unoptimized
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
# example.js
|
# 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.
|
end in `.noimport.js` within the `templates` folder will be bundled.
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
async function getTemplate(templateName) {
|
async function getTemplate(templateName) {
|
||||||
try {
|
try {
|
||||||
let template = await import(
|
let template = await import(
|
||||||
|
@ -28,16 +28,16 @@ getTemplate("baz.noimport");
|
||||||
|
|
||||||
# templates/
|
# templates/
|
||||||
|
|
||||||
* foo.js
|
- foo.js
|
||||||
* foo.noimport.js
|
- foo.noimport.js
|
||||||
* baz.js
|
- baz.js
|
||||||
* foo.noimport.js
|
- foo.noimport.js
|
||||||
* bar.js
|
- bar.js
|
||||||
* foo.noimport.js
|
- foo.noimport.js
|
||||||
|
|
||||||
All templates are of this pattern:
|
All templates are of this pattern:
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
var foo = "foo";
|
var foo = "foo";
|
||||||
|
|
||||||
export default foo;
|
export default foo;
|
||||||
|
@ -47,7 +47,7 @@ export default foo;
|
||||||
|
|
||||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // install a JSONP callback for chunk loading
|
/******/ // install a JSONP callback for chunk loading
|
||||||
/******/ function webpackJsonpCallback(data) {
|
/******/ function webpackJsonpCallback(data) {
|
||||||
|
@ -250,7 +250,7 @@ export default foo;
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ ([
|
/******/ ([
|
||||||
/* 0 */,
|
/* 0 */,
|
||||||
/* 1 */,
|
/* 1 */,
|
||||||
|
|
|
@ -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.
|
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) {
|
async function getTemplate(templateName) {
|
||||||
try {
|
try {
|
||||||
let template = await import(`./templates/${templateName}`);
|
let template = await import(`./templates/${templateName}`);
|
||||||
|
@ -20,13 +20,13 @@ getTemplate("baz");
|
||||||
|
|
||||||
# templates/
|
# templates/
|
||||||
|
|
||||||
* foo.js
|
- foo.js
|
||||||
* baz.js
|
- baz.js
|
||||||
* bar.js
|
- bar.js
|
||||||
|
|
||||||
All templates are of this pattern:
|
All templates are of this pattern:
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
var foo = "foo";
|
var foo = "foo";
|
||||||
|
|
||||||
export default foo;
|
export default foo;
|
||||||
|
@ -36,7 +36,7 @@ export default foo;
|
||||||
|
|
||||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // install a JSONP callback for chunk loading
|
/******/ // install a JSONP callback for chunk loading
|
||||||
/******/ function webpackJsonpCallback(data) {
|
/******/ function webpackJsonpCallback(data) {
|
||||||
|
@ -239,7 +239,7 @@ export default foo;
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ ([
|
/******/ ([
|
||||||
/* 0 */,
|
/* 0 */,
|
||||||
/* 1 */,
|
/* 1 */,
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
This example illustrates how to specify chunk name in `require.ensure()` and `import()` to separated modules into separate chunks manually.
|
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) {
|
import("./templates/foo" /* webpackChunkName: "chunk-foo" */ ).then(function(foo) {
|
||||||
console.log('foo:', foo);
|
console.log('foo:', foo);
|
||||||
})
|
})
|
||||||
|
@ -20,13 +20,13 @@ import("./templates/ba" + createContextVar /* webpackChunkName: "chunk-bar-baz"
|
||||||
|
|
||||||
# templates/
|
# templates/
|
||||||
|
|
||||||
* foo.js
|
- foo.js
|
||||||
* baz.js
|
- baz.js
|
||||||
* bar.js
|
- bar.js
|
||||||
|
|
||||||
All templates are of this pattern:
|
All templates are of this pattern:
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
var foo = "foo";
|
var foo = "foo";
|
||||||
|
|
||||||
export default foo;
|
export default foo;
|
||||||
|
@ -36,7 +36,7 @@ export default foo;
|
||||||
|
|
||||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // install a JSONP callback for chunk loading
|
/******/ // install a JSONP callback for chunk loading
|
||||||
/******/ function webpackJsonpCallback(data) {
|
/******/ function webpackJsonpCallback(data) {
|
||||||
|
@ -239,7 +239,7 @@ export default foo;
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ ([
|
/******/ ([
|
||||||
/* 0 */,
|
/* 0 */,
|
||||||
/* 1 */,
|
/* 1 */,
|
||||||
|
|
|
@ -1,32 +1,32 @@
|
||||||
This example illustrates a very simple case of Code Splitting with `require.ensure`.
|
This example illustrates a very simple case of Code Splitting with `require.ensure`.
|
||||||
|
|
||||||
* `a` and `b` are required normally via CommonJS
|
- `a` and `b` are required normally via CommonJS
|
||||||
* `c` is depended through the `require.ensure` array.
|
- `c` is depended through the `require.ensure` array.
|
||||||
* This means: make it available, but don't execute it
|
- This means: make it available, but don't execute it
|
||||||
* webpack will load it on demand
|
- webpack will load it on demand
|
||||||
* `b` and `d` are required via CommonJs in the `require.ensure` callback
|
- `b` and `d` are required via CommonJs in the `require.ensure` callback
|
||||||
* webpack detects that these are in the on-demand-callback and
|
- webpack detects that these are in the on-demand-callback and
|
||||||
* will load them on demand
|
- will load them on demand
|
||||||
* webpacks optimizer can optimize `b` away
|
- webpacks optimizer can optimize `b` away
|
||||||
* as it is already available through the parent chunks
|
- as it is already available through the parent chunks
|
||||||
|
|
||||||
You can see that webpack outputs two files/chunks:
|
You can see that webpack outputs two files/chunks:
|
||||||
|
|
||||||
* `output.js` is the entry chunk and contains
|
- `output.js` is the entry chunk and contains
|
||||||
* the module system
|
- the module system
|
||||||
* chunk loading logic
|
- chunk loading logic
|
||||||
* the entry point `example.js`
|
- the entry point `example.js`
|
||||||
* module `a`
|
- module `a`
|
||||||
* module `b`
|
- module `b`
|
||||||
* `1.output.js` is an additional chunk (on demand loaded) and contains
|
- `1.output.js` is an additional chunk (on demand loaded) and contains
|
||||||
* module `c`
|
- module `c`
|
||||||
* module `d`
|
- module `d`
|
||||||
|
|
||||||
You can see that chunks are loaded via JSONP. The additional chunks are pretty small and minimize well.
|
You can see that chunks are loaded via JSONP. The additional chunks are pretty small and minimize well.
|
||||||
|
|
||||||
# example.js
|
# example.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
var a = require("a");
|
var a = require("a");
|
||||||
var b = require("b");
|
var b = require("b");
|
||||||
require.ensure(["c"], function(require) {
|
require.ensure(["c"], function(require) {
|
||||||
|
@ -35,12 +35,11 @@ require.ensure(["c"], function(require) {
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
# dist/output.js
|
# dist/output.js
|
||||||
|
|
||||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // install a JSONP callback for chunk loading
|
/******/ // install a JSONP callback for chunk loading
|
||||||
/******/ function webpackJsonpCallback(data) {
|
/******/ function webpackJsonpCallback(data) {
|
||||||
|
@ -243,7 +242,7 @@ require.ensure(["c"], function(require) {
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ ([
|
/******/ ([
|
||||||
/* 0 */
|
/* 0 */
|
||||||
/*!***************************!*\
|
/*!***************************!*\
|
||||||
|
@ -285,7 +284,7 @@ __webpack_require__.e(/*! require.ensure */ 1).then((function(require) {
|
||||||
|
|
||||||
# dist/1.output.js
|
# dist/1.output.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
|
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
|
||||||
/* 0 */,
|
/* 0 */,
|
||||||
/* 1 */,
|
/* 1 */,
|
||||||
|
@ -315,7 +314,7 @@ __webpack_require__.e(/*! require.ensure */ 1).then((function(require) {
|
||||||
|
|
||||||
Minimized
|
Minimized
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[1],[,,,function(n,o){},function(n,o){}]]);
|
(window.webpackJsonp=window.webpackJsonp||[]).push([[1],[,,,function(n,o){},function(n,o){}]]);
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
@ -1,13 +1,12 @@
|
||||||
|
|
||||||
# example.js
|
# example.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
console.log(require("./cup1"));
|
console.log(require("./cup1"));
|
||||||
```
|
```
|
||||||
|
|
||||||
# cup1.coffee
|
# cup1.coffee
|
||||||
|
|
||||||
``` coffee-script
|
```coffee-script
|
||||||
module.exports =
|
module.exports =
|
||||||
cool: "stuff"
|
cool: "stuff"
|
||||||
answer: 42
|
answer: 42
|
||||||
|
@ -17,7 +16,7 @@ module.exports =
|
||||||
|
|
||||||
# cup2.coffee
|
# cup2.coffee
|
||||||
|
|
||||||
``` coffee-script
|
```coffee-script
|
||||||
console.log "yeah coffee-script"
|
console.log "yeah coffee-script"
|
||||||
|
|
||||||
module.exports = 42
|
module.exports = 42
|
||||||
|
@ -27,7 +26,7 @@ module.exports = 42
|
||||||
|
|
||||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // The module cache
|
/******/ // The module cache
|
||||||
/******/ var installedModules = {};
|
/******/ var installedModules = {};
|
||||||
|
@ -118,7 +117,7 @@ module.exports = 42
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ ([
|
/******/ ([
|
||||||
/* 0 */
|
/* 0 */
|
||||||
/*!********************!*\
|
/*!********************!*\
|
||||||
|
@ -200,4 +199,4 @@ chunk {0} output.js (main) 206 bytes [entry] [rendered]
|
||||||
single entry ./example.js main
|
single entry ./example.js main
|
||||||
[2] ./cup1.coffee 118 bytes {0} [built]
|
[2] ./cup1.coffee 118 bytes {0} [built]
|
||||||
cjs require ./cup1 [1] ./example.js 1:12-29
|
cjs require ./cup1 [1] ./example.js 1:12-29
|
||||||
```
|
```
|
||||||
|
|
|
@ -33,7 +33,7 @@ With this bundle configuration, you would load your third party libraries, then
|
||||||
|
|
||||||
# webpack.config.js
|
# webpack.config.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
var path = require("path");
|
var path = require("path");
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
|
@ -71,7 +71,7 @@ module.exports = {
|
||||||
|
|
||||||
# dist/vendor.js
|
# dist/vendor.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],{
|
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],{
|
||||||
|
|
||||||
/***/ 1:
|
/***/ 1:
|
||||||
|
@ -101,7 +101,7 @@ module.exports = "vendor2";
|
||||||
|
|
||||||
# dist/commons~pageA~pageB~pageC.js
|
# dist/commons~pageA~pageB~pageC.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{
|
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{
|
||||||
|
|
||||||
/***/ 3:
|
/***/ 3:
|
||||||
|
@ -120,7 +120,7 @@ module.exports = "utility2";
|
||||||
|
|
||||||
# dist/commons~pageB~pageC.js
|
# dist/commons~pageB~pageC.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[4],{
|
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[4],{
|
||||||
|
|
||||||
/***/ 6:
|
/***/ 6:
|
||||||
|
@ -141,7 +141,7 @@ module.exports = "utility3";
|
||||||
|
|
||||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // install a JSONP callback for chunk loading
|
/******/ // install a JSONP callback for chunk loading
|
||||||
/******/ function webpackJsonpCallback(data) {
|
/******/ function webpackJsonpCallback(data) {
|
||||||
|
@ -300,7 +300,7 @@ module.exports = "utility3";
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ ([
|
/******/ ([
|
||||||
/* 0 */
|
/* 0 */
|
||||||
/*!******************!*\
|
/*!******************!*\
|
||||||
|
@ -333,7 +333,7 @@ module.exports = "utility1";
|
||||||
|
|
||||||
# dist/pageB.js
|
# dist/pageB.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // install a JSONP callback for chunk loading
|
/******/ // install a JSONP callback for chunk loading
|
||||||
/******/ function webpackJsonpCallback(data) {
|
/******/ function webpackJsonpCallback(data) {
|
||||||
|
@ -511,7 +511,7 @@ module.exports = "pageB";
|
||||||
|
|
||||||
# dist/pageC.js
|
# dist/pageC.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // install a JSONP callback for chunk loading
|
/******/ // install a JSONP callback for chunk loading
|
||||||
/******/ function webpackJsonpCallback(data) {
|
/******/ function webpackJsonpCallback(data) {
|
||||||
|
|
|
@ -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
|
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
|
- `pageA` and `pageB` are dynamically required
|
||||||
* `pageC` and `pageA` both require the `reusableComponent`
|
- `pageC` and `pageA` both require the `reusableComponent`
|
||||||
* `pageB` dynamically requires `PageC`
|
- `pageB` dynamically requires `PageC`
|
||||||
|
|
||||||
You can see that webpack outputs five files/chunks:
|
You can see that webpack outputs five files/chunks:
|
||||||
|
|
||||||
* `output.js` is the entry chunk and contains
|
- `output.js` is the entry chunk and contains
|
||||||
* the module system
|
- the module system
|
||||||
* chunk loading logic
|
- chunk loading logic
|
||||||
* the entry point `example.js`
|
- the entry point `example.js`
|
||||||
* `0.output.js` is an additional chunk
|
- `0.output.js` is an additional chunk
|
||||||
* module `reusableComponent`
|
- module `reusableComponent`
|
||||||
* `1.output.js` is an additional chunk
|
- `1.output.js` is an additional chunk
|
||||||
* module `pageB`
|
- module `pageB`
|
||||||
* `2.output.js` is an additional chunk
|
- `2.output.js` is an additional chunk
|
||||||
* module `pageA`
|
- module `pageA`
|
||||||
* `3.output.js` is an additional chunk
|
- `3.output.js` is an additional chunk
|
||||||
* module `pageC`
|
- module `pageC`
|
||||||
|
|
||||||
|
|
||||||
# example.js
|
# example.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
var main = function() {
|
var main = function() {
|
||||||
console.log("Main class");
|
console.log("Main class");
|
||||||
require.ensure([], () => {
|
require.ensure([], () => {
|
||||||
|
@ -40,7 +39,7 @@ main();
|
||||||
|
|
||||||
# pageA.js
|
# pageA.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
var reusableComponent = require("./reusableComponent");
|
var reusableComponent = require("./reusableComponent");
|
||||||
|
|
||||||
module.exports = function() {
|
module.exports = function() {
|
||||||
|
@ -51,7 +50,7 @@ module.exports = function() {
|
||||||
|
|
||||||
# pageB.js
|
# pageB.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
module.exports = function() {
|
module.exports = function() {
|
||||||
console.log("Page B");
|
console.log("Page B");
|
||||||
require.ensure([], ()=>{
|
require.ensure([], ()=>{
|
||||||
|
@ -63,7 +62,7 @@ module.exports = function() {
|
||||||
|
|
||||||
# pageC.js
|
# pageC.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
var reusableComponent = require("./reusableComponent");
|
var reusableComponent = require("./reusableComponent");
|
||||||
|
|
||||||
module.exports = function() {
|
module.exports = function() {
|
||||||
|
@ -74,7 +73,7 @@ module.exports = function() {
|
||||||
|
|
||||||
# reusableComponent.js
|
# reusableComponent.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
module.exports = function() {
|
module.exports = function() {
|
||||||
console.log("reusable Component");
|
console.log("reusable Component");
|
||||||
};
|
};
|
||||||
|
@ -82,7 +81,7 @@ module.exports = function() {
|
||||||
|
|
||||||
# webpack.config.js
|
# webpack.config.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
"use strict";
|
"use strict";
|
||||||
const path = require("path");
|
const path = require("path");
|
||||||
|
|
||||||
|
@ -108,7 +107,7 @@ module.exports = {
|
||||||
|
|
||||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // install a JSONP callback for chunk loading
|
/******/ // install a JSONP callback for chunk loading
|
||||||
/******/ function webpackJsonpCallback(data) {
|
/******/ function webpackJsonpCallback(data) {
|
||||||
|
@ -311,7 +310,7 @@ module.exports = {
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ ([
|
/******/ ([
|
||||||
/* 0 */
|
/* 0 */
|
||||||
/*!**************************!*\
|
/*!**************************!*\
|
||||||
|
@ -352,7 +351,7 @@ main();
|
||||||
|
|
||||||
# dist/0.output.js
|
# dist/0.output.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],{
|
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],{
|
||||||
|
|
||||||
/***/ 4:
|
/***/ 4:
|
||||||
|
@ -374,7 +373,7 @@ module.exports = function() {
|
||||||
|
|
||||||
# dist/2.output.js
|
# dist/2.output.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{
|
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{
|
||||||
|
|
||||||
/***/ 2:
|
/***/ 2:
|
||||||
|
@ -399,7 +398,7 @@ module.exports = function() {
|
||||||
|
|
||||||
# dist/3.output.js
|
# dist/3.output.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[3],{
|
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[3],{
|
||||||
|
|
||||||
/***/ 3:
|
/***/ 3:
|
||||||
|
@ -425,7 +424,7 @@ module.exports = function() {
|
||||||
|
|
||||||
# dist/4.output.js
|
# dist/4.output.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[4],{
|
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[4],{
|
||||||
|
|
||||||
/***/ 5:
|
/***/ 5:
|
||||||
|
|
|
@ -8,7 +8,7 @@ You can also see the info messages webpack prints to console (for both normal an
|
||||||
|
|
||||||
# example.js
|
# example.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
const inc = require('./increment').increment;
|
const inc = require('./increment').increment;
|
||||||
const a = 1;
|
const a = 1;
|
||||||
inc(a); // 2
|
inc(a); // 2
|
||||||
|
@ -16,7 +16,7 @@ inc(a); // 2
|
||||||
|
|
||||||
# increment.js
|
# increment.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
const add = require('./math').add;
|
const add = require('./math').add;
|
||||||
exports.increment = function(val) {
|
exports.increment = function(val) {
|
||||||
return add(val, 1);
|
return add(val, 1);
|
||||||
|
@ -25,7 +25,7 @@ exports.increment = function(val) {
|
||||||
|
|
||||||
# math.js
|
# math.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
exports.add = function() {
|
exports.add = function() {
|
||||||
var sum = 0, i = 0, args = arguments, l = args.length;
|
var sum = 0, i = 0, args = arguments, l = args.length;
|
||||||
while (i < l) {
|
while (i < l) {
|
||||||
|
@ -39,7 +39,7 @@ exports.add = function() {
|
||||||
|
|
||||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // The module cache
|
/******/ // The module cache
|
||||||
/******/ var installedModules = {};
|
/******/ var installedModules = {};
|
||||||
|
@ -130,7 +130,7 @@ exports.add = function() {
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ ([
|
/******/ ([
|
||||||
/* 0 */
|
/* 0 */
|
||||||
/*!********************!*\
|
/*!********************!*\
|
||||||
|
@ -214,4 +214,4 @@ chunk {0} output.js (main) 326 bytes [entry] [rendered]
|
||||||
cjs require ./increment [0] ./example.js 1:12-34
|
cjs require ./increment [0] ./example.js 1:12-34
|
||||||
[2] ./math.js 156 bytes {0} [built]
|
[2] ./math.js 156 bytes {0} [built]
|
||||||
cjs require ./math [1] ./increment.js 1:12-29
|
cjs require ./math [1] ./increment.js 1:12-29
|
||||||
```
|
```
|
||||||
|
|
|
@ -8,7 +8,7 @@ A manifest is created which includes mappings from module names to internal ids.
|
||||||
|
|
||||||
### webpack.config.js
|
### webpack.config.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
var path = require("path");
|
var path = require("path");
|
||||||
var webpack = require("../../../");
|
var webpack = require("../../../");
|
||||||
|
|
||||||
|
@ -32,7 +32,7 @@ module.exports = {
|
||||||
|
|
||||||
# example-vendor
|
# example-vendor
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
export function square(n) {
|
export function square(n) {
|
||||||
return n * n;
|
return n * n;
|
||||||
}
|
}
|
||||||
|
@ -40,7 +40,7 @@ export function square(n) {
|
||||||
|
|
||||||
# dist/vendor.js
|
# dist/vendor.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
var vendor_lib_a132d30959ef28c3f004 =
|
var vendor_lib_a132d30959ef28c3f004 =
|
||||||
```
|
```
|
||||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||||
|
@ -171,7 +171,7 @@ function square(n) {
|
||||||
|
|
||||||
# dist/vendor-manifest.json
|
# dist/vendor-manifest.json
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
{"name":"vendor_lib_a132d30959ef28c3f004","content":{"../node_modules/example-vendor.js":{"id":1,"buildMeta":{"exportsType":"namespace","providedExports":["square"]}}}}
|
{"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
|
DllPlugin
|
||||||
+ 1 hidden module
|
+ 1 hidden module
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
@ -4,7 +4,7 @@ The previously built vendor dll is used. The DllReferencePlugin reads the conten
|
||||||
|
|
||||||
# webpack.config.js
|
# webpack.config.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
var path = require("path");
|
var path = require("path");
|
||||||
var webpack = require("../../../");
|
var webpack = require("../../../");
|
||||||
|
|
||||||
|
@ -27,7 +27,7 @@ module.exports = {
|
||||||
|
|
||||||
# example-app.js
|
# example-app.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
import { square } from "example-vendor";
|
import { square } from "example-vendor";
|
||||||
|
|
||||||
console.log(square(7));
|
console.log(square(7));
|
||||||
|
@ -36,7 +36,7 @@ console.log(new square(7));
|
||||||
|
|
||||||
# example.html
|
# example.html
|
||||||
|
|
||||||
``` html
|
```html
|
||||||
<html>
|
<html>
|
||||||
<head></head>
|
<head></head>
|
||||||
<body>
|
<body>
|
||||||
|
@ -50,7 +50,7 @@ console.log(new square(7));
|
||||||
|
|
||||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // The module cache
|
/******/ // The module cache
|
||||||
/******/ var installedModules = {};
|
/******/ var installedModules = {};
|
||||||
|
@ -141,7 +141,7 @@ console.log(new square(7));
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ ([
|
/******/ ([
|
||||||
/* 0 */
|
/* 0 */
|
||||||
/*!************************!*\
|
/*!************************!*\
|
||||||
|
|
|
@ -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)
|
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).
|
and [scope hoisting example](https://github.com/webpack/webpack/tree/master/examples/scope-hoisting).
|
||||||
|
|
||||||
|
|
||||||
# example.js
|
# example.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
export { a, b } from "./a";
|
export { a, b } from "./a";
|
||||||
export { c } from "./cjs";
|
export { c } from "./cjs";
|
||||||
```
|
```
|
||||||
|
|
||||||
# webpack.config.js
|
# webpack.config.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
var path = require("path");
|
var path = require("path");
|
||||||
var webpack = require("../../");
|
var webpack = require("../../");
|
||||||
|
|
||||||
|
@ -63,7 +62,7 @@ module.exports = {
|
||||||
|
|
||||||
# dist/dll.js
|
# dist/dll.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
var dll_3eea518f6d09aac41ec7 =
|
var dll_3eea518f6d09aac41ec7 =
|
||||||
```
|
```
|
||||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||||
|
@ -224,7 +223,7 @@ var cjs = __webpack_require__(1);
|
||||||
|
|
||||||
# dist/dll-manifest.json
|
# dist/dll-manifest.json
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
{"name":"dll_3eea518f6d09aac41ec7","content":{"./example.js":{"id":2,"buildMeta":{"exportsType":"namespace","providedExports":["a","b","c"]}}}}
|
{"name":"dll_3eea518f6d09aac41ec7","content":{"./example.js":{"id":2,"buildMeta":{"exportsType":"namespace","providedExports":["a","b","c"]}}}}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
@ -6,7 +6,7 @@ This is the _user_ bundle, which uses the manifest from [dll-reference example](
|
||||||
|
|
||||||
# webpack.config.js
|
# webpack.config.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
var path = require("path");
|
var path = require("path");
|
||||||
var webpack = require("../../");
|
var webpack = require("../../");
|
||||||
module.exports = {
|
module.exports = {
|
||||||
|
@ -27,7 +27,7 @@ module.exports = {
|
||||||
|
|
||||||
# example.js
|
# example.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
console.log(require("../dll/alpha"));
|
console.log(require("../dll/alpha"));
|
||||||
console.log(require("../dll/a"));
|
console.log(require("../dll/a"));
|
||||||
|
|
||||||
|
@ -42,7 +42,7 @@ console.log(require("module"));
|
||||||
|
|
||||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // The module cache
|
/******/ // The module cache
|
||||||
/******/ var installedModules = {};
|
/******/ var installedModules = {};
|
||||||
|
@ -133,7 +133,7 @@ console.log(require("module"));
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ ([
|
/******/ ([
|
||||||
/* 0 */
|
/* 0 */
|
||||||
/*!********************!*\
|
/*!********************!*\
|
||||||
|
|
|
@ -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)
|
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
|
# webpack.config.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
var path = require("path");
|
var path = require("path");
|
||||||
var webpack = require("../../");
|
var webpack = require("../../");
|
||||||
module.exports = {
|
module.exports = {
|
||||||
|
@ -35,7 +34,7 @@ module.exports = {
|
||||||
|
|
||||||
# dist/MyDll.alpha.js
|
# dist/MyDll.alpha.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
var alpha_d61ee01b5c383d26e2c0 =
|
var alpha_d61ee01b5c383d26e2c0 =
|
||||||
```
|
```
|
||||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||||
|
@ -182,7 +181,7 @@ module.exports = "module";
|
||||||
|
|
||||||
# dist/alpha-manifest.json
|
# 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}}}}
|
{"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}}}}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
# webpack.config.js
|
# webpack.config.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
var path = require("path");
|
var path = require("path");
|
||||||
var webpack = require("../../");
|
var webpack = require("../../");
|
||||||
module.exports = [
|
module.exports = [
|
||||||
|
@ -45,7 +45,7 @@ module.exports = [
|
||||||
|
|
||||||
# dist/vendor.js
|
# dist/vendor.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
var vendor_d9f5eab93a0e9010218f =
|
var vendor_d9f5eab93a0e9010218f =
|
||||||
```
|
```
|
||||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||||
|
@ -181,7 +181,7 @@ module.exports = "Vendor2";
|
||||||
|
|
||||||
# dist/pageA.js
|
# dist/pageA.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // The module cache
|
/******/ // The module cache
|
||||||
/******/ var installedModules = {};
|
/******/ var installedModules = {};
|
||||||
|
|
|
@ -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:
|
In the complex case we specify different values for each environment:
|
||||||
|
|
||||||
| environment | config value | resolved as |
|
| environment | config value | resolved as |
|
||||||
|--------------------|--------------------------|------------------------------|
|
| ------------------ | ------------------------ | ---------------------------- |
|
||||||
| CommonJs (strict) | `["./math", "subtract"]` | `require("./math").subtract` |
|
| CommonJs (strict) | `["./math", "subtract"]` | `require("./math").subtract` |
|
||||||
| CommonJs (node.js) | `"./subtract"` | `require("./subtract")` |
|
| CommonJs (node.js) | `"./subtract"` | `require("./subtract")` |
|
||||||
| AMD | `"subtract"` | `define(["subtract"], ...)` |
|
| AMD | `"subtract"` | `define(["subtract"], ...)` |
|
||||||
|
@ -17,7 +17,7 @@ In the complex case we specify different values for each environment:
|
||||||
|
|
||||||
# example.js
|
# example.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
var add = require("add");
|
var add = require("add");
|
||||||
var subtract = require("subtract");
|
var subtract = require("subtract");
|
||||||
|
|
||||||
|
@ -26,7 +26,7 @@ exports.exampleValue = subtract(add(42, 2), 2);
|
||||||
|
|
||||||
# webpack.config.js
|
# webpack.config.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
module.exports = {
|
module.exports = {
|
||||||
// mode: "development || "production",
|
// mode: "development || "production",
|
||||||
output: {
|
output: {
|
||||||
|
@ -48,7 +48,7 @@ module.exports = {
|
||||||
|
|
||||||
# dist/output.js
|
# dist/output.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
(function webpackUniversalModuleDefinition(root, factory) {
|
(function webpackUniversalModuleDefinition(root, factory) {
|
||||||
if(typeof exports === 'object' && typeof module === 'object')
|
if(typeof exports === 'object' && typeof module === 'object')
|
||||||
module.exports = factory(require("add"), require("./subtract"));
|
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
|
cjs require add [0] ./example.js 1:10-24
|
||||||
[2] external {"root":"subtract","commonjs2":"./subtract","commonjs":["./math","subtract"],"amd":"subtract"} 42 bytes {0} [built]
|
[2] external {"root":"subtract","commonjs2":"./subtract","commonjs":["./math","subtract"],"amd":"subtract"} 42 bytes {0} [built]
|
||||||
cjs require subtract [0] ./example.js 2:15-34
|
cjs require subtract [0] ./example.js 2:15-34
|
||||||
```
|
```
|
||||||
|
|
|
@ -1,8 +1,6 @@
|
||||||
|
|
||||||
|
|
||||||
# example.js
|
# example.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
require(["./a", "./b", "./c"], function(a, b, c) {});
|
require(["./a", "./b", "./c"], function(a, b, c) {});
|
||||||
|
|
||||||
require.ensure(["./a"], function(require) {
|
require.ensure(["./a"], function(require) {
|
||||||
|
@ -23,7 +21,7 @@ require.ensure(["./a", "./e"], function(require) {
|
||||||
|
|
||||||
# webpack.config.js
|
# webpack.config.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
module.exports = {
|
module.exports = {
|
||||||
// mode: "development || "production",
|
// mode: "development || "production",
|
||||||
optimization: {
|
optimization: {
|
||||||
|
@ -39,7 +37,7 @@ module.exports = {
|
||||||
|
|
||||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // install a JSONP callback for chunk loading
|
/******/ // install a JSONP callback for chunk loading
|
||||||
/******/ function webpackJsonpCallback(data) {
|
/******/ function webpackJsonpCallback(data) {
|
||||||
|
@ -242,7 +240,7 @@ module.exports = {
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ ({
|
/******/ ({
|
||||||
|
|
||||||
/***/ 2:
|
/***/ 2:
|
||||||
|
|
|
@ -2,39 +2,38 @@ This example shows automatically created async commons chunks.
|
||||||
|
|
||||||
The example entry references two chunks:
|
The example entry references two chunks:
|
||||||
|
|
||||||
* entry chunk
|
- entry chunk
|
||||||
* async require -> chunk X
|
- async require -> chunk X
|
||||||
* async require -> chunk Y
|
- async require -> chunk Y
|
||||||
* chunk X
|
- chunk X
|
||||||
* module `a`
|
- module `a`
|
||||||
* module `b`
|
- module `b`
|
||||||
* module `c`
|
- module `c`
|
||||||
* chunk Y
|
- chunk Y
|
||||||
* module `a`
|
- module `a`
|
||||||
* module `b`
|
- module `b`
|
||||||
* module `d`
|
- module `d`
|
||||||
|
|
||||||
These chunks share modules `a` and `b`. The optimization extract these into chunk Z:
|
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.
|
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
|
- entry chunk
|
||||||
* async require -> chunk X & Z
|
- async require -> chunk X & Z
|
||||||
* async require -> chunk Y & Z
|
- async require -> chunk Y & Z
|
||||||
* chunk X
|
- chunk X
|
||||||
* module `c`
|
- module `c`
|
||||||
* chunk Y
|
- chunk Y
|
||||||
* module `d`
|
- module `d`
|
||||||
* chunk Z
|
- chunk Z
|
||||||
* module `a`
|
- module `a`
|
||||||
* module `b`
|
- module `b`
|
||||||
|
|
||||||
Pretty useful for a router in a SPA.
|
Pretty useful for a router in a SPA.
|
||||||
|
|
||||||
|
|
||||||
# example.js
|
# example.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
// a chunks with a, b, c
|
// a chunks with a, b, c
|
||||||
require(["./a", "./b", "./c"]);
|
require(["./a", "./b", "./c"]);
|
||||||
|
|
||||||
|
@ -49,7 +48,7 @@ require.ensure(["./a"], function(require) {
|
||||||
|
|
||||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // install a JSONP callback for chunk loading
|
/******/ // install a JSONP callback for chunk loading
|
||||||
/******/ function webpackJsonpCallback(data) {
|
/******/ function webpackJsonpCallback(data) {
|
||||||
|
@ -252,7 +251,7 @@ require.ensure(["./a"], function(require) {
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ ({
|
/******/ ({
|
||||||
|
|
||||||
/***/ 2:
|
/***/ 2:
|
||||||
|
@ -279,7 +278,7 @@ Promise.all(/*! require.ensure */[__webpack_require__.e(0), __webpack_require__.
|
||||||
|
|
||||||
# dist/0.output.js
|
# dist/0.output.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],[
|
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],[
|
||||||
/* 0 */
|
/* 0 */
|
||||||
/*!**************!*\
|
/*!**************!*\
|
||||||
|
@ -306,7 +305,7 @@ module.exports = "b";
|
||||||
|
|
||||||
# dist/2.output.js
|
# dist/2.output.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{
|
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{
|
||||||
|
|
||||||
/***/ 3:
|
/***/ 3:
|
||||||
|
@ -325,7 +324,7 @@ module.exports = "c";
|
||||||
|
|
||||||
# dist/3.output.js
|
# dist/3.output.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[3],{
|
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[3],{
|
||||||
|
|
||||||
/***/ 4:
|
/***/ 4:
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
|
|
||||||
# example.js
|
# example.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
// harmony module
|
// harmony module
|
||||||
|
|
||||||
// import from CommonJs module
|
// import from CommonJs module
|
||||||
|
@ -22,7 +21,7 @@ import "./example2";
|
||||||
|
|
||||||
# fs.js
|
# fs.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
// an example CommonJs module
|
// an example CommonJs module
|
||||||
// content is omitted for brevity
|
// content is omitted for brevity
|
||||||
exports.readFile = function() {};
|
exports.readFile = function() {};
|
||||||
|
@ -34,7 +33,7 @@ exports.readFile = function() {};
|
||||||
|
|
||||||
# reexport-commonjs.js
|
# reexport-commonjs.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
// reexport a CommonJs module
|
// reexport a CommonJs module
|
||||||
export * from "./fs";
|
export * from "./fs";
|
||||||
// Note that the default export doesn't reexport via export *
|
// Note that the default export doesn't reexport via export *
|
||||||
|
@ -46,7 +45,7 @@ export * from "./fs";
|
||||||
|
|
||||||
# example2.js
|
# example2.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
// CommonJs module
|
// CommonJs module
|
||||||
|
|
||||||
// require a harmony module
|
// require a harmony module
|
||||||
|
@ -58,7 +57,7 @@ var namedExport = module.named;
|
||||||
|
|
||||||
# harmony.js
|
# harmony.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
// just some exports
|
// just some exports
|
||||||
export default "default";
|
export default "default";
|
||||||
export var named = "named";
|
export var named = "named";
|
||||||
|
@ -68,7 +67,7 @@ export var named = "named";
|
||||||
|
|
||||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // The module cache
|
/******/ // The module cache
|
||||||
/******/ var installedModules = {};
|
/******/ var installedModules = {};
|
||||||
|
@ -159,7 +158,7 @@ export var named = "named";
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ ([
|
/******/ ([
|
||||||
/* 0 */
|
/* 0 */
|
||||||
/*!********************!*\
|
/*!********************!*\
|
||||||
|
@ -336,4 +335,4 @@ chunk {0} output.js (main) 1.13 KiB [entry] [rendered]
|
||||||
[4] ./harmony.js 75 bytes {0} [built]
|
[4] ./harmony.js 75 bytes {0} [built]
|
||||||
[exports: default, named]
|
[exports: default, named]
|
||||||
cjs require ./harmony [3] ./example2.js 4:13-33
|
cjs require ./harmony [3] ./example2.js 4:13-33
|
||||||
```
|
```
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
# webpack.config.js
|
# webpack.config.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
var path = require("path");
|
var path = require("path");
|
||||||
module.exports = {
|
module.exports = {
|
||||||
// mode: "development || "production",
|
// mode: "development || "production",
|
||||||
|
@ -16,7 +16,7 @@ module.exports = {
|
||||||
|
|
||||||
# dist/MyLibrary.umd.js
|
# dist/MyLibrary.umd.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
(function webpackUniversalModuleDefinition(root, factory) {
|
(function webpackUniversalModuleDefinition(root, factory) {
|
||||||
if(typeof exports === 'object' && typeof module === 'object')
|
if(typeof exports === 'object' && typeof module === 'object')
|
||||||
module.exports = factory();
|
module.exports = factory();
|
||||||
|
|
|
@ -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)".
|
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
|
# example.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
import { add } from './math';
|
import { add } from './math';
|
||||||
import * as library from "./library";
|
import * as library from "./library";
|
||||||
|
|
||||||
|
@ -18,7 +18,7 @@ library.reexportedMultiply(1, 2);
|
||||||
|
|
||||||
# math.js
|
# math.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
export function add() {
|
export function add() {
|
||||||
var sum = 0, i = 0, args = arguments, l = args.length;
|
var sum = 0, i = 0, args = arguments, l = args.length;
|
||||||
while (i < l) {
|
while (i < l) {
|
||||||
|
@ -42,7 +42,7 @@ export function list() {
|
||||||
|
|
||||||
# library.js
|
# library.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
export { a, b, c } from "./abc";
|
export { a, b, c } from "./abc";
|
||||||
export { add as reexportedAdd, multiply as reexportedMultiply } from "./math";
|
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>
|
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // The module cache
|
/******/ // The module cache
|
||||||
/******/ var installedModules = {};
|
/******/ var installedModules = {};
|
||||||
|
@ -142,7 +142,7 @@ export { add as reexportedAdd, multiply as reexportedMultiply } from "./math";
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ ([
|
/******/ ([
|
||||||
/* 0 */
|
/* 0 */
|
||||||
/*!********************!*\
|
/*!********************!*\
|
||||||
|
@ -245,7 +245,7 @@ function c() { console.log("c"); }
|
||||||
|
|
||||||
# dist/output.js
|
# 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)}]);
|
!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)}]);
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
|
|
||||||
# example.js
|
# example.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
import { increment as inc } from './increment';
|
import { increment as inc } from './increment';
|
||||||
var a = 1;
|
var a = 1;
|
||||||
inc(a); // 2
|
inc(a); // 2
|
||||||
|
@ -14,7 +13,7 @@ import("./async-loaded").then(function(asyncLoaded) {
|
||||||
|
|
||||||
# increment.js
|
# increment.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
import { add } from './math';
|
import { add } from './math';
|
||||||
export function increment(val) {
|
export function increment(val) {
|
||||||
return add(val, 1);
|
return add(val, 1);
|
||||||
|
@ -25,7 +24,7 @@ export function increment(val) {
|
||||||
|
|
||||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // install a JSONP callback for chunk loading
|
/******/ // install a JSONP callback for chunk loading
|
||||||
/******/ function webpackJsonpCallback(data) {
|
/******/ function webpackJsonpCallback(data) {
|
||||||
|
@ -228,7 +227,7 @@ export function increment(val) {
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ ([
|
/******/ ([
|
||||||
/* 0 */
|
/* 0 */
|
||||||
/*!**********************!*\
|
/*!**********************!*\
|
||||||
|
@ -355,4 +354,4 @@ chunk {1} 1.output.js 24 bytes <{0}> [rendered]
|
||||||
[1] ./async-loaded.js 24 bytes {1} [built]
|
[1] ./async-loaded.js 24 bytes {1} [built]
|
||||||
[exports: answer]
|
[exports: answer]
|
||||||
import() ./async-loaded ./example.js 6:0-24
|
import() ./async-loaded ./example.js 6:0-24
|
||||||
```
|
```
|
||||||
|
|
|
@ -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.
|
The backward compatibility (non HTTP2 client) improves with bigger `maxSize`, as the number of requests decreases.
|
||||||
|
|
||||||
``` js
|
```js
|
||||||
var path = require("path");
|
var path = require("path");
|
||||||
var webpack = require("../../");
|
var webpack = require("../../");
|
||||||
module.exports = {
|
module.exports = {
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
# webpack.config.js
|
# webpack.config.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
var path = require("path");
|
var path = require("path");
|
||||||
module.exports = {
|
module.exports = {
|
||||||
// mode: "development || "production",
|
// mode: "development || "production",
|
||||||
|
@ -30,7 +30,7 @@ module.exports = {
|
||||||
|
|
||||||
# aEntry.js
|
# aEntry.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
// Just show the page "a"
|
// Just show the page "a"
|
||||||
var render = require("./render");
|
var render = require("./render");
|
||||||
render(require("./aPage"));
|
render(require("./aPage"));
|
||||||
|
@ -40,7 +40,7 @@ render(require("./aPage"));
|
||||||
|
|
||||||
# aPage.js
|
# aPage.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
module.exports = function() {
|
module.exports = function() {
|
||||||
return "This is page A.";
|
return "This is page A.";
|
||||||
};
|
};
|
||||||
|
@ -50,7 +50,7 @@ module.exports = function() {
|
||||||
|
|
||||||
# router.js
|
# router.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
var render = require("./render");
|
var render = require("./render");
|
||||||
|
|
||||||
// Event when another page should be opened
|
// Event when another page should be opened
|
||||||
|
@ -73,7 +73,7 @@ window.onLinkToPage = function onLinkToPage(name) { // name is "a" or "b"
|
||||||
|
|
||||||
# pageA.html
|
# pageA.html
|
||||||
|
|
||||||
``` html
|
```html
|
||||||
<html>
|
<html>
|
||||||
<head></head>
|
<head></head>
|
||||||
<body>
|
<body>
|
||||||
|
@ -86,7 +86,7 @@ window.onLinkToPage = function onLinkToPage(name) { // name is "a" or "b"
|
||||||
|
|
||||||
# dist/pageA~pageB.chunk.js
|
# dist/pageA~pageB.chunk.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],[
|
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],[
|
||||||
/* 0 */
|
/* 0 */
|
||||||
/*!*******************!*\
|
/*!*******************!*\
|
||||||
|
@ -177,7 +177,7 @@ module.exports = webpackAsyncContext;
|
||||||
|
|
||||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // install a JSONP callback for chunk loading
|
/******/ // install a JSONP callback for chunk loading
|
||||||
/******/ function webpackJsonpCallback(data) {
|
/******/ function webpackJsonpCallback(data) {
|
||||||
|
@ -402,7 +402,7 @@ module.exports = webpackAsyncContext;
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ ({
|
/******/ ({
|
||||||
|
|
||||||
/***/ 4:
|
/***/ 4:
|
||||||
|
@ -436,7 +436,7 @@ render(__webpack_require__(/*! ./aPage */ 1));
|
||||||
|
|
||||||
# dist/aPage.chunk.js
|
# dist/aPage.chunk.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],[
|
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],[
|
||||||
/* 0 */,
|
/* 0 */,
|
||||||
/* 1 */
|
/* 1 */
|
||||||
|
|
|
@ -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"`.
|
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
|
# example.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
console.log(__("Hello World"));
|
console.log(__("Hello World"));
|
||||||
console.log(__("Missing Text"));
|
console.log(__("Missing Text"));
|
||||||
```
|
```
|
||||||
|
|
||||||
# webpack.config.js
|
# webpack.config.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
var path = require("path");
|
var path = require("path");
|
||||||
var I18nPlugin = require("i18n-webpack-plugin");
|
var I18nPlugin = require("i18n-webpack-plugin");
|
||||||
var languages = {
|
var languages = {
|
||||||
|
@ -37,7 +36,7 @@ module.exports = Object.keys(languages).map(function(language) {
|
||||||
|
|
||||||
# de.json
|
# de.json
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
{
|
{
|
||||||
"Hello World": "Hallo Welt"
|
"Hello World": "Hallo Welt"
|
||||||
}
|
}
|
||||||
|
@ -47,7 +46,7 @@ module.exports = Object.keys(languages).map(function(language) {
|
||||||
|
|
||||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // The module cache
|
/******/ // The module cache
|
||||||
/******/ var installedModules = {};
|
/******/ var installedModules = {};
|
||||||
|
@ -138,7 +137,7 @@ module.exports = Object.keys(languages).map(function(language) {
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ ([
|
/******/ ([
|
||||||
/* 0 */
|
/* 0 */
|
||||||
/*!********************!*\
|
/*!********************!*\
|
||||||
|
@ -156,7 +155,7 @@ console.log("Missing Text");
|
||||||
|
|
||||||
# dist/en.output.js
|
# dist/en.output.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // The module cache
|
/******/ // The module cache
|
||||||
/******/ var installedModules = {};
|
/******/ var installedModules = {};
|
||||||
|
@ -314,4 +313,4 @@ Child de:
|
||||||
|
|
||||||
WARNING in ./example.js
|
WARNING in ./example.js
|
||||||
Missing localization: Missing Text
|
Missing localization: Missing Text
|
||||||
```
|
```
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
# example.js
|
# example.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
// use our loader
|
// use our loader
|
||||||
console.dir(require("./loader!./file"));
|
console.dir(require("./loader!./file"));
|
||||||
|
|
||||||
|
@ -11,13 +11,13 @@ console.dir(require("!css-loader!./test.css")); // manual
|
||||||
|
|
||||||
# file.js
|
# file.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
exports.foo = "bar";
|
exports.foo = "bar";
|
||||||
```
|
```
|
||||||
|
|
||||||
# loader.js
|
# loader.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
module.exports = function(content) {
|
module.exports = function(content) {
|
||||||
return "exports.answer = 42;\n" + content;
|
return "exports.answer = 42;\n" + content;
|
||||||
}
|
}
|
||||||
|
@ -25,7 +25,7 @@ module.exports = function(content) {
|
||||||
|
|
||||||
# test.css
|
# test.css
|
||||||
|
|
||||||
``` css
|
```css
|
||||||
.some-class {
|
.some-class {
|
||||||
color: hotpink;
|
color: hotpink;
|
||||||
}
|
}
|
||||||
|
@ -35,7 +35,7 @@ module.exports = function(content) {
|
||||||
|
|
||||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // The module cache
|
/******/ // The module cache
|
||||||
/******/ var installedModules = {};
|
/******/ var installedModules = {};
|
||||||
|
@ -126,7 +126,7 @@ module.exports = function(content) {
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ ([
|
/******/ ([
|
||||||
/* 0 */
|
/* 0 */
|
||||||
/*!********************!*\
|
/*!********************!*\
|
||||||
|
|
|
@ -6,15 +6,15 @@ This example application contains 7 pages, each of them importing 1-3 modules fr
|
||||||
|
|
||||||
The following configuration is used:
|
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.chunks: "all"` - This opt-in into automatic splitting of initial chunks which is off by default
|
||||||
* `optimization.splitChunks.maxInitial/AsyncRequests: 20` - This opt-in into a HTTP2 optimized splitting mode by increasing the allowed amount of requests. Browser only supports 6 requests in parallel for HTTP1.1.
|
- `optimization.splitChunks.maxInitial/AsyncRequests: 20` - This opt-in into 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
|
# Interpreting the result
|
||||||
|
|
||||||
* `pageA.js` the normal output files for the entrypoint `pageA`
|
- `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~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
|
- `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~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.
|
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)
|
chunk {13} vendors~pageC.js (vendors~pageC) 43 bytes ={2}= ={6}= [initial] [rendered] split chunk (cache group: vendors) (name: vendors~pageC)
|
||||||
> ./pages/c pageC
|
> ./pages/c pageC
|
||||||
1 module
|
1 module
|
||||||
```
|
```
|
||||||
|
|
|
@ -4,7 +4,7 @@ You see that everything is working nicely together.
|
||||||
|
|
||||||
# example.js
|
# example.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
// CommonJs-style requires
|
// CommonJs-style requires
|
||||||
var commonjs1 = require("./commonjs");
|
var commonjs1 = require("./commonjs");
|
||||||
var amd1 = require("./amd");
|
var amd1 = require("./amd");
|
||||||
|
@ -23,7 +23,7 @@ require([
|
||||||
|
|
||||||
# amd.js
|
# amd.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
// AMD Module Format
|
// AMD Module Format
|
||||||
define(
|
define(
|
||||||
"app/amd", // anonym is also supported
|
"app/amd", // anonym is also supported
|
||||||
|
@ -40,7 +40,7 @@ define(
|
||||||
|
|
||||||
# commonjs.js
|
# commonjs.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
// CommonJs Module Format
|
// CommonJs Module Format
|
||||||
module.exports = 123;
|
module.exports = 123;
|
||||||
|
|
||||||
|
@ -58,7 +58,7 @@ require(
|
||||||
|
|
||||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // install a JSONP callback for chunk loading
|
/******/ // install a JSONP callback for chunk loading
|
||||||
/******/ function webpackJsonpCallback(data) {
|
/******/ function webpackJsonpCallback(data) {
|
||||||
|
@ -261,7 +261,7 @@ require(
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ ([
|
/******/ ([
|
||||||
/* 0 */
|
/* 0 */
|
||||||
/*!*********************!*\
|
/*!*********************!*\
|
||||||
|
@ -346,7 +346,7 @@ __webpack_require__.e(/*! AMD require */ 1).then(function() { var __WEBPACK_AMD_
|
||||||
|
|
||||||
# dist/1.output.js
|
# dist/1.output.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
|
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
|
||||||
/* 0 */,
|
/* 0 */,
|
||||||
/* 1 */,
|
/* 1 */,
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
|
|
||||||
# example.js
|
# example.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
if(ENV === "mobile") {
|
if(ENV === "mobile") {
|
||||||
require("./mobile-stuff");
|
require("./mobile-stuff");
|
||||||
}
|
}
|
||||||
|
@ -10,7 +9,7 @@ console.log("Running " + ENV + " build");
|
||||||
|
|
||||||
# webpack.config.js
|
# webpack.config.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
var path = require("path");
|
var path = require("path");
|
||||||
var webpack = require("../../");
|
var webpack = require("../../");
|
||||||
module.exports = [
|
module.exports = [
|
||||||
|
@ -50,7 +49,7 @@ module.exports = [
|
||||||
|
|
||||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // The module cache
|
/******/ // The module cache
|
||||||
/******/ var installedModules = {};
|
/******/ var installedModules = {};
|
||||||
|
@ -141,7 +140,7 @@ module.exports = [
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ ([
|
/******/ ([
|
||||||
/* 0 */
|
/* 0 */
|
||||||
/*!********************!*\
|
/*!********************!*\
|
||||||
|
@ -159,7 +158,7 @@ console.log("Running " + "desktop" + " build");
|
||||||
|
|
||||||
# dist/mobile.js
|
# dist/mobile.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // The module cache
|
/******/ // The module cache
|
||||||
/******/ var installedModules = {};
|
/******/ var installedModules = {};
|
||||||
|
@ -327,4 +326,4 @@ Child desktop:
|
||||||
> ./example main
|
> ./example main
|
||||||
[0] ./example.js 94 bytes {0} [built]
|
[0] ./example.js 94 bytes {0} [built]
|
||||||
single entry ./example main
|
single entry ./example main
|
||||||
```
|
```
|
||||||
|
|
|
@ -14,7 +14,7 @@ Note: When your library has dependencies that should not be included in the comp
|
||||||
|
|
||||||
# webpack.config.js
|
# webpack.config.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
var path = require("path");
|
var path = require("path");
|
||||||
module.exports = {
|
module.exports = {
|
||||||
// mode: "development || "production",
|
// mode: "development || "production",
|
||||||
|
@ -33,7 +33,7 @@ module.exports = {
|
||||||
|
|
||||||
# dist/MyLibrary.alpha.js
|
# dist/MyLibrary.alpha.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
(function webpackUniversalModuleDefinition(root, factory) {
|
(function webpackUniversalModuleDefinition(root, factory) {
|
||||||
if(typeof exports === 'object' && typeof module === 'object')
|
if(typeof exports === 'object' && typeof module === 'object')
|
||||||
module.exports = factory();
|
module.exports = factory();
|
||||||
|
@ -156,7 +156,7 @@ module.exports = "alpha";
|
||||||
|
|
||||||
# dist/MyLibrary.beta.js
|
# dist/MyLibrary.beta.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
(function webpackUniversalModuleDefinition(root, factory) {
|
(function webpackUniversalModuleDefinition(root, factory) {
|
||||||
if(typeof exports === 'object' && typeof module === 'object')
|
if(typeof exports === 'object' && typeof module === 'object')
|
||||||
module.exports = factory();
|
module.exports = factory();
|
||||||
|
|
|
@ -8,29 +8,29 @@ You can use
|
||||||
|
|
||||||
You can see the output files:
|
You can see the output files:
|
||||||
|
|
||||||
* `commons.js` contains:
|
- `commons.js` contains:
|
||||||
* module `common.js` which is used in both pages
|
- module `common.js` which is used in both pages
|
||||||
* `pageA.js` contains: (`pageB.js` is similar)
|
- `pageA.js` contains: (`pageB.js` is similar)
|
||||||
* the module system
|
- the module system
|
||||||
* chunk loading logic
|
- chunk loading logic
|
||||||
* the entry point `pageA.js`
|
- the entry point `pageA.js`
|
||||||
* it would contain any other module that is only used by `pageA`
|
- 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:
|
- `0.chunk.js` is an additional chunk which is used by both pages. It contains:
|
||||||
* module `shared.js`
|
- module `shared.js`
|
||||||
|
|
||||||
You can also see the info that is printed to console. It shows among others:
|
You can also see the info that is printed to console. It shows among others:
|
||||||
|
|
||||||
* the generated files
|
- the generated files
|
||||||
* the chunks with file, name and id
|
- the chunks with file, name and id
|
||||||
* see lines starting with `chunk`
|
- see lines starting with `chunk`
|
||||||
* the modules that are in the chunks
|
- the modules that are in the chunks
|
||||||
* the reasons why the modules are included
|
- the reasons why the modules are included
|
||||||
* the reasons why a chunk is created
|
- the reasons why a chunk is created
|
||||||
* see lines starting with `>`
|
- see lines starting with `>`
|
||||||
|
|
||||||
# pageA.js
|
# pageA.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
var common = require("./common");
|
var common = require("./common");
|
||||||
require(["./shared"], function(shared) {
|
require(["./shared"], function(shared) {
|
||||||
shared("This is page A");
|
shared("This is page A");
|
||||||
|
@ -39,7 +39,7 @@ require(["./shared"], function(shared) {
|
||||||
|
|
||||||
# pageB.js
|
# pageB.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
var common = require("./common");
|
var common = require("./common");
|
||||||
require.ensure(["./shared"], function(require) {
|
require.ensure(["./shared"], function(require) {
|
||||||
var shared = require("./shared");
|
var shared = require("./shared");
|
||||||
|
@ -49,7 +49,7 @@ require.ensure(["./shared"], function(require) {
|
||||||
|
|
||||||
# webpack.config.js
|
# webpack.config.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
module.exports = {
|
module.exports = {
|
||||||
// mode: "development || "production",
|
// mode: "development || "production",
|
||||||
entry: {
|
entry: {
|
||||||
|
@ -74,7 +74,7 @@ module.exports = {
|
||||||
|
|
||||||
# pageA.html
|
# pageA.html
|
||||||
|
|
||||||
``` html
|
```html
|
||||||
<html>
|
<html>
|
||||||
<head></head>
|
<head></head>
|
||||||
<body>
|
<body>
|
||||||
|
@ -86,7 +86,7 @@ module.exports = {
|
||||||
|
|
||||||
# dist/commons.js
|
# dist/commons.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],[
|
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],[
|
||||||
/* 0 */
|
/* 0 */
|
||||||
/*!*******************!*\
|
/*!*******************!*\
|
||||||
|
@ -105,7 +105,7 @@ module.exports = "Common";
|
||||||
|
|
||||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // install a JSONP callback for chunk loading
|
/******/ // install a JSONP callback for chunk loading
|
||||||
/******/ function webpackJsonpCallback(data) {
|
/******/ function webpackJsonpCallback(data) {
|
||||||
|
@ -330,7 +330,7 @@ module.exports = "Common";
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ ({
|
/******/ ({
|
||||||
|
|
||||||
/***/ 2:
|
/***/ 2:
|
||||||
|
@ -352,7 +352,7 @@ __webpack_require__.e(/*! AMD require */ 1).then(function() { var __WEBPACK_AMD_
|
||||||
|
|
||||||
# dist/pageB.js
|
# dist/pageB.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // install a JSONP callback for chunk loading
|
/******/ // install a JSONP callback for chunk loading
|
||||||
/******/ function webpackJsonpCallback(data) {
|
/******/ function webpackJsonpCallback(data) {
|
||||||
|
@ -595,7 +595,7 @@ __webpack_require__.e(/*! require.ensure */ 1).then((function(require) {
|
||||||
|
|
||||||
# dist/1.js
|
# dist/1.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
|
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
|
||||||
/* 0 */,
|
/* 0 */,
|
||||||
/* 1 */
|
/* 1 */
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
# example.js
|
# example.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
var a = require("a");
|
var a = require("a");
|
||||||
|
|
||||||
require.ensure(["b"], function(require) {
|
require.ensure(["b"], function(require) {
|
||||||
|
@ -23,12 +23,11 @@ require.ensure(["b"], function(require) {
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
# dist/output.js
|
# dist/output.js
|
||||||
|
|
||||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // install a JSONP callback for chunk loading
|
/******/ // install a JSONP callback for chunk loading
|
||||||
/******/ function webpackJsonpCallback(data) {
|
/******/ function webpackJsonpCallback(data) {
|
||||||
|
@ -231,7 +230,7 @@ require.ensure(["b"], function(require) {
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ ([
|
/******/ ([
|
||||||
/* 0 */,
|
/* 0 */,
|
||||||
/* 1 */,
|
/* 1 */,
|
||||||
|
@ -280,7 +279,7 @@ __webpack_require__.e(/*! require.ensure */ 2).then((function(require) {
|
||||||
|
|
||||||
# dist/1.output.js
|
# dist/1.output.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
|
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
|
||||||
/* 0 */
|
/* 0 */
|
||||||
/*!***************************!*\
|
/*!***************************!*\
|
||||||
|
@ -319,7 +318,7 @@ __webpack_require__.e(/*! require.ensure */ 2).then((function(require) {
|
||||||
|
|
||||||
# dist/2.output.js
|
# dist/2.output.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],[
|
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],[
|
||||||
/* 0 */
|
/* 0 */
|
||||||
/*!***************************!*\
|
/*!***************************!*\
|
||||||
|
|
|
@ -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:
|
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
|
- Modules `lazy`, `c`, `d` and `cjs` need to be in a separate chunk
|
||||||
* Module `shared` is accessed by two chunks (different scopes)
|
- Module `shared` is accessed by two chunks (different scopes)
|
||||||
* Module `cjs` is a CommonJs module
|
- Module `cjs` is a CommonJs module
|
||||||
|
|
||||||
![](graph2.png)
|
![](graph2.png)
|
||||||
|
|
||||||
|
@ -22,7 +22,7 @@ While module concatenation identifiers in modules are renamed to avoid conflicts
|
||||||
|
|
||||||
# example.js
|
# example.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
import { a, x, y } from "a";
|
import { a, x, y } from "a";
|
||||||
import * as b from "b";
|
import * as b from "b";
|
||||||
|
|
||||||
|
@ -33,7 +33,7 @@ import("./lazy").then(function(lazy) {
|
||||||
|
|
||||||
# lazy.js
|
# lazy.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
export * from "c";
|
export * from "c";
|
||||||
import * as d from "d";
|
import * as d from "d";
|
||||||
export { d };
|
export { d };
|
||||||
|
@ -41,7 +41,7 @@ export { d };
|
||||||
|
|
||||||
# a.js
|
# a.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
// module a
|
// module a
|
||||||
export var a = "a";
|
export var a = "a";
|
||||||
export * from "shared";
|
export * from "shared";
|
||||||
|
@ -49,7 +49,7 @@ export * from "shared";
|
||||||
|
|
||||||
# b.js
|
# b.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
// module b
|
// module b
|
||||||
export function a() {
|
export function a() {
|
||||||
return "b";
|
return "b";
|
||||||
|
@ -58,7 +58,7 @@ export function a() {
|
||||||
|
|
||||||
# c.js
|
# c.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
// module c
|
// module c
|
||||||
import { c as e } from "cjs";
|
import { c as e } from "cjs";
|
||||||
|
|
||||||
|
@ -69,21 +69,21 @@ export { x, y } from "shared";
|
||||||
|
|
||||||
# d.js
|
# d.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
// module d
|
// module d
|
||||||
export var a = "d";
|
export var a = "d";
|
||||||
```
|
```
|
||||||
|
|
||||||
# cjs.js
|
# cjs.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
// module cjs (commonjs)
|
// module cjs (commonjs)
|
||||||
exports.c = "e";
|
exports.c = "e";
|
||||||
```
|
```
|
||||||
|
|
||||||
# shared.js
|
# shared.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
// shared module
|
// shared module
|
||||||
export var x = "x";
|
export var x = "x";
|
||||||
export * from "shared2";
|
export * from "shared2";
|
||||||
|
@ -91,16 +91,14 @@ export * from "shared2";
|
||||||
|
|
||||||
# shared2.js
|
# shared2.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
// shared2 module
|
// shared2 module
|
||||||
export var y = "y";
|
export var y = "y";
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# webpack.config.js
|
# webpack.config.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
module.exports = {
|
module.exports = {
|
||||||
// mode: "development" || "production",
|
// mode: "development" || "production",
|
||||||
optimization: {
|
optimization: {
|
||||||
|
@ -111,14 +109,11 @@ module.exports = {
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# dist/output.js
|
# dist/output.js
|
||||||
|
|
||||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // install a JSONP callback for chunk loading
|
/******/ // install a JSONP callback for chunk loading
|
||||||
/******/ function webpackJsonpCallback(data) {
|
/******/ function webpackJsonpCallback(data) {
|
||||||
|
@ -321,7 +316,7 @@ module.exports = {
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ ([
|
/******/ ([
|
||||||
/* 0 */
|
/* 0 */
|
||||||
/*!********************************************!*\
|
/*!********************************************!*\
|
||||||
|
@ -387,7 +382,7 @@ __webpack_require__.e(/*! import() */ 1).then(__webpack_require__.bind(null, /*!
|
||||||
|
|
||||||
# dist/1.output.js
|
# dist/1.output.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
|
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
|
||||||
/* 0 */,
|
/* 0 */,
|
||||||
/* 1 */,
|
/* 1 */,
|
||||||
|
@ -455,7 +450,7 @@ var a = "d";
|
||||||
|
|
||||||
Minimized
|
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})}]]);
|
(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})}]]);
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
@ -10,12 +10,12 @@ After being built by webpack, the output bundle contains `index.js` `a.js` `b.js
|
||||||
|
|
||||||
Advantages:
|
Advantages:
|
||||||
|
|
||||||
* Smaller bundles
|
- Smaller bundles
|
||||||
* Faster bootup
|
- Faster bootup
|
||||||
|
|
||||||
# example.js
|
# example.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
import { a as a1, b as b1 } from "big-module";
|
import { a as a1, b as b1 } from "big-module";
|
||||||
import { a as a2, b as b2 } from "big-module-with-flag";
|
import { a as a2, b as b2 } from "big-module-with-flag";
|
||||||
|
|
||||||
|
@ -29,7 +29,7 @@ console.log(
|
||||||
|
|
||||||
# node_modules/big-module/package.json
|
# node_modules/big-module/package.json
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
{
|
{
|
||||||
"name": "big-module"
|
"name": "big-module"
|
||||||
}
|
}
|
||||||
|
@ -37,7 +37,7 @@ console.log(
|
||||||
|
|
||||||
# node_modules/big-module-with-flag/package.json
|
# node_modules/big-module-with-flag/package.json
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
{
|
{
|
||||||
"name": "big-module-with-flag",
|
"name": "big-module-with-flag",
|
||||||
"sideEffects": false
|
"sideEffects": false
|
||||||
|
@ -46,7 +46,7 @@ console.log(
|
||||||
|
|
||||||
# node_modules/big-module(-with-flag)/index.js
|
# node_modules/big-module(-with-flag)/index.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
export { a } from "./a";
|
export { a } from "./a";
|
||||||
export { b } from "./b";
|
export { b } from "./b";
|
||||||
export { c } from "./c";
|
export { c } from "./c";
|
||||||
|
@ -56,7 +56,7 @@ export { c } from "./c";
|
||||||
|
|
||||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // The module cache
|
/******/ // The module cache
|
||||||
/******/ var installedModules = {};
|
/******/ var installedModules = {};
|
||||||
|
@ -147,7 +147,7 @@ export { c } from "./c";
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ ([
|
/******/ ([
|
||||||
/* 0 */
|
/* 0 */
|
||||||
/*!********************!*\
|
/*!********************!*\
|
||||||
|
|
|
@ -2,7 +2,7 @@ This example demonstrates various types of source-maps.
|
||||||
|
|
||||||
# example.coffee
|
# example.coffee
|
||||||
|
|
||||||
``` coffeescript
|
```coffeescript
|
||||||
# Taken from http://coffeescript.org/
|
# Taken from http://coffeescript.org/
|
||||||
|
|
||||||
# Objects:
|
# Objects:
|
||||||
|
@ -18,7 +18,7 @@ race = (winner, runners...) ->
|
||||||
|
|
||||||
# webpack.config.js
|
# webpack.config.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
var path = require("path");
|
var path = require("path");
|
||||||
|
|
||||||
module.exports = [
|
module.exports = [
|
||||||
|
@ -51,7 +51,8 @@ module.exports = [
|
||||||
# Generated source-maps
|
# Generated source-maps
|
||||||
|
|
||||||
## source-map.js and source-map.js.map
|
## source-map.js and source-map.js.map
|
||||||
``` javascript
|
|
||||||
|
```javascript
|
||||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
|
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
|
||||||
/* 0 */
|
/* 0 */
|
||||||
/*!*************************************************************!*\
|
/*!*************************************************************!*\
|
||||||
|
@ -84,12 +85,13 @@ race = function(winner, ...runners) {
|
||||||
//# sourceMappingURL=bundle-source-map.js.map
|
//# 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":""}
|
{"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
|
## hidden-source-map.js and hidden-source-map.js.map
|
||||||
``` javascript
|
|
||||||
|
```javascript
|
||||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
|
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
|
||||||
/* 0 */
|
/* 0 */
|
||||||
/*!*************************************************************!*\
|
/*!*************************************************************!*\
|
||||||
|
@ -121,12 +123,13 @@ race = function(winner, ...runners) {
|
||||||
],[[0,0]]]);
|
],[[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":""}
|
{"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
|
## inline-source-map.js
|
||||||
``` javascript
|
|
||||||
|
```javascript
|
||||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
|
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
|
||||||
/* 0 */
|
/* 0 */
|
||||||
/*!*************************************************************!*\
|
/*!*************************************************************!*\
|
||||||
|
@ -160,12 +163,14 @@ race = function(winner, ...runners) {
|
||||||
```
|
```
|
||||||
|
|
||||||
## nosources-source-map.js.map
|
## 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":""}
|
{"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
|
## eval-source-map.js
|
||||||
``` javascript
|
|
||||||
|
```javascript
|
||||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
|
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
|
||||||
/* 0 */
|
/* 0 */
|
||||||
/*!*************************************************************!*\
|
/*!*************************************************************!*\
|
||||||
|
@ -181,7 +186,8 @@ eval("// Taken from http://coffeescript.org/\n\n// Objects:\nvar math, race;\n\n
|
||||||
```
|
```
|
||||||
|
|
||||||
## eval.js
|
## eval.js
|
||||||
``` javascript
|
|
||||||
|
```javascript
|
||||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
|
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
|
||||||
/* 0 */
|
/* 0 */
|
||||||
/*!*************************************************************!*\
|
/*!*************************************************************!*\
|
||||||
|
@ -197,7 +203,8 @@ eval("// Taken from http://coffeescript.org/\n\n// Objects:\nvar math, race;\n\n
|
||||||
```
|
```
|
||||||
|
|
||||||
## cheap-eval-source-map.js
|
## cheap-eval-source-map.js
|
||||||
``` javascript
|
|
||||||
|
```javascript
|
||||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
|
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
|
||||||
/* 0 */
|
/* 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
|
## cheap-module-eval-source-map.js
|
||||||
``` javascript
|
|
||||||
|
```javascript
|
||||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
|
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
|
||||||
/* 0 */
|
/* 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
|
## 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":""}
|
{"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
|
## 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":""}
|
{"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":""}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
# webpack.config.js
|
# webpack.config.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
var path = require("path");
|
var path = require("path");
|
||||||
module.exports = {
|
module.exports = {
|
||||||
// mode: "development || "production",
|
// mode: "development || "production",
|
||||||
|
@ -38,7 +38,7 @@ module.exports = {
|
||||||
|
|
||||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // The module cache
|
/******/ // The module cache
|
||||||
/******/ var installedModules = {};
|
/******/ var installedModules = {};
|
||||||
|
@ -129,7 +129,7 @@ module.exports = {
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ ([
|
/******/ ([
|
||||||
/* 0 */
|
/* 0 */
|
||||||
/*!***********************!*\
|
/*!***********************!*\
|
||||||
|
@ -157,7 +157,7 @@ module.exports = "Vendor1";
|
||||||
|
|
||||||
# dist/vendor2.js
|
# dist/vendor2.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // The module cache
|
/******/ // The module cache
|
||||||
/******/ var installedModules = {};
|
/******/ var installedModules = {};
|
||||||
|
@ -284,7 +284,7 @@ __webpack_require__(/*! ./vendor1 */ 1);
|
||||||
|
|
||||||
# dist/pageA.js
|
# dist/pageA.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // The module cache
|
/******/ // The module cache
|
||||||
/******/ var installedModules = {};
|
/******/ var installedModules = {};
|
||||||
|
|
|
@ -4,7 +4,7 @@ WebAssembly modules can be imported like other modules. Their download and compi
|
||||||
|
|
||||||
# example.js
|
# example.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
import("./add.wasm").then(addModule => {
|
import("./add.wasm").then(addModule => {
|
||||||
console.log(addModule.add(22, 2200));
|
console.log(addModule.add(22, 2200));
|
||||||
import("./math").then(math => {
|
import("./math").then(math => {
|
||||||
|
@ -35,7 +35,7 @@ function timed(name, fn) {
|
||||||
|
|
||||||
# math.js
|
# math.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
import { add } from "./add.wasm";
|
import { add } from "./add.wasm";
|
||||||
import { factorial } from "./factorial.wasm";
|
import { factorial } from "./factorial.wasm";
|
||||||
import { fibonacci } from "./fibonacci.wasm";
|
import { fibonacci } from "./fibonacci.wasm";
|
||||||
|
@ -57,7 +57,7 @@ export function fibonacciJavascript(i) {
|
||||||
|
|
||||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // install a JSONP callback for chunk loading
|
/******/ // install a JSONP callback for chunk loading
|
||||||
/******/ function webpackJsonpCallback(data) {
|
/******/ function webpackJsonpCallback(data) {
|
||||||
|
@ -323,7 +323,7 @@ export function fibonacciJavascript(i) {
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ ([
|
/******/ ([
|
||||||
/* 0 */
|
/* 0 */
|
||||||
/*!********************!*\
|
/*!********************!*\
|
||||||
|
@ -366,7 +366,7 @@ function timed(name, fn) {
|
||||||
|
|
||||||
# dist/1.output.js
|
# dist/1.output.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
|
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
|
||||||
/* 0 */,
|
/* 0 */,
|
||||||
/* 1 */
|
/* 1 */
|
||||||
|
@ -472,7 +472,7 @@ wasmExports["__webpack_init__"]()
|
||||||
|
|
||||||
# dist/2.output.js
|
# dist/2.output.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],[
|
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],[
|
||||||
/* 0 */,
|
/* 0 */,
|
||||||
/* 1 */
|
/* 1 */
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
|
|
||||||
# example.js
|
# example.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
var Worker = require("worker-loader?name=hash.worker.js!./worker");
|
var Worker = require("worker-loader?name=hash.worker.js!./worker");
|
||||||
var worker = new Worker;
|
var worker = new Worker;
|
||||||
worker.postMessage("b");
|
worker.postMessage("b");
|
||||||
|
@ -12,7 +11,7 @@ worker.onmessage = function(event) {
|
||||||
|
|
||||||
# worker.js
|
# worker.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
onmessage = function(event) {
|
onmessage = function(event) {
|
||||||
var template = event.data;
|
var template = event.data;
|
||||||
require(["../require.context/templates/" + event.data], function(tmpl) {
|
require(["../require.context/templates/" + event.data], function(tmpl) {
|
||||||
|
@ -25,7 +24,7 @@ onmessage = function(event) {
|
||||||
|
|
||||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // The module cache
|
/******/ // The module cache
|
||||||
/******/ var installedModules = {};
|
/******/ var installedModules = {};
|
||||||
|
@ -116,7 +115,7 @@ onmessage = function(event) {
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ ([
|
/******/ ([
|
||||||
/* 0 */
|
/* 0 */
|
||||||
/*!********************!*\
|
/*!********************!*\
|
||||||
|
@ -151,7 +150,7 @@ module.exports = function() {
|
||||||
|
|
||||||
# dist/[hash].worker.js
|
# dist/[hash].worker.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ window["webpackChunk"] = function webpackChunkCallback(chunkIds, moreModules) {
|
/******/ window["webpackChunk"] = function webpackChunkCallback(chunkIds, moreModules) {
|
||||||
/******/ for(var moduleId in moreModules) {
|
/******/ for(var moduleId in moreModules) {
|
||||||
|
@ -286,7 +285,7 @@ onmessage = function(event) {
|
||||||
|
|
||||||
# dist/1.[hash].worker.js
|
# dist/1.[hash].worker.js
|
||||||
|
|
||||||
``` javascript
|
```javascript
|
||||||
window["webpackChunk"]([1],[
|
window["webpackChunk"]([1],[
|
||||||
/* 0 */,
|
/* 0 */,
|
||||||
/* 1 */
|
/* 1 */
|
||||||
|
|
Loading…
Reference in New Issue