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
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
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 */
|
||||||
/*!********************!*\
|
/*!********************!*\
|
||||||
|
|
|
@ -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 */
|
||||||
/*!********************!*\
|
/*!********************!*\
|
||||||
|
|
|
@ -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"));
|
||||||
|
|
|
@ -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 */
|
||||||
/*!********************!*\
|
/*!********************!*\
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -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 */
|
||||||
/*!**********************!*\
|
/*!**********************!*\
|
||||||
|
|
|
@ -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 = {};
|
||||||
|
|
|
@ -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.
|
||||||
|
|
||||||
|
|
|
@ -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 = {};
|
||||||
|
|
|
@ -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