Refactor chunk graph
Chunks are now always in ChunkGroups ChunkGroups have parents and children, Chunks no longer have this AsyncDependenciesBlocks point to a ChunkGroup instead of a list of chunks Entrypoint is now a ChunkGroup (extends from it) move stuff graph modification methods into GraphHelpers Change chunk id recording to source-based Chunks have parents, siblings and children in Stats rename AutomaticCommonsChunksPlugin to SplitChunksPlugin add request property to origin (ChunkGroup) remove moveToParent from AggressiveMergingPlugin fix issues with AggressiveSplittingPlugin remove CommonsChunkPlugin add optimization.runtimeChunk (RuntimeChunkPlugin) fix a filename bug for initial chunks remove extract-text-webpack-plugin from test suite add DebugHash to help debugging hash issues fix issues with entry modules in different chunk as runtime redo optimization.splitChunks options Compilation.entrypoints is now a Map Compilation.chunkGroups has been added remove some unittests update examples update tests with CommonsChunkPlugin
This commit is contained in:
Tobias Koppers
parent
8b888fedfa
commit
18ae73dad4
|
|
@ -45,8 +45,7 @@ module.exports = {
|
|||
},
|
||||
plugins: [
|
||||
new AggressiveMergingPlugin({
|
||||
minSizeReduce: 1.5,
|
||||
moveToParents: true
|
||||
minSizeReduce: 1.5
|
||||
})
|
||||
],
|
||||
optimization: {
|
||||
|
|
@ -63,44 +62,44 @@ module.exports = {
|
|||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
0.chunk.js 5.65 KiB 0 [emitted]
|
||||
0.chunk.js 5.98 KiB 0 [emitted]
|
||||
1.chunk.js 405 bytes 1 [emitted]
|
||||
pageC.bundle.js 7.02 KiB 2 [emitted] pageC
|
||||
pageB.bundle.js 7.23 KiB 3 [emitted] pageB
|
||||
pageA.bundle.js 7.21 KiB 4 [emitted] pageA
|
||||
pageC.bundle.js 7.05 KiB 2 [emitted] pageC
|
||||
pageB.bundle.js 7.05 KiB 3 [emitted] pageB
|
||||
pageA.bundle.js 7.05 KiB 4 [emitted] pageA
|
||||
Entrypoint pageA = pageA.bundle.js
|
||||
Entrypoint pageB = pageB.bundle.js
|
||||
Entrypoint pageC = pageC.bundle.js
|
||||
chunk {0} 0.chunk.js 5.42 KiB {3} {4} [rendered]
|
||||
> aggressive-merge [5] ./pageA.js 1:0-3:2
|
||||
> aggressive-merge [4] ./pageB.js 1:0-3:2
|
||||
chunk {0} 0.chunk.js 5.46 KiB <{3}> <{4}> [rendered]
|
||||
> ./common [4] ./pageB.js 1:0-3:2
|
||||
> ./common [5] ./pageA.js 1:0-3:2
|
||||
[0] ./b.js 21 bytes {0} {1} [built]
|
||||
cjs require ./b [3] ./pageC.js 2:17-31
|
||||
cjs require ./b [4] ./pageB.js 2:8-22
|
||||
[1] ./a.js 21 bytes {0} {1} [built]
|
||||
amd require ./a [3] ./pageC.js 1:0-3:2
|
||||
cjs require ./a [5] ./pageA.js 2:8-22
|
||||
[2] ./common.js 5.42 KiB {0} [built]
|
||||
amd require ./common [4] ./pageB.js 1:0-3:2
|
||||
amd require ./common [5] ./pageA.js 1:0-3:2
|
||||
chunk {1} 1.chunk.js 42 bytes {2} [rendered]
|
||||
> [3] ./pageC.js 1:0-3:2
|
||||
[0] ./b.js 21 bytes {1} {3} [built]
|
||||
chunk {1} 1.chunk.js 42 bytes <{2}> [rendered]
|
||||
> ./a [3] ./pageC.js 1:0-3:2
|
||||
[0] ./b.js 21 bytes {0} {1} [built]
|
||||
cjs require ./b [3] ./pageC.js 2:17-31
|
||||
cjs require ./b [4] ./pageB.js 2:8-22
|
||||
[1] ./a.js 21 bytes {1} {4} [built]
|
||||
[1] ./a.js 21 bytes {0} {1} [built]
|
||||
amd require ./a [3] ./pageC.js 1:0-3:2
|
||||
cjs require ./a [5] ./pageA.js 2:8-22
|
||||
chunk {2} pageC.bundle.js (pageC) 70 bytes [entry] [rendered]
|
||||
> pageC [3] ./pageC.js
|
||||
chunk {2} pageC.bundle.js (pageC) 70 bytes >{1}< [entry] [rendered]
|
||||
> ./pageC pageC
|
||||
[3] ./pageC.js 70 bytes {2} [built]
|
||||
single entry ./pageC pageC
|
||||
chunk {3} pageB.bundle.js (pageB) 92 bytes [entry] [rendered]
|
||||
> pageB [4] ./pageB.js
|
||||
[0] ./b.js 21 bytes {1} {3} [built]
|
||||
cjs require ./b [3] ./pageC.js 2:17-31
|
||||
cjs require ./b [4] ./pageB.js 2:8-22
|
||||
chunk {3} pageB.bundle.js (pageB) 71 bytes >{0}< [entry] [rendered]
|
||||
> ./pageB pageB
|
||||
[4] ./pageB.js 71 bytes {3} [built]
|
||||
single entry ./pageB pageB
|
||||
chunk {4} pageA.bundle.js (pageA) 92 bytes [entry] [rendered]
|
||||
> pageA [5] ./pageA.js
|
||||
[1] ./a.js 21 bytes {1} {4} [built]
|
||||
amd require ./a [3] ./pageC.js 1:0-3:2
|
||||
cjs require ./a [5] ./pageA.js 2:8-22
|
||||
chunk {4} pageA.bundle.js (pageA) 71 bytes >{0}< [entry] [rendered]
|
||||
> ./pageA pageA
|
||||
[5] ./pageA.js 71 bytes {4} [built]
|
||||
single entry ./pageA pageA
|
||||
```
|
||||
|
|
@ -111,44 +110,44 @@ chunk {4} pageA.bundle.js (pageA) 92 bytes [entry] [rendered]
|
|||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
0.chunk.js 115 bytes 0 [emitted]
|
||||
0.chunk.js 173 bytes 0, 1 [emitted]
|
||||
1.chunk.js 118 bytes 1 [emitted]
|
||||
pageC.bundle.js 1.67 KiB 2 [emitted] pageC
|
||||
pageB.bundle.js 1.69 KiB 3 [emitted] pageB
|
||||
pageA.bundle.js 1.69 KiB 4 [emitted] pageA
|
||||
pageC.bundle.js 1.68 KiB 2 [emitted] pageC
|
||||
pageB.bundle.js 1.66 KiB 3 [emitted] pageB
|
||||
pageA.bundle.js 1.66 KiB 4 [emitted] pageA
|
||||
Entrypoint pageA = pageA.bundle.js
|
||||
Entrypoint pageB = pageB.bundle.js
|
||||
Entrypoint pageC = pageC.bundle.js
|
||||
chunk {0} 0.chunk.js 5.42 KiB {3} {4} [rendered]
|
||||
> aggressive-merge [5] ./pageA.js 1:0-3:2
|
||||
> aggressive-merge [4] ./pageB.js 1:0-3:2
|
||||
chunk {0} 0.chunk.js 5.46 KiB <{3}> <{4}> [rendered]
|
||||
> ./common [4] ./pageB.js 1:0-3:2
|
||||
> ./common [5] ./pageA.js 1:0-3:2
|
||||
[0] ./b.js 21 bytes {0} {1} [built]
|
||||
cjs require ./b [3] ./pageC.js 2:17-31
|
||||
cjs require ./b [4] ./pageB.js 2:8-22
|
||||
[1] ./a.js 21 bytes {0} {1} [built]
|
||||
amd require ./a [3] ./pageC.js 1:0-3:2
|
||||
cjs require ./a [5] ./pageA.js 2:8-22
|
||||
[2] ./common.js 5.42 KiB {0} [built]
|
||||
amd require ./common [4] ./pageB.js 1:0-3:2
|
||||
amd require ./common [5] ./pageA.js 1:0-3:2
|
||||
chunk {1} 1.chunk.js 42 bytes {2} [rendered]
|
||||
> [3] ./pageC.js 1:0-3:2
|
||||
[0] ./b.js 21 bytes {1} {3} [built]
|
||||
chunk {1} 1.chunk.js 42 bytes <{2}> [rendered]
|
||||
> ./a [3] ./pageC.js 1:0-3:2
|
||||
[0] ./b.js 21 bytes {0} {1} [built]
|
||||
cjs require ./b [3] ./pageC.js 2:17-31
|
||||
cjs require ./b [4] ./pageB.js 2:8-22
|
||||
[1] ./a.js 21 bytes {1} {4} [built]
|
||||
[1] ./a.js 21 bytes {0} {1} [built]
|
||||
amd require ./a [3] ./pageC.js 1:0-3:2
|
||||
cjs require ./a [5] ./pageA.js 2:8-22
|
||||
chunk {2} pageC.bundle.js (pageC) 70 bytes [entry] [rendered]
|
||||
> pageC [3] ./pageC.js
|
||||
chunk {2} pageC.bundle.js (pageC) 70 bytes >{1}< [entry] [rendered]
|
||||
> ./pageC pageC
|
||||
[3] ./pageC.js 70 bytes {2} [built]
|
||||
single entry ./pageC pageC
|
||||
chunk {3} pageB.bundle.js (pageB) 92 bytes [entry] [rendered]
|
||||
> pageB [4] ./pageB.js
|
||||
[0] ./b.js 21 bytes {1} {3} [built]
|
||||
cjs require ./b [3] ./pageC.js 2:17-31
|
||||
cjs require ./b [4] ./pageB.js 2:8-22
|
||||
chunk {3} pageB.bundle.js (pageB) 71 bytes >{0}< [entry] [rendered]
|
||||
> ./pageB pageB
|
||||
[4] ./pageB.js 71 bytes {3} [built]
|
||||
single entry ./pageB pageB
|
||||
chunk {4} pageA.bundle.js (pageA) 92 bytes [entry] [rendered]
|
||||
> pageA [5] ./pageA.js
|
||||
[1] ./a.js 21 bytes {1} {4} [built]
|
||||
amd require ./a [3] ./pageC.js 1:0-3:2
|
||||
cjs require ./a [5] ./pageA.js 2:8-22
|
||||
chunk {4} pageA.bundle.js (pageA) 71 bytes >{0}< [entry] [rendered]
|
||||
> ./pageA pageA
|
||||
[5] ./pageA.js 71 bytes {4} [built]
|
||||
single entry ./pageA pageA
|
||||
```
|
||||
|
|
|
|||
|
|
@ -14,8 +14,7 @@ module.exports = {
|
|||
},
|
||||
plugins: [
|
||||
new AggressiveMergingPlugin({
|
||||
minSizeReduce: 1.5,
|
||||
moveToParents: true
|
||||
minSizeReduce: 1.5
|
||||
})
|
||||
],
|
||||
optimization: {
|
||||
|
|
|
|||
|
|
@ -7,9 +7,17 @@ const cmds = examples.map(function(dirname) {
|
|||
return "cd " + dirname + " && node build.js";
|
||||
});
|
||||
|
||||
let failed = 0;
|
||||
let i = 0;
|
||||
for(const cmd of cmds) {
|
||||
console.log(`[${++i}/${cmds.length}] ${cmd}`);
|
||||
cp.execSync(cmd, { encoding: "utf-8" });
|
||||
try {
|
||||
cp.execSync(cmd, { encoding: "utf-8" });
|
||||
} catch(e) {
|
||||
failed++;
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
console.log("done");
|
||||
if(failed > 0)
|
||||
console.log(`${failed} failed`);
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
A common challenge with combining `[chunkhash]` and Code Splitting is that the entry chunk includes the webpack runtime and with it the chunkhash mappings. This means it's always updated and the `[chunkhash]` is pretty useless, because this chunk won't be cached.
|
||||
|
||||
A very simple solution to this problem is to create another chunk which contains only the webpack runtime (including chunkhash map). This can be achieved by the CommonsChunkPlugin (or if the CommonsChunkPlugin is already used by passing multiple names to the CommonChunkPlugin). To avoid the additional request for another chunk, this pretty small chunk can be inlined into the HTML page.
|
||||
A very simple solution to this problem is to create another chunk which contains only the webpack runtime (including chunkhash map). This can be achieved with the `optimization.runtimeChunk` options. To avoid the additional request for another chunk, this pretty small chunk can be inlined into the HTML page.
|
||||
|
||||
The configuration required for this is:
|
||||
|
||||
* use `[chunkhash]` in `output.filename` (Note that this example doesn't do this because of the example generator infrastructure, but you should)
|
||||
* use `[chunkhash]` in `output.chunkFilename`
|
||||
* `CommonsChunkPlugin`
|
||||
* use `[chunkhash]` in `output.chunkFilename` (Note that this example doesn't do this because of the example generator infrastructure, but you should)
|
||||
|
||||
# example.js
|
||||
|
||||
|
|
@ -28,28 +27,19 @@ export default 123;
|
|||
|
||||
``` javascript
|
||||
var path = require("path");
|
||||
var webpack = require("../../");
|
||||
module.exports = {
|
||||
// mode: "development || "production",
|
||||
entry: {
|
||||
main: "./example",
|
||||
common: ["./vendor"] // optional
|
||||
main: "./example"
|
||||
},
|
||||
optimization: {
|
||||
runtimeChunk: true
|
||||
},
|
||||
output: {
|
||||
path: path.join(__dirname, "dist"),
|
||||
filename: "[name].[chunkhash].js",
|
||||
chunkFilename: "[chunkhash].js"
|
||||
},
|
||||
plugins: [
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
names: ["common", "manifest"]
|
||||
})
|
||||
/* without the "common" chunk:
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
name: "manifest"
|
||||
})
|
||||
*/
|
||||
]
|
||||
chunkFilename: "[name].[chunkhash].js"
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
|
|
@ -63,11 +53,11 @@ module.exports = {
|
|||
|
||||
<!-- inlined minimized file "manifest.[chunkhash].js" -->
|
||||
<script>
|
||||
!function(e){function r(r){for(var n,u,c,s=r[0],l=r[1],p=r[2],f=0,d=[];f<s.length;f++)u=s[f],o[u]&&d.push(o[u][0]),o[u]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(a&&a(r);d.length;)d.shift()();for(i.push.apply(i,p||[]),f=0;f<i.length;f++){for(var h=i[f],v=!0,g=1;g<h.length;g++){var m=h[g];0!==o[m]&&(v=!1)}v&&(i.splice(f--,1),c=t(t.s=h[0]))}return c}function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={},o={4:0},i=[];t.e=function(e){var r=[],n=o[e];if(0!==n)if(n)r.push(n[2]);else{var i=new Promise(function(r,t){n=o[e]=[r,t]});r.push(n[2]=i);var u=document.getElementsByTagName("head")[0],a=document.createElement("script");a.charset="utf-8",a.timeout=12e4,t.nc&&a.setAttribute("nonce",t.nc),a.src=t.p+""+{0:"19a84e789378731c8460",1:"4f0e85908244254bb448"}[e]+".js";var c=setTimeout(function(){s({type:"timeout",target:a})},12e4);a.onerror=a.onload=s;function s(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),i=r&&r.target&&r.target.src,u=new Error("Loading chunk "+e+" failed.\n("+n+": "+i+")");u.type=n,u.request=i,t[1](u)}o[e]=void 0}}u.appendChild(a)}return Promise.all(r)},t.m=e,t.c=n,t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:n})},t.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},t.p="dist/",t.oe=function(e){throw console.error(e),e};var u=window.webpackJsonp=window.webpackJsonp||[],a=u.push.bind(u);u.push=r,u=u.slice();for(var c=0;c<u.length;c++)r(u[c])}([]);
|
||||
!function(e){function r(r){for(var n,o,i=r[0],c=r[1],s=r[2],p=0,f=[];p<i.length;p++)o=i[p],u[o]&&f.push(u[o][0]),u[o]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(l&&l(r);f.length;)f.shift()();return a.push.apply(a,s||[]),t()}function t(){for(var e,r=0;r<a.length;r++){for(var t=a[r],o=!0,i=1;i<t.length;i++){var c=t[i];0!==u[c]&&(o=!1)}o&&(a.splice(r--,1),e=n(n.s=t[0]))}return e}function n(r){if(o[r])return o[r].exports;var t=o[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,n),t.l=!0,t.exports}var o={},u={2:0},a=[];n.e=function(e){var r=[],t=u[e];if(0!==t)if(t)r.push(t[2]);else{var o=new Promise(function(r,n){t=u[e]=[r,n]});r.push(t[2]=o);var a=document.getElementsByTagName("head")[0],i=document.createElement("script");i.charset="utf-8",i.timeout=12e4,n.nc&&i.setAttribute("nonce",n.nc),i.src=n.p+""+({}[e]||e)+".[chunkhash].js";var c=setTimeout(function(){s({type:"timeout",target:i})},12e4);i.onerror=i.onload=s;function s(r){i.onerror=i.onload=null,clearTimeout(c);var t=u[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),o=r&&r.target&&r.target.src,a=new Error("Loading chunk "+e+" failed.\n("+n+": "+o+")");a.type=n,a.request=o,t[1](a)}u[e]=void 0}}a.appendChild(i)}return Promise.all(r)},n.m=e,n.c=o,n.d=function(e,r,t){n.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:t})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(r,"a",r),r},n.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},n.p="dist/",n.oe=function(e){throw console.error(e),e};var i=window.webpackJsonp=window.webpackJsonp||[],c=i.push.bind(i);i.push=r,i=i.slice();for(var s=0;s<i.length;s++)r(i[s]);var l=c;t()}([]);
|
||||
</script>
|
||||
|
||||
<!-- optional when using the CommonChunkPlugin for vendor modules -->
|
||||
<script src="dist/common.[chunkhash].js"></script>
|
||||
<script src="dist/main-runtime.[chunkhash].js"></script>
|
||||
|
||||
<script src="dist/main.[chunkhash].js"></script>
|
||||
|
||||
|
|
@ -75,39 +65,211 @@ module.exports = {
|
|||
</html>
|
||||
```
|
||||
|
||||
# dist/common.[chunkhash].js
|
||||
# dist/main-runtime.[chunkhash].js
|
||||
|
||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||
|
||||
``` javascript
|
||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
|
||||
/* 0 */,
|
||||
/* 1 */
|
||||
/*!*******************!*\
|
||||
!*** ./vendor.js ***!
|
||||
\*******************/
|
||||
/*! exports provided: default */
|
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||
/******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // install a JSONP callback for chunk loading
|
||||
/******/ function webpackJsonpCallback(data) {
|
||||
/******/ var chunkIds = data[0];
|
||||
/******/ var moreModules = data[1]
|
||||
/******/ var executeModules = data[2];
|
||||
/******/ // add "moreModules" to the modules object,
|
||||
/******/ // then flag all "chunkIds" as loaded and fire callback
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [];
|
||||
/******/ for(;i < chunkIds.length; i++) {
|
||||
/******/ chunkId = chunkIds[i];
|
||||
/******/ if(installedChunks[chunkId]) {
|
||||
/******/ resolves.push(installedChunks[chunkId][0]);
|
||||
/******/ }
|
||||
/******/ installedChunks[chunkId] = 0;
|
||||
/******/ }
|
||||
/******/ for(moduleId in moreModules) {
|
||||
/******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
|
||||
/******/ modules[moduleId] = moreModules[moduleId];
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ if(parentJsonpFunction) parentJsonpFunction(data);
|
||||
/******/ while(resolves.length) {
|
||||
/******/ resolves.shift()();
|
||||
/******/ }
|
||||
/******/
|
||||
/******/ // add entry modules from loaded chunk to deferred list
|
||||
/******/ deferredModules.push.apply(deferredModules, executeModules || []);
|
||||
/******/
|
||||
/******/ // run deferred modules when all chunks ready
|
||||
/******/ return checkDeferredModules();
|
||||
/******/ };
|
||||
/******/ function checkDeferredModules() {
|
||||
/******/ var result;
|
||||
/******/ for(var i = 0; i < deferredModules.length; i++) {
|
||||
/******/ var deferredModule = deferredModules[i];
|
||||
/******/ var fullfilled = true;
|
||||
/******/ for(var j = 1; j < deferredModule.length; j++) {
|
||||
/******/ var depId = deferredModule[j];
|
||||
/******/ if(installedChunks[depId] !== 0) fullfilled = false;
|
||||
/******/ }
|
||||
/******/ if(fullfilled) {
|
||||
/******/ deferredModules.splice(i--, 1);
|
||||
/******/ result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ return result;
|
||||
/******/ }
|
||||
/******/
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
/******/ // object to store loaded and loading chunks
|
||||
/******/ var installedChunks = {
|
||||
/******/ 3: 0
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ var deferredModules = [];
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
/******/
|
||||
/******/ // Check if module is in cache
|
||||
/******/ if(installedModules[moduleId]) {
|
||||
/******/ return installedModules[moduleId].exports;
|
||||
/******/ }
|
||||
/******/ // Create a new module (and put it into the cache)
|
||||
/******/ var module = installedModules[moduleId] = {
|
||||
/******/ i: moduleId,
|
||||
/******/ l: false,
|
||||
/******/ exports: {}
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Execute the module function
|
||||
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
||||
/******/
|
||||
/******/ // Flag the module as loaded
|
||||
/******/ module.l = true;
|
||||
/******/
|
||||
/******/ // Return the exports of the module
|
||||
/******/ return module.exports;
|
||||
/******/ }
|
||||
/******/
|
||||
/******/ // This file contains only the entry chunk.
|
||||
/******/ // The chunk loading function for additional chunks
|
||||
/******/ __webpack_require__.e = function requireEnsure(chunkId) {
|
||||
/******/ var promises = [];
|
||||
/******/
|
||||
/******/
|
||||
/******/ // JSONP chunk loading for javascript
|
||||
/******/
|
||||
/******/ var installedChunkData = installedChunks[chunkId];
|
||||
/******/ if(installedChunkData !== 0) { // 0 means "already installed".
|
||||
/******/
|
||||
/******/ // a Promise means "currently loading".
|
||||
/******/ if(installedChunkData) {
|
||||
/******/ promises.push(installedChunkData[2]);
|
||||
/******/ } else {
|
||||
/******/ // setup Promise in chunk cache
|
||||
/******/ var promise = new Promise(function(resolve, reject) {
|
||||
/******/ installedChunkData = installedChunks[chunkId] = [resolve, reject];
|
||||
/******/ });
|
||||
/******/ promises.push(installedChunkData[2] = promise);
|
||||
/******/
|
||||
/******/ // start chunk loading
|
||||
/******/ var head = document.getElementsByTagName('head')[0];
|
||||
/******/ var script = document.createElement('script');
|
||||
/******/
|
||||
/******/ script.charset = 'utf-8';
|
||||
/******/ script.timeout = 120000;
|
||||
/******/
|
||||
/******/ if (__webpack_require__.nc) {
|
||||
/******/ script.setAttribute("nonce", __webpack_require__.nc);
|
||||
/******/ }
|
||||
/******/ script.src = __webpack_require__.p + "" + ({}[chunkId]||chunkId) + ".[chunkhash].js";
|
||||
/******/ var timeout = setTimeout(function(){
|
||||
/******/ onScriptComplete({ type: 'timeout', target: script });
|
||||
/******/ }, 120000);
|
||||
/******/ script.onerror = script.onload = onScriptComplete;
|
||||
/******/ function onScriptComplete(event) {
|
||||
/******/ // avoid mem leaks in IE.
|
||||
/******/ script.onerror = script.onload = null;
|
||||
/******/ clearTimeout(timeout);
|
||||
/******/ var chunk = installedChunks[chunkId];
|
||||
/******/ if(chunk !== 0) {
|
||||
/******/ if(chunk) {
|
||||
/******/ var errorType = event && (event.type === 'load' ? 'missing' : event.type);
|
||||
/******/ var realSrc = event && event.target && event.target.src;
|
||||
/******/ var error = new Error('Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')');
|
||||
/******/ error.type = errorType;
|
||||
/******/ error.request = realSrc;
|
||||
/******/ chunk[1](error);
|
||||
/******/ }
|
||||
/******/ installedChunks[chunkId] = undefined;
|
||||
/******/ }
|
||||
/******/ };
|
||||
/******/ head.appendChild(script);
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ return Promise.all(promises);
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // expose the modules object (__webpack_modules__)
|
||||
/******/ __webpack_require__.m = modules;
|
||||
/******/
|
||||
/******/ // expose the module cache
|
||||
/******/ __webpack_require__.c = installedModules;
|
||||
/******/
|
||||
/******/ // define getter function for harmony exports
|
||||
/******/ __webpack_require__.d = function(exports, name, getter) {
|
||||
/******/ if(!__webpack_require__.o(exports, name)) {
|
||||
/******/ Object.defineProperty(exports, name, {
|
||||
/******/ configurable: false,
|
||||
/******/ enumerable: true,
|
||||
/******/ get: getter
|
||||
/******/ });
|
||||
/******/ }
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // define __esModule on exports
|
||||
/******/ __webpack_require__.r = function(exports) {
|
||||
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
||||
/******/ __webpack_require__.n = function(module) {
|
||||
/******/ var getter = module && module.__esModule ?
|
||||
/******/ function getDefault() { return module['default']; } :
|
||||
/******/ function getModuleExports() { return module; };
|
||||
/******/ __webpack_require__.d(getter, 'a', getter);
|
||||
/******/ return getter;
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Object.prototype.hasOwnProperty.call
|
||||
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
||||
/******/
|
||||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "dist/";
|
||||
/******/
|
||||
/******/ // on error function for async loading
|
||||
/******/ __webpack_require__.oe = function(err) { console.error(err); throw err; };
|
||||
/******/
|
||||
/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
|
||||
/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ jsonpArray.push = webpackJsonpCallback;
|
||||
/******/ jsonpArray = jsonpArray.slice();
|
||||
/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
|
||||
/******/ var parentJsonpFunction = oldJsonpFunction;
|
||||
/******/
|
||||
/******/
|
||||
/******/ // run deferred modules from other chunks
|
||||
/******/ checkDeferredModules();
|
||||
/******/ })
|
||||
/************************************************************************/
|
||||
```
|
||||
|
||||
"use strict";
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
// some vendor lib (should be in common chunk)
|
||||
/* harmony default export */ __webpack_exports__["default"] = (123);
|
||||
</details>
|
||||
|
||||
|
||||
/***/ }),
|
||||
/* 2 */,
|
||||
/* 3 */,
|
||||
/* 4 */
|
||||
/*!**********************!*\
|
||||
!*** multi ./vendor ***!
|
||||
\**********************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
module.exports = __webpack_require__(/*! ./vendor */1);
|
||||
|
||||
|
||||
/***/ })
|
||||
],[[4,4,1]]]);
|
||||
``` javascript
|
||||
/******/ ([]);
|
||||
```
|
||||
|
||||
# dist/main.[chunkhash].js
|
||||
|
|
@ -126,12 +288,26 @@ __webpack_require__.r(__webpack_exports__);
|
|||
/* harmony import */ var _vendor__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./vendor */ 1);
|
||||
|
||||
// some module
|
||||
__webpack_require__.e(/*! import() */ 2).then(function() { var module = __webpack_require__(/*! ./async1 */ 2); return typeof module === "object" && module && module.__esModule ? module : { /* fake namespace object */ "default": module }; });
|
||||
__webpack_require__.e(/*! import() */ 3).then(function() { var module = __webpack_require__(/*! ./async2 */ 3); return typeof module === "object" && module && module.__esModule ? module : { /* fake namespace object */ "default": module }; });
|
||||
__webpack_require__.e(/*! import() */ 1).then(function() { var module = __webpack_require__(/*! ./async1 */ 2); return typeof module === "object" && module && module.__esModule ? module : { /* fake namespace object */ "default": module }; });
|
||||
__webpack_require__.e(/*! import() */ 2).then(function() { var module = __webpack_require__(/*! ./async2 */ 3); return typeof module === "object" && module && module.__esModule ? module : { /* fake namespace object */ "default": module }; });
|
||||
|
||||
|
||||
/***/ }),
|
||||
/* 1 */
|
||||
/*!*******************!*\
|
||||
!*** ./vendor.js ***!
|
||||
\*******************/
|
||||
/*! exports provided: default */
|
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
// some vendor lib (should be in common chunk)
|
||||
/* harmony default export */ __webpack_exports__["default"] = (123);
|
||||
|
||||
|
||||
/***/ })
|
||||
],[[0,4,1,0]]]);
|
||||
],[[0,3]]]);
|
||||
```
|
||||
|
||||
# Info
|
||||
|
|
@ -141,36 +317,30 @@ __webpack_require__.e(/*! import() */ 3).then(function() { var module = __webpac
|
|||
```
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
main.[chunkhash].js 944 bytes 0 [emitted] main
|
||||
common.[chunkhash].js 727 bytes 1 [emitted] common
|
||||
b71c088662b7b530c545.js 264 bytes 2 [emitted]
|
||||
f6eb6a4d15b19e593a54.js 264 bytes 3 [emitted]
|
||||
manifest.[chunkhash].js 7.1 KiB 4 [emitted] manifest
|
||||
Entrypoint main = manifest.[chunkhash].js common.[chunkhash].js main.[chunkhash].js
|
||||
Entrypoint common = manifest.[chunkhash].js common.[chunkhash].js
|
||||
chunk {0} main.[chunkhash].js (main) 90 bytes {1} [initial] [rendered]
|
||||
> main [0] ./example.js
|
||||
Asset Size Chunks Chunk Names
|
||||
main.[chunkhash].js 1.28 KiB 0 [emitted] main
|
||||
1.[chunkhash].js 264 bytes 1 [emitted]
|
||||
2.[chunkhash].js 264 bytes 2 [emitted]
|
||||
main-runtime.[chunkhash].js 7.49 KiB 3 [emitted] main-runtime
|
||||
Entrypoint main = main-runtime.[chunkhash].js main.[chunkhash].js
|
||||
chunk {0} main.[chunkhash].js (main) 159 bytes ={3}= >{1}< >{2}< [initial] [rendered]
|
||||
> ./example main
|
||||
[0] ./example.js 90 bytes {0} [built]
|
||||
[no exports]
|
||||
single entry ./example main
|
||||
chunk {1} common.[chunkhash].js (common) 97 bytes {4} [initial] [rendered]
|
||||
> common [4] multi ./vendor
|
||||
[1] ./vendor.js 69 bytes {1} [built]
|
||||
[1] ./vendor.js 69 bytes {0} [built]
|
||||
[exports: default]
|
||||
harmony side effect evaluation ./vendor [0] ./example.js 1:0-30
|
||||
single entry ./vendor [4] multi ./vendor common:100000
|
||||
[4] multi ./vendor 28 bytes {1} [built]
|
||||
multi entry
|
||||
chunk {2} b71c088662b7b530c545.js 29 bytes {0} [rendered]
|
||||
> [0] ./example.js 3:0-18
|
||||
[2] ./async1.js 29 bytes {2} [built]
|
||||
chunk {1} 1.[chunkhash].js 29 bytes <{3}> <{0}> [rendered]
|
||||
> ./async1 [0] ./example.js 3:0-18
|
||||
[2] ./async1.js 29 bytes {1} [built]
|
||||
import() ./async1 [0] ./example.js 3:0-18
|
||||
chunk {3} f6eb6a4d15b19e593a54.js 29 bytes {0} [rendered]
|
||||
> [0] ./example.js 4:0-18
|
||||
[3] ./async2.js 29 bytes {3} [built]
|
||||
chunk {2} 2.[chunkhash].js 29 bytes <{3}> <{0}> [rendered]
|
||||
> ./async2 [0] ./example.js 4:0-18
|
||||
[3] ./async2.js 29 bytes {2} [built]
|
||||
import() ./async2 [0] ./example.js 4:0-18
|
||||
chunk {4} manifest.[chunkhash].js (manifest) 0 bytes [entry] [rendered]
|
||||
chunk {3} main-runtime.[chunkhash].js (main-runtime) 0 bytes ={0}= >{1}< >{2}< [entry] [rendered]
|
||||
> ./example main
|
||||
```
|
||||
|
||||
## Production mode
|
||||
|
|
@ -178,34 +348,32 @@ chunk {4} manifest.[chunkhash].js (manifest) 0 bytes [entry] [rendered]
|
|||
```
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
19a84e789378731c8460.js 78 bytes 0 [emitted]
|
||||
4f0e85908244254bb448.js 78 bytes 1 [emitted]
|
||||
common.[chunkhash].js 153 bytes 2 [emitted] common
|
||||
main.[chunkhash].js 300 bytes 3 [emitted] main
|
||||
manifest.[chunkhash].js 1.76 KiB 4 [emitted] manifest
|
||||
Entrypoint main = manifest.[chunkhash].js common.[chunkhash].js main.[chunkhash].js
|
||||
Entrypoint common = manifest.[chunkhash].js common.[chunkhash].js
|
||||
chunk {0} 19a84e789378731c8460.js 29 bytes {3} [rendered]
|
||||
> [2] ./example.js 4:0-18
|
||||
[3] ./async2.js 29 bytes {0} [built]
|
||||
import() ./async2 [2] ./example.js 4:0-18
|
||||
chunk {1} 4f0e85908244254bb448.js 29 bytes {3} [rendered]
|
||||
> [2] ./example.js 3:0-18
|
||||
[4] ./async1.js 29 bytes {1} [built]
|
||||
import() ./async1 [2] ./example.js 3:0-18
|
||||
chunk {2} common.[chunkhash].js (common) 97 bytes {4} [initial] [rendered]
|
||||
> common [1] multi ./vendor
|
||||
[0] ./vendor.js 69 bytes {2} [built]
|
||||
[exports: default]
|
||||
single entry ./vendor [1] multi ./vendor common:100000
|
||||
harmony side effect evaluation ./vendor [2] ./example.js 1:0-30
|
||||
[1] multi ./vendor 28 bytes {2} [built]
|
||||
multi entry
|
||||
chunk {3} main.[chunkhash].js (main) 90 bytes {2} [initial] [rendered]
|
||||
> main [2] ./example.js
|
||||
[2] ./example.js 90 bytes {3} [built]
|
||||
Asset Size Chunks Chunk Names
|
||||
0.[chunkhash].js 77 bytes 0 [emitted]
|
||||
1.[chunkhash].js 78 bytes 1 [emitted]
|
||||
main-runtime.[chunkhash].js 1.76 KiB 2 [emitted] main-runtime
|
||||
main.[chunkhash].js 289 bytes 3 [emitted] main
|
||||
Entrypoint main = main-runtime.[chunkhash].js main.[chunkhash].js
|
||||
chunk {0} 0.[chunkhash].js 29 bytes <{2}> <{3}> [rendered]
|
||||
> ./async2 [] 4:0-18
|
||||
[1] ./async2.js 29 bytes {0} [built]
|
||||
import() ./async2 ./example.js 4:0-18
|
||||
chunk {1} 1.[chunkhash].js 29 bytes <{2}> <{3}> [rendered]
|
||||
> ./async1 [] 3:0-18
|
||||
[2] ./async1.js 29 bytes {1} [built]
|
||||
import() ./async1 ./example.js 3:0-18
|
||||
chunk {2} main-runtime.[chunkhash].js (main-runtime) 0 bytes ={3}= >{0}< >{1}< [entry] [rendered]
|
||||
> ./example main
|
||||
chunk {3} main.[chunkhash].js (main) 159 bytes ={2}= >{0}< >{1}< [initial] [rendered]
|
||||
> ./example main
|
||||
[0] ./example.js + 1 modules 159 bytes {3} [built]
|
||||
[no exports]
|
||||
single entry ./example main
|
||||
chunk {4} manifest.[chunkhash].js (manifest) 0 bytes [entry] [rendered]
|
||||
| ./example.js 90 bytes [built]
|
||||
| [no exports]
|
||||
| single entry ./example main
|
||||
| ./vendor.js 69 bytes [built]
|
||||
| [exports: default]
|
||||
| [no exports used]
|
||||
| harmony side effect evaluation ./vendor ./example.js 1:0-30
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
A common challenge with combining `[chunkhash]` and Code Splitting is that the entry chunk includes the webpack runtime and with it the chunkhash mappings. This means it's always updated and the `[chunkhash]` is pretty useless, because this chunk won't be cached.
|
||||
|
||||
A very simple solution to this problem is to create another chunk which contains only the webpack runtime (including chunkhash map). This can be achieved by the CommonsChunkPlugin (or if the CommonsChunkPlugin is already used by passing multiple names to the CommonChunkPlugin). To avoid the additional request for another chunk, this pretty small chunk can be inlined into the HTML page.
|
||||
A very simple solution to this problem is to create another chunk which contains only the webpack runtime (including chunkhash map). This can be achieved with the `optimization.runtimeChunk` options. To avoid the additional request for another chunk, this pretty small chunk can be inlined into the HTML page.
|
||||
|
||||
The configuration required for this is:
|
||||
|
||||
* use `[chunkhash]` in `output.filename` (Note that this example doesn't do this because of the example generator infrastructure, but you should)
|
||||
* use `[chunkhash]` in `output.chunkFilename`
|
||||
* `CommonsChunkPlugin`
|
||||
* use `[chunkhash]` in `output.chunkFilename` (Note that this example doesn't do this because of the example generator infrastructure, but you should)
|
||||
|
||||
# example.js
|
||||
|
||||
|
|
@ -36,11 +35,11 @@ The configuration required for this is:
|
|||
|
||||
<!-- inlined minimized file "manifest.[chunkhash].js" -->
|
||||
<script>
|
||||
{{production:dist/manifest.chunkhash.js}}
|
||||
{{production:dist/main-runtime.chunkhash.js}}
|
||||
</script>
|
||||
|
||||
<!-- optional when using the CommonChunkPlugin for vendor modules -->
|
||||
<script src="dist/common.[chunkhash].js"></script>
|
||||
<script src="dist/main-runtime.[chunkhash].js"></script>
|
||||
|
||||
<script src="dist/main.[chunkhash].js"></script>
|
||||
|
||||
|
|
@ -48,10 +47,10 @@ The configuration required for this is:
|
|||
</html>
|
||||
```
|
||||
|
||||
# dist/common.[chunkhash].js
|
||||
# dist/main-runtime.[chunkhash].js
|
||||
|
||||
``` javascript
|
||||
{{dist/common.chunkhash.js}}
|
||||
{{dist/main-runtime.chunkhash.js}}
|
||||
```
|
||||
|
||||
# dist/main.[chunkhash].js
|
||||
|
|
|
|||
|
|
@ -1,24 +1,15 @@
|
|||
var path = require("path");
|
||||
var webpack = require("../../");
|
||||
module.exports = {
|
||||
// mode: "development || "production",
|
||||
entry: {
|
||||
main: "./example",
|
||||
common: ["./vendor"] // optional
|
||||
main: "./example"
|
||||
},
|
||||
optimization: {
|
||||
runtimeChunk: true
|
||||
},
|
||||
output: {
|
||||
path: path.join(__dirname, "dist"),
|
||||
filename: "[name].chunkhash.js",
|
||||
chunkFilename: "[chunkhash].js"
|
||||
},
|
||||
plugins: [
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
names: ["common", "manifest"]
|
||||
})
|
||||
/* without the "common" chunk:
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
name: "manifest"
|
||||
})
|
||||
*/
|
||||
]
|
||||
chunkFilename: "[name].chunkhash.js"
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,151 +0,0 @@
|
|||
|
||||
# example.js
|
||||
|
||||
``` javascript
|
||||
require("./style.css");
|
||||
require(["./chunk"]);
|
||||
```
|
||||
|
||||
# style.css
|
||||
|
||||
``` css
|
||||
body {
|
||||
background: url(image.png);
|
||||
}
|
||||
```
|
||||
|
||||
# chunk.js
|
||||
|
||||
``` javascript
|
||||
require("./style2.css");
|
||||
```
|
||||
|
||||
# style2.css
|
||||
|
||||
``` css
|
||||
.xyz {
|
||||
background: url(image2.png);
|
||||
}
|
||||
```
|
||||
|
||||
# webpack.config.js
|
||||
|
||||
``` javascript
|
||||
const LoaderOptionsPlugin = require("../../lib/LoaderOptionsPlugin");
|
||||
const ExtractTextPlugin = require("extract-text-webpack-plugin");
|
||||
module.exports = {
|
||||
// mode: "development || "production",
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
fallback: "style-loader",
|
||||
use: "css-loader"
|
||||
})
|
||||
},
|
||||
{ test: /\.png$/, loader: "file-loader" }
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new ExtractTextPlugin({
|
||||
filename: "style.css"
|
||||
}),
|
||||
// Temporary workaround for the file-loader
|
||||
new LoaderOptionsPlugin({
|
||||
options: {}
|
||||
})
|
||||
],
|
||||
optimization: {
|
||||
occurrenceOrder: true // To keep filename consistent between different modes (for example building only)
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
# dist/style.css
|
||||
|
||||
``` javascript
|
||||
body {
|
||||
background: url(dist/ce21cbdd9b894e6af794813eb3fdaf60.png);
|
||||
}
|
||||
```
|
||||
|
||||
# Info
|
||||
|
||||
## Unoptimized
|
||||
|
||||
```
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
ce21cbdd9b894e6af794813eb3fdaf60.png 119 bytes [emitted]
|
||||
0.output.js 2.33 KiB 0 [emitted]
|
||||
output.js 22.4 KiB 1 [emitted] main
|
||||
style.css 73 bytes 1 [emitted] main
|
||||
Entrypoint main = output.js style.css
|
||||
chunk {0} 0.output.js 1.34 KiB {1} [rendered]
|
||||
> [1] ./example.js 2:0-20
|
||||
[2] ./chunk.js 26 bytes {0} [built]
|
||||
amd require ./chunk [1] ./example.js 2:0-20
|
||||
[5] ./image2.png 82 bytes {0} [built]
|
||||
cjs require ./image2.png [6] (webpack)/node_modules/css-loader!./style2.css 6:58-81
|
||||
[6] (webpack)/node_modules/css-loader!./style2.css 236 bytes {0} [built]
|
||||
cjs require !!../../node_modules/css-loader/index.js!./style2.css [7] ./style2.css 4:14-78
|
||||
[7] ./style2.css 1 KiB {0} [built]
|
||||
cjs require ./style2.css [2] ./chunk.js 1:0-23
|
||||
chunk {1} output.js, style.css (main) 14.5 KiB [entry] [rendered]
|
||||
> main [1] ./example.js
|
||||
[1] ./example.js 48 bytes {1} [built]
|
||||
single entry .\example.js main
|
||||
[10] ./style.css 41 bytes [built]
|
||||
+ 3 hidden modules
|
||||
Child extract-text-webpack-plugin ../../node_modules/extract-text-webpack-plugin/dist ../../node_modules/css-loader/index.js!style.css:
|
||||
1 asset
|
||||
Entrypoint undefined = extract-text-webpack-plugin-output-filename
|
||||
chunk {0} extract-text-webpack-plugin-output-filename 2.52 KiB [entry] [rendered]
|
||||
> [2] (webpack)/node_modules/css-loader!./style.css
|
||||
[0] ./image.png 82 bytes {0} [built]
|
||||
cjs require ./image.png [2] (webpack)/node_modules/css-loader!./style.css 6:58-80
|
||||
[2] (webpack)/node_modules/css-loader!./style.css 235 bytes {0} [built]
|
||||
single entry !!(webpack)\node_modules\css-loader\index.js!.\style.css
|
||||
+ 1 hidden module
|
||||
```
|
||||
|
||||
## Production mode
|
||||
|
||||
```
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
ce21cbdd9b894e6af794813eb3fdaf60.png 119 bytes [emitted]
|
||||
0.output.js 403 bytes 0 [emitted]
|
||||
output.js 7.04 KiB 1 [emitted] main
|
||||
style.css 73 bytes 1 [emitted] main
|
||||
Entrypoint main = output.js style.css
|
||||
chunk {0} 0.output.js 1.34 KiB {1} [rendered]
|
||||
> [1] ./example.js 2:0-20
|
||||
[2] ./chunk.js 26 bytes {0} [built]
|
||||
amd require ./chunk [1] ./example.js 2:0-20
|
||||
[5] ./image2.png 82 bytes {0} [built]
|
||||
cjs require ./image2.png [6] (webpack)/node_modules/css-loader!./style2.css 6:58-81
|
||||
[6] (webpack)/node_modules/css-loader!./style2.css 236 bytes {0} [built]
|
||||
cjs require !!../../node_modules/css-loader/index.js!./style2.css [7] ./style2.css 4:14-78
|
||||
[7] ./style2.css 1 KiB {0} [built]
|
||||
cjs require ./style2.css [2] ./chunk.js 1:0-23
|
||||
chunk {1} output.js, style.css (main) 14.5 KiB [entry] [rendered]
|
||||
> main [1] ./example.js
|
||||
[1] ./example.js 48 bytes {1} [built]
|
||||
single entry .\example.js main
|
||||
[10] ./style.css 41 bytes [built]
|
||||
+ 3 hidden modules
|
||||
Child extract-text-webpack-plugin ../../node_modules/extract-text-webpack-plugin/dist ../../node_modules/css-loader/index.js!style.css:
|
||||
1 asset
|
||||
Entrypoint undefined = extract-text-webpack-plugin-output-filename
|
||||
chunk {0} extract-text-webpack-plugin-output-filename 2.52 KiB [entry] [rendered]
|
||||
> [2] (webpack)/node_modules/css-loader!./style.css
|
||||
[0] ./image.png 82 bytes {0} [built]
|
||||
cjs require ./image.png [2] (webpack)/node_modules/css-loader!./style.css 6:58-80
|
||||
[2] (webpack)/node_modules/css-loader!./style.css 235 bytes {0} [built]
|
||||
single entry !!(webpack)\node_modules\css-loader\index.js!.\style.css
|
||||
+ 1 hidden module
|
||||
```
|
||||
|
|
@ -1 +0,0 @@
|
|||
require("../build-common");
|
||||
|
|
@ -1 +0,0 @@
|
|||
require("./style2.css");
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
require("./style.css");
|
||||
require(["./chunk"]);
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 119 B |
Binary file not shown.
|
Before Width: | Height: | Size: 119 B |
|
|
@ -1,3 +0,0 @@
|
|||
body {
|
||||
background: url(image.png);
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
.xyz {
|
||||
background: url(image2.png);
|
||||
}
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
|
||||
# example.js
|
||||
|
||||
``` javascript
|
||||
{{example.js}}
|
||||
```
|
||||
|
||||
# style.css
|
||||
|
||||
``` css
|
||||
{{style.css}}
|
||||
```
|
||||
|
||||
# chunk.js
|
||||
|
||||
``` javascript
|
||||
{{chunk.js}}
|
||||
```
|
||||
|
||||
# style2.css
|
||||
|
||||
``` css
|
||||
{{style2.css}}
|
||||
```
|
||||
|
||||
# webpack.config.js
|
||||
|
||||
``` javascript
|
||||
{{webpack.config.js}}
|
||||
```
|
||||
|
||||
# dist/style.css
|
||||
|
||||
``` javascript
|
||||
{{dist/style.css}}
|
||||
```
|
||||
|
||||
# Info
|
||||
|
||||
## Unoptimized
|
||||
|
||||
```
|
||||
{{stdout}}
|
||||
```
|
||||
|
||||
## Production mode
|
||||
|
||||
```
|
||||
{{production:stdout}}
|
||||
```
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
const LoaderOptionsPlugin = require("../../lib/LoaderOptionsPlugin");
|
||||
const ExtractTextPlugin = require("extract-text-webpack-plugin");
|
||||
module.exports = {
|
||||
// mode: "development || "production",
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
fallback: "style-loader",
|
||||
use: "css-loader"
|
||||
})
|
||||
},
|
||||
{ test: /\.png$/, loader: "file-loader" }
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new ExtractTextPlugin({
|
||||
filename: "style.css"
|
||||
}),
|
||||
// Temporary workaround for the file-loader
|
||||
new LoaderOptionsPlugin({
|
||||
options: {}
|
||||
})
|
||||
],
|
||||
optimization: {
|
||||
occurrenceOrder: true // To keep filename consistent between different modes (for example building only)
|
||||
}
|
||||
};
|
||||
|
|
@ -22,10 +22,12 @@ getTemplate("b", function(b) {
|
|||
/******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // install a JSONP callback for chunk loading
|
||||
/******/ function webpackJsonpCallback(data) {
|
||||
/******/ var chunkIds = data[0], moreModules = data[1], executeModules = data[2];
|
||||
/******/ var chunkIds = data[0];
|
||||
/******/ var moreModules = data[1]
|
||||
/******/
|
||||
/******/ // add "moreModules" to the modules object,
|
||||
/******/ // then flag all "chunkIds" as loaded and fire callback
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [], result;
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [];
|
||||
/******/ for(;i < chunkIds.length; i++) {
|
||||
/******/ chunkId = chunkIds[i];
|
||||
/******/ if(installedChunks[chunkId]) {
|
||||
|
|
@ -45,6 +47,7 @@ getTemplate("b", function(b) {
|
|||
/******/
|
||||
/******/ };
|
||||
/******/
|
||||
/******/
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
|
|
@ -53,7 +56,7 @@ getTemplate("b", function(b) {
|
|||
/******/ 1: 0
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ var scheduledModules = [];
|
||||
/******/
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
|
|
@ -179,10 +182,12 @@ getTemplate("b", function(b) {
|
|||
/******/ __webpack_require__.oe = function(err) { console.error(err); throw err; };
|
||||
/******/
|
||||
/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
|
||||
/******/ var parentJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ jsonpArray.push = webpackJsonpCallback;
|
||||
/******/ jsonpArray = jsonpArray.slice();
|
||||
/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
|
||||
/******/ var parentJsonpFunction = oldJsonpFunction;
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 0);
|
||||
|
|
@ -309,9 +314,9 @@ Hash: 0a1b2c3d4e5f6a7b8c9d
|
|||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
0.output.js 1.86 KiB 0 [emitted]
|
||||
output.js 7.16 KiB 1 [emitted] main
|
||||
output.js 7.19 KiB 1 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} 0.output.js 463 bytes {1} [rendered]
|
||||
chunk {0} 0.output.js 463 bytes <{1}> [rendered]
|
||||
> [0] ./example.js 2:1-4:3
|
||||
[1] ../require.context/templates sync ^\.\/.*$ 217 bytes {0} [built]
|
||||
amd require context ../require.context/templates [0] ./example.js 2:1-4:3
|
||||
|
|
@ -324,8 +329,8 @@ chunk {0} 0.output.js 463 bytes {1} [rendered]
|
|||
[4] ../require.context/templates/a.js 82 bytes {0} [optional] [built]
|
||||
context element ./a.js [1] ../require.context/templates sync ^\.\/.*$ ./a.js
|
||||
context element ./a [1] ../require.context/templates sync ^\.\/.*$ ./a
|
||||
chunk {1} output.js (main) 261 bytes [entry] [rendered]
|
||||
> main [0] ./example.js
|
||||
chunk {1} output.js (main) 261 bytes >{0}< [entry] [rendered]
|
||||
> .\example.js main
|
||||
[0] ./example.js 261 bytes {1} [built]
|
||||
single entry .\example.js main
|
||||
```
|
||||
|
|
@ -339,7 +344,7 @@ Version: webpack next
|
|||
0.output.js 627 bytes 0 [emitted]
|
||||
output.js 1.75 KiB 1 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} 0.output.js 463 bytes {1} [rendered]
|
||||
chunk {0} 0.output.js 463 bytes <{1}> [rendered]
|
||||
> [0] ./example.js 2:1-4:3
|
||||
[1] ../require.context/templates sync ^\.\/.*$ 217 bytes {0} [built]
|
||||
amd require context ../require.context/templates [0] ./example.js 2:1-4:3
|
||||
|
|
@ -352,8 +357,8 @@ chunk {0} 0.output.js 463 bytes {1} [rendered]
|
|||
[4] ../require.context/templates/a.js 82 bytes {0} [optional] [built]
|
||||
context element ./a.js [1] ../require.context/templates sync ^\.\/.*$ ./a.js
|
||||
context element ./a [1] ../require.context/templates sync ^\.\/.*$ ./a
|
||||
chunk {1} output.js (main) 261 bytes [entry] [rendered]
|
||||
> main [0] ./example.js
|
||||
chunk {1} output.js (main) 261 bytes >{0}< [entry] [rendered]
|
||||
> .\example.js main
|
||||
[0] ./example.js 261 bytes {1} [built]
|
||||
single entry .\example.js main
|
||||
```
|
||||
|
|
|
|||
|
|
@ -22,10 +22,12 @@ getTemplate("b", function(b) {
|
|||
/******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // install a JSONP callback for chunk loading
|
||||
/******/ function webpackJsonpCallback(data) {
|
||||
/******/ var chunkIds = data[0], moreModules = data[1], executeModules = data[2];
|
||||
/******/ var chunkIds = data[0];
|
||||
/******/ var moreModules = data[1]
|
||||
/******/
|
||||
/******/ // add "moreModules" to the modules object,
|
||||
/******/ // then flag all "chunkIds" as loaded and fire callback
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [], result;
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [];
|
||||
/******/ for(;i < chunkIds.length; i++) {
|
||||
/******/ chunkId = chunkIds[i];
|
||||
/******/ if(installedChunks[chunkId]) {
|
||||
|
|
@ -45,6 +47,7 @@ getTemplate("b", function(b) {
|
|||
/******/
|
||||
/******/ };
|
||||
/******/
|
||||
/******/
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
|
|
@ -53,7 +56,7 @@ getTemplate("b", function(b) {
|
|||
/******/ 1: 0
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ var scheduledModules = [];
|
||||
/******/
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
|
|
@ -179,10 +182,12 @@ getTemplate("b", function(b) {
|
|||
/******/ __webpack_require__.oe = function(err) { console.error(err); throw err; };
|
||||
/******/
|
||||
/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
|
||||
/******/ var parentJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ jsonpArray.push = webpackJsonpCallback;
|
||||
/******/ jsonpArray = jsonpArray.slice();
|
||||
/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
|
||||
/******/ var parentJsonpFunction = oldJsonpFunction;
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 0);
|
||||
|
|
@ -309,9 +314,9 @@ Hash: 0a1b2c3d4e5f6a7b8c9d
|
|||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
0.output.js 1.86 KiB 0 [emitted]
|
||||
output.js 7.1 KiB 1 [emitted] main
|
||||
output.js 7.13 KiB 1 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} 0.output.js 463 bytes {1} [rendered]
|
||||
chunk {0} 0.output.js 463 bytes <{1}> [rendered]
|
||||
> [0] ./example.js 2:1-4:3
|
||||
[1] ../require.context/templates sync ^\.\/.*$ 217 bytes {0} [built]
|
||||
cjs require context ../require.context/templates [0] ./example.js 3:11-64
|
||||
|
|
@ -324,8 +329,8 @@ chunk {0} 0.output.js 463 bytes {1} [rendered]
|
|||
[4] ../require.context/templates/a.js 82 bytes {0} [optional] [built]
|
||||
context element ./a.js [1] ../require.context/templates sync ^\.\/.*$ ./a.js
|
||||
context element ./a [1] ../require.context/templates sync ^\.\/.*$ ./a
|
||||
chunk {1} output.js (main) 276 bytes [entry] [rendered]
|
||||
> main [0] ./example.js
|
||||
chunk {1} output.js (main) 276 bytes >{0}< [entry] [rendered]
|
||||
> .\example.js main
|
||||
[0] ./example.js 276 bytes {1} [built]
|
||||
single entry .\example.js main
|
||||
```
|
||||
|
|
@ -339,7 +344,7 @@ Version: webpack next
|
|||
0.output.js 627 bytes 0 [emitted]
|
||||
output.js 1.73 KiB 1 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} 0.output.js 463 bytes {1} [rendered]
|
||||
chunk {0} 0.output.js 463 bytes <{1}> [rendered]
|
||||
> [0] ./example.js 2:1-4:3
|
||||
[1] ../require.context/templates sync ^\.\/.*$ 217 bytes {0} [built]
|
||||
cjs require context ../require.context/templates [0] ./example.js 3:11-64
|
||||
|
|
@ -352,8 +357,8 @@ chunk {0} 0.output.js 463 bytes {1} [rendered]
|
|||
[4] ../require.context/templates/a.js 82 bytes {0} [optional] [built]
|
||||
context element ./a.js [1] ../require.context/templates sync ^\.\/.*$ ./a.js
|
||||
context element ./a [1] ../require.context/templates sync ^\.\/.*$ ./a
|
||||
chunk {1} output.js (main) 276 bytes [entry] [rendered]
|
||||
> main [0] ./example.js
|
||||
chunk {1} output.js (main) 276 bytes >{0}< [entry] [rendered]
|
||||
> .\example.js main
|
||||
[0] ./example.js 276 bytes {1} [built]
|
||||
single entry .\example.js main
|
||||
```
|
||||
|
|
|
|||
|
|
@ -25,10 +25,12 @@ module.exports = "It works";
|
|||
/******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // install a JSONP callback for chunk loading
|
||||
/******/ function webpackJsonpCallback(data) {
|
||||
/******/ var chunkIds = data[0], moreModules = data[1], executeModules = data[2];
|
||||
/******/ var chunkIds = data[0];
|
||||
/******/ var moreModules = data[1]
|
||||
/******/
|
||||
/******/ // add "moreModules" to the modules object,
|
||||
/******/ // then flag all "chunkIds" as loaded and fire callback
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [], result;
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [];
|
||||
/******/ for(;i < chunkIds.length; i++) {
|
||||
/******/ chunkId = chunkIds[i];
|
||||
/******/ if(installedChunks[chunkId]) {
|
||||
|
|
@ -48,6 +50,7 @@ module.exports = "It works";
|
|||
/******/
|
||||
/******/ };
|
||||
/******/
|
||||
/******/
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
|
|
@ -56,7 +59,7 @@ module.exports = "It works";
|
|||
/******/ 1: 0
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ var scheduledModules = [];
|
||||
/******/
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
|
|
@ -182,10 +185,12 @@ module.exports = "It works";
|
|||
/******/ __webpack_require__.oe = function(err) { console.error(err); throw err; };
|
||||
/******/
|
||||
/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
|
||||
/******/ var parentJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ jsonpArray.push = webpackJsonpCallback;
|
||||
/******/ jsonpArray = jsonpArray.slice();
|
||||
/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
|
||||
/******/ var parentJsonpFunction = oldJsonpFunction;
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 1);
|
||||
|
|
@ -264,14 +269,14 @@ Hash: 0a1b2c3d4e5f6a7b8c9d
|
|||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
0.output.js 257 bytes 0 [emitted]
|
||||
output.js 7.53 KiB 1 [emitted] main
|
||||
output.js 7.56 KiB 1 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} 0.output.js 28 bytes {1} [rendered]
|
||||
chunk {0} 0.output.js 28 bytes <{1}> [rendered]
|
||||
> [0] (webpack)/node_modules/bundle-loader!./file.js 7:0-14:2
|
||||
[2] ./file.js 28 bytes {0} [built]
|
||||
cjs require !!./file.js [0] (webpack)/node_modules/bundle-loader!./file.js 8:8-30
|
||||
chunk {1} output.js (main) 378 bytes [entry] [rendered]
|
||||
> main [1] ./example.js
|
||||
chunk {1} output.js (main) 378 bytes >{0}< [entry] [rendered]
|
||||
> .\example.js main
|
||||
[0] (webpack)/node_modules/bundle-loader!./file.js 281 bytes {1} [built]
|
||||
cjs require bundle-loader!./file.js [1] ./example.js 1:0-34
|
||||
[1] ./example.js 97 bytes {1} [built]
|
||||
|
|
@ -287,12 +292,12 @@ Version: webpack next
|
|||
0.output.js 98 bytes 0 [emitted]
|
||||
output.js 1.79 KiB 1 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} 0.output.js 28 bytes {1} [rendered]
|
||||
chunk {0} 0.output.js 28 bytes <{1}> [rendered]
|
||||
> [0] (webpack)/node_modules/bundle-loader!./file.js 7:0-14:2
|
||||
[2] ./file.js 28 bytes {0} [built]
|
||||
cjs require !!./file.js [0] (webpack)/node_modules/bundle-loader!./file.js 8:8-30
|
||||
chunk {1} output.js (main) 378 bytes [entry] [rendered]
|
||||
> main [1] ./example.js
|
||||
chunk {1} output.js (main) 378 bytes >{0}< [entry] [rendered]
|
||||
> .\example.js main
|
||||
[0] (webpack)/node_modules/bundle-loader!./file.js 281 bytes {1} [built]
|
||||
cjs require bundle-loader!./file.js [1] ./example.js 1:0-34
|
||||
[1] ./example.js 97 bytes {1} [built]
|
||||
|
|
|
|||
|
|
@ -33,10 +33,12 @@ Promise.all([loadC("1"), loadC("2")]).then(function(arr) {
|
|||
/******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // install a JSONP callback for chunk loading
|
||||
/******/ function webpackJsonpCallback(data) {
|
||||
/******/ var chunkIds = data[0], moreModules = data[1], executeModules = data[2];
|
||||
/******/ var chunkIds = data[0];
|
||||
/******/ var moreModules = data[1]
|
||||
/******/
|
||||
/******/ // add "moreModules" to the modules object,
|
||||
/******/ // then flag all "chunkIds" as loaded and fire callback
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [], result;
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [];
|
||||
/******/ for(;i < chunkIds.length; i++) {
|
||||
/******/ chunkId = chunkIds[i];
|
||||
/******/ if(installedChunks[chunkId]) {
|
||||
|
|
@ -56,6 +58,7 @@ Promise.all([loadC("1"), loadC("2")]).then(function(arr) {
|
|||
/******/
|
||||
/******/ };
|
||||
/******/
|
||||
/******/
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
|
|
@ -64,7 +67,7 @@ Promise.all([loadC("1"), loadC("2")]).then(function(arr) {
|
|||
/******/ 3: 0
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ var scheduledModules = [];
|
||||
/******/
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
|
|
@ -190,10 +193,12 @@ Promise.all([loadC("1"), loadC("2")]).then(function(arr) {
|
|||
/******/ __webpack_require__.oe = function(err) { console.error(err); throw err; };
|
||||
/******/
|
||||
/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
|
||||
/******/ var parentJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ jsonpArray.push = webpackJsonpCallback;
|
||||
/******/ jsonpArray = jsonpArray.slice();
|
||||
/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
|
||||
/******/ var parentJsonpFunction = oldJsonpFunction;
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 4);
|
||||
|
|
@ -305,17 +310,21 @@ Version: webpack next
|
|||
0.output.js 275 bytes 0 [emitted]
|
||||
1.output.js 284 bytes 1 [emitted]
|
||||
2.output.js 270 bytes 2 [emitted]
|
||||
output.js 8.71 KiB 3 [emitted] main
|
||||
output.js 8.74 KiB 3 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} 0.output.js 13 bytes {3} [rendered]
|
||||
chunk {0} 0.output.js 13 bytes <{3}> [rendered]
|
||||
> ./2 [2] ./node_modules/c lazy ^\.\/.*$ namespace object ./2
|
||||
> ./2.js [2] ./node_modules/c lazy ^\.\/.*$ namespace object ./2.js
|
||||
1 module
|
||||
chunk {1} 1.output.js 13 bytes {3} [rendered]
|
||||
chunk {1} 1.output.js 13 bytes <{3}> [rendered]
|
||||
> ./1 [2] ./node_modules/c lazy ^\.\/.*$ namespace object ./1
|
||||
> ./1.js [2] ./node_modules/c lazy ^\.\/.*$ namespace object ./1.js
|
||||
1 module
|
||||
chunk {2} 2.output.js 11 bytes {3} [rendered]
|
||||
> [4] ./example.js 3:0-11
|
||||
chunk {2} 2.output.js 11 bytes <{3}> [rendered]
|
||||
> b [4] ./example.js 3:0-11
|
||||
1 module
|
||||
chunk {3} output.js (main) 427 bytes [entry] [rendered]
|
||||
> main [4] ./example.js
|
||||
chunk {3} output.js (main) 427 bytes >{0}< >{1}< >{2}< [entry] [rendered]
|
||||
> .\example.js main
|
||||
[2] ./node_modules/c lazy ^\.\/.*$ namespace object 160 bytes {3} [built]
|
||||
import() context lazy c [4] ./example.js 8:8-27
|
||||
[4] ./example.js 256 bytes {3} [built]
|
||||
|
|
@ -335,15 +344,19 @@ Version: webpack next
|
|||
2.output.js 78 bytes 2 [emitted]
|
||||
output.js 2.25 KiB 3 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} 0.output.js 13 bytes {3} [rendered]
|
||||
chunk {0} 0.output.js 13 bytes <{3}> [rendered]
|
||||
> ./2 [2] ./node_modules/c lazy ^\.\/.*$ namespace object ./2
|
||||
> ./2.js [2] ./node_modules/c lazy ^\.\/.*$ namespace object ./2.js
|
||||
1 module
|
||||
chunk {1} 1.output.js 13 bytes {3} [rendered]
|
||||
chunk {1} 1.output.js 13 bytes <{3}> [rendered]
|
||||
> ./1 [2] ./node_modules/c lazy ^\.\/.*$ namespace object ./1
|
||||
> ./1.js [2] ./node_modules/c lazy ^\.\/.*$ namespace object ./1.js
|
||||
1 module
|
||||
chunk {2} 2.output.js 11 bytes {3} [rendered]
|
||||
> [4] ./example.js 3:0-11
|
||||
chunk {2} 2.output.js 11 bytes <{3}> [rendered]
|
||||
> b [4] ./example.js 3:0-11
|
||||
1 module
|
||||
chunk {3} output.js (main) 427 bytes [entry] [rendered]
|
||||
> main [4] ./example.js
|
||||
chunk {3} output.js (main) 427 bytes >{0}< >{1}< >{2}< [entry] [rendered]
|
||||
> .\example.js main
|
||||
[2] ./node_modules/c lazy ^\.\/.*$ namespace object 160 bytes {3} [built]
|
||||
import() context lazy c [4] ./example.js 8:8-27
|
||||
[4] ./example.js 256 bytes {3} [built]
|
||||
|
|
|
|||
|
|
@ -51,10 +51,12 @@ export default foo;
|
|||
/******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // install a JSONP callback for chunk loading
|
||||
/******/ function webpackJsonpCallback(data) {
|
||||
/******/ var chunkIds = data[0], moreModules = data[1], executeModules = data[2];
|
||||
/******/ var chunkIds = data[0];
|
||||
/******/ var moreModules = data[1]
|
||||
/******/
|
||||
/******/ // add "moreModules" to the modules object,
|
||||
/******/ // then flag all "chunkIds" as loaded and fire callback
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [], result;
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [];
|
||||
/******/ for(;i < chunkIds.length; i++) {
|
||||
/******/ chunkId = chunkIds[i];
|
||||
/******/ if(installedChunks[chunkId]) {
|
||||
|
|
@ -74,6 +76,7 @@ export default foo;
|
|||
/******/
|
||||
/******/ };
|
||||
/******/
|
||||
/******/
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
|
|
@ -82,7 +85,7 @@ export default foo;
|
|||
/******/ 3: 0
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ var scheduledModules = [];
|
||||
/******/
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
|
|
@ -208,10 +211,12 @@ export default foo;
|
|||
/******/ __webpack_require__.oe = function(err) { console.error(err); throw err; };
|
||||
/******/
|
||||
/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
|
||||
/******/ var parentJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ jsonpArray.push = webpackJsonpCallback;
|
||||
/******/ jsonpArray = jsonpArray.slice();
|
||||
/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
|
||||
/******/ var parentJsonpFunction = oldJsonpFunction;
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 4);
|
||||
|
|
@ -321,25 +326,31 @@ Version: webpack next
|
|||
0.output.js 436 bytes 0 [emitted]
|
||||
1.output.js 445 bytes 1 [emitted]
|
||||
2.output.js 439 bytes 2 [emitted]
|
||||
output.js 8.19 KiB 3 [emitted] main
|
||||
output.js 8.22 KiB 3 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} 0.output.js 41 bytes {3} [rendered]
|
||||
chunk {0} 0.output.js 41 bytes <{3}> [rendered]
|
||||
> ./foo [3] ./templates lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./foo
|
||||
> ./foo.js [3] ./templates lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./foo.js
|
||||
[0] ./templates/foo.js 41 bytes {0} [optional] [built]
|
||||
[exports: default]
|
||||
context element ./foo.js [3] ./templates lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./foo.js
|
||||
context element ./foo [3] ./templates lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./foo
|
||||
chunk {1} 1.output.js 41 bytes {3} [rendered]
|
||||
chunk {1} 1.output.js 41 bytes <{3}> [rendered]
|
||||
> ./baz [3] ./templates lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./baz
|
||||
> ./baz.js [3] ./templates lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./baz.js
|
||||
[1] ./templates/baz.js 41 bytes {1} [optional] [built]
|
||||
[exports: default]
|
||||
context element ./baz.js [3] ./templates lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./baz.js
|
||||
context element ./baz [3] ./templates lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./baz
|
||||
chunk {2} 2.output.js 41 bytes {3} [rendered]
|
||||
chunk {2} 2.output.js 41 bytes <{3}> [rendered]
|
||||
> ./bar [3] ./templates lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./bar
|
||||
> ./bar.js [3] ./templates lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./bar.js
|
||||
[2] ./templates/bar.js 41 bytes {2} [optional] [built]
|
||||
[exports: default]
|
||||
context element ./bar.js [3] ./templates lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./bar.js
|
||||
context element ./bar [3] ./templates lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./bar
|
||||
chunk {3} output.js (main) 618 bytes [entry] [rendered]
|
||||
> main [4] ./example.js
|
||||
chunk {3} output.js (main) 618 bytes >{0}< >{1}< >{2}< [entry] [rendered]
|
||||
> .\example.js main
|
||||
[3] ./templates lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object 160 bytes {3} [optional] [built]
|
||||
import() context lazy ./templates [4] ./example.js 3:23-7:3
|
||||
[4] ./example.js 458 bytes {3} [built]
|
||||
|
|
@ -357,23 +368,29 @@ Version: webpack next
|
|||
2.output.js 115 bytes 2 [emitted]
|
||||
output.js 2.13 KiB 3 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} 0.output.js 41 bytes {3} [rendered]
|
||||
chunk {0} 0.output.js 41 bytes <{3}> [rendered]
|
||||
> ./foo [3] ./templates lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./foo
|
||||
> ./foo.js [3] ./templates lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./foo.js
|
||||
[0] ./templates/foo.js 41 bytes {0} [optional] [built]
|
||||
[exports: default]
|
||||
context element ./foo.js [3] ./templates lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./foo.js
|
||||
context element ./foo [3] ./templates lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./foo
|
||||
chunk {1} 1.output.js 41 bytes {3} [rendered]
|
||||
chunk {1} 1.output.js 41 bytes <{3}> [rendered]
|
||||
> ./baz [3] ./templates lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./baz
|
||||
> ./baz.js [3] ./templates lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./baz.js
|
||||
[1] ./templates/baz.js 41 bytes {1} [optional] [built]
|
||||
[exports: default]
|
||||
context element ./baz.js [3] ./templates lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./baz.js
|
||||
context element ./baz [3] ./templates lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./baz
|
||||
chunk {2} 2.output.js 41 bytes {3} [rendered]
|
||||
chunk {2} 2.output.js 41 bytes <{3}> [rendered]
|
||||
> ./bar [3] ./templates lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./bar
|
||||
> ./bar.js [3] ./templates lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./bar.js
|
||||
[2] ./templates/bar.js 41 bytes {2} [optional] [built]
|
||||
[exports: default]
|
||||
context element ./bar.js [3] ./templates lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./bar.js
|
||||
context element ./bar [3] ./templates lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./bar
|
||||
chunk {3} output.js (main) 618 bytes [entry] [rendered]
|
||||
> main [4] ./example.js
|
||||
chunk {3} output.js (main) 618 bytes >{0}< >{1}< >{2}< [entry] [rendered]
|
||||
> .\example.js main
|
||||
[3] ./templates lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object 160 bytes {3} [optional] [built]
|
||||
import() context lazy ./templates [4] ./example.js 3:23-7:3
|
||||
[4] ./example.js 458 bytes {3} [built]
|
||||
|
|
|
|||
|
|
@ -40,10 +40,12 @@ export default foo;
|
|||
/******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // install a JSONP callback for chunk loading
|
||||
/******/ function webpackJsonpCallback(data) {
|
||||
/******/ var chunkIds = data[0], moreModules = data[1], executeModules = data[2];
|
||||
/******/ var chunkIds = data[0];
|
||||
/******/ var moreModules = data[1]
|
||||
/******/
|
||||
/******/ // add "moreModules" to the modules object,
|
||||
/******/ // then flag all "chunkIds" as loaded and fire callback
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [], result;
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [];
|
||||
/******/ for(;i < chunkIds.length; i++) {
|
||||
/******/ chunkId = chunkIds[i];
|
||||
/******/ if(installedChunks[chunkId]) {
|
||||
|
|
@ -63,6 +65,7 @@ export default foo;
|
|||
/******/
|
||||
/******/ };
|
||||
/******/
|
||||
/******/
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
|
|
@ -71,7 +74,7 @@ export default foo;
|
|||
/******/ 3: 0
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ var scheduledModules = [];
|
||||
/******/
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
|
|
@ -197,10 +200,12 @@ export default foo;
|
|||
/******/ __webpack_require__.oe = function(err) { console.error(err); throw err; };
|
||||
/******/
|
||||
/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
|
||||
/******/ var parentJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ jsonpArray.push = webpackJsonpCallback;
|
||||
/******/ jsonpArray = jsonpArray.slice();
|
||||
/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
|
||||
/******/ var parentJsonpFunction = oldJsonpFunction;
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 4);
|
||||
|
|
@ -308,25 +313,31 @@ Version: webpack next
|
|||
0.output.js 436 bytes 0 [emitted]
|
||||
1.output.js 445 bytes 1 [emitted]
|
||||
2.output.js 439 bytes 2 [emitted]
|
||||
output.js 8 KiB 3 [emitted] main
|
||||
output.js 8.03 KiB 3 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} 0.output.js 41 bytes {3} [rendered]
|
||||
chunk {0} 0.output.js 41 bytes <{3}> [rendered]
|
||||
> ./foo [3] ./templates lazy ^\.\/.*$ namespace object ./foo
|
||||
> ./foo.js [3] ./templates lazy ^\.\/.*$ namespace object ./foo.js
|
||||
[0] ./templates/foo.js 41 bytes {0} [optional] [built]
|
||||
[exports: default]
|
||||
context element ./foo.js [3] ./templates lazy ^\.\/.*$ namespace object ./foo.js
|
||||
context element ./foo [3] ./templates lazy ^\.\/.*$ namespace object ./foo
|
||||
chunk {1} 1.output.js 41 bytes {3} [rendered]
|
||||
chunk {1} 1.output.js 41 bytes <{3}> [rendered]
|
||||
> ./baz [3] ./templates lazy ^\.\/.*$ namespace object ./baz
|
||||
> ./baz.js [3] ./templates lazy ^\.\/.*$ namespace object ./baz.js
|
||||
[1] ./templates/baz.js 41 bytes {1} [optional] [built]
|
||||
[exports: default]
|
||||
context element ./baz.js [3] ./templates lazy ^\.\/.*$ namespace object ./baz.js
|
||||
context element ./baz [3] ./templates lazy ^\.\/.*$ namespace object ./baz
|
||||
chunk {2} 2.output.js 41 bytes {3} [rendered]
|
||||
chunk {2} 2.output.js 41 bytes <{3}> [rendered]
|
||||
> ./bar [3] ./templates lazy ^\.\/.*$ namespace object ./bar
|
||||
> ./bar.js [3] ./templates lazy ^\.\/.*$ namespace object ./bar.js
|
||||
[2] ./templates/bar.js 41 bytes {2} [optional] [built]
|
||||
[exports: default]
|
||||
context element ./bar.js [3] ./templates lazy ^\.\/.*$ namespace object ./bar.js
|
||||
context element ./bar [3] ./templates lazy ^\.\/.*$ namespace object ./bar
|
||||
chunk {3} output.js (main) 456 bytes [entry] [rendered]
|
||||
> main [4] ./example.js
|
||||
chunk {3} output.js (main) 456 bytes >{0}< >{1}< >{2}< [entry] [rendered]
|
||||
> .\example.js main
|
||||
[3] ./templates lazy ^\.\/.*$ namespace object 160 bytes {3} [optional] [built]
|
||||
import() context lazy ./templates [4] ./example.js 3:23-60
|
||||
[4] ./example.js 296 bytes {3} [built]
|
||||
|
|
@ -342,25 +353,31 @@ Version: webpack next
|
|||
0.output.js 113 bytes 0 [emitted]
|
||||
1.output.js 114 bytes 1 [emitted]
|
||||
2.output.js 115 bytes 2 [emitted]
|
||||
output.js 2.09 KiB 3 [emitted] main
|
||||
output.js 2.1 KiB 3 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} 0.output.js 41 bytes {3} [rendered]
|
||||
chunk {0} 0.output.js 41 bytes <{3}> [rendered]
|
||||
> ./foo [3] ./templates lazy ^\.\/.*$ namespace object ./foo
|
||||
> ./foo.js [3] ./templates lazy ^\.\/.*$ namespace object ./foo.js
|
||||
[0] ./templates/foo.js 41 bytes {0} [optional] [built]
|
||||
[exports: default]
|
||||
context element ./foo.js [3] ./templates lazy ^\.\/.*$ namespace object ./foo.js
|
||||
context element ./foo [3] ./templates lazy ^\.\/.*$ namespace object ./foo
|
||||
chunk {1} 1.output.js 41 bytes {3} [rendered]
|
||||
chunk {1} 1.output.js 41 bytes <{3}> [rendered]
|
||||
> ./baz [3] ./templates lazy ^\.\/.*$ namespace object ./baz
|
||||
> ./baz.js [3] ./templates lazy ^\.\/.*$ namespace object ./baz.js
|
||||
[1] ./templates/baz.js 41 bytes {1} [optional] [built]
|
||||
[exports: default]
|
||||
context element ./baz.js [3] ./templates lazy ^\.\/.*$ namespace object ./baz.js
|
||||
context element ./baz [3] ./templates lazy ^\.\/.*$ namespace object ./baz
|
||||
chunk {2} 2.output.js 41 bytes {3} [rendered]
|
||||
chunk {2} 2.output.js 41 bytes <{3}> [rendered]
|
||||
> ./bar [3] ./templates lazy ^\.\/.*$ namespace object ./bar
|
||||
> ./bar.js [3] ./templates lazy ^\.\/.*$ namespace object ./bar.js
|
||||
[2] ./templates/bar.js 41 bytes {2} [optional] [built]
|
||||
[exports: default]
|
||||
context element ./bar.js [3] ./templates lazy ^\.\/.*$ namespace object ./bar.js
|
||||
context element ./bar [3] ./templates lazy ^\.\/.*$ namespace object ./bar
|
||||
chunk {3} output.js (main) 456 bytes [entry] [rendered]
|
||||
> main [4] ./example.js
|
||||
chunk {3} output.js (main) 456 bytes >{0}< >{1}< >{2}< [entry] [rendered]
|
||||
> .\example.js main
|
||||
[3] ./templates lazy ^\.\/.*$ namespace object 160 bytes {3} [optional] [built]
|
||||
import() context lazy ./templates [4] ./example.js 3:23-60
|
||||
[4] ./example.js 296 bytes {3} [built]
|
||||
|
|
|
|||
|
|
@ -40,10 +40,12 @@ export default foo;
|
|||
/******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // install a JSONP callback for chunk loading
|
||||
/******/ function webpackJsonpCallback(data) {
|
||||
/******/ var chunkIds = data[0], moreModules = data[1], executeModules = data[2];
|
||||
/******/ var chunkIds = data[0];
|
||||
/******/ var moreModules = data[1]
|
||||
/******/
|
||||
/******/ // add "moreModules" to the modules object,
|
||||
/******/ // then flag all "chunkIds" as loaded and fire callback
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [], result;
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [];
|
||||
/******/ for(;i < chunkIds.length; i++) {
|
||||
/******/ chunkId = chunkIds[i];
|
||||
/******/ if(installedChunks[chunkId]) {
|
||||
|
|
@ -63,6 +65,7 @@ export default foo;
|
|||
/******/
|
||||
/******/ };
|
||||
/******/
|
||||
/******/
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
|
|
@ -71,7 +74,7 @@ export default foo;
|
|||
/******/ 3: 0
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ var scheduledModules = [];
|
||||
/******/
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
|
|
@ -197,10 +200,12 @@ export default foo;
|
|||
/******/ __webpack_require__.oe = function(err) { console.error(err); throw err; };
|
||||
/******/
|
||||
/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
|
||||
/******/ var parentJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ jsonpArray.push = webpackJsonpCallback;
|
||||
/******/ jsonpArray = jsonpArray.slice();
|
||||
/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
|
||||
/******/ var parentJsonpFunction = oldJsonpFunction;
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 4);
|
||||
|
|
@ -268,11 +273,11 @@ module.exports = webpackAsyncContext;
|
|||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
__webpack_require__.e(/*! import() | chunk-foo | duplicate */ 2).then(__webpack_require__.bind(null, /*! ./templates/foo */ 0)).then(function(foo) {
|
||||
__webpack_require__.e(/*! import() | chunk-foo */ 2).then(__webpack_require__.bind(null, /*! ./templates/foo */ 0)).then(function(foo) {
|
||||
console.log('foo:', foo);
|
||||
})
|
||||
|
||||
__webpack_require__.e(/*! require.ensure | chunk-foo1 | duplicate */ 2).then((function(require) {
|
||||
__webpack_require__.e(/*! require.ensure | chunk-foo1 */ 2).then((function(require) {
|
||||
var foo = __webpack_require__(/*! ./templates/foo */ 0);
|
||||
console.log('foo:', foo);
|
||||
}).bind(null, __webpack_require__)).catch(__webpack_require__.oe);
|
||||
|
|
@ -297,30 +302,34 @@ __webpack_require__(3)("./ba" + createContextVar).then(function(bar) {
|
|||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
0.output.js 445 bytes 0 [emitted] chunk-bar-baz2
|
||||
1.output.js 439 bytes 1 [emitted] chunk-bar-baz0
|
||||
0.output.js 445 bytes 0 [emitted] chunk-bar-baz3
|
||||
1.output.js 439 bytes 1 [emitted] chunk-bar-baz1
|
||||
2.output.js 436 bytes 2 [emitted] chunk-foo
|
||||
output.js 8.23 KiB 3 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} 0.output.js (chunk-bar-baz2) 41 bytes {3} [rendered]
|
||||
chunk {0} 0.output.js (chunk-bar-baz3) 41 bytes <{3}> [rendered]
|
||||
> ./baz [3] ./templates lazy ^\.\/ba.*$ namespace object ./baz
|
||||
> ./baz.js [3] ./templates lazy ^\.\/ba.*$ namespace object ./baz.js
|
||||
[1] ./templates/baz.js 41 bytes {0} [optional] [built]
|
||||
[exports: default]
|
||||
context element ./baz.js [3] ./templates lazy ^\.\/ba.*$ namespace object ./baz.js
|
||||
context element ./baz [3] ./templates lazy ^\.\/ba.*$ namespace object ./baz
|
||||
chunk {1} 1.output.js (chunk-bar-baz0) 41 bytes {3} [rendered]
|
||||
chunk {1} 1.output.js (chunk-bar-baz1) 41 bytes <{3}> [rendered]
|
||||
> ./bar [3] ./templates lazy ^\.\/ba.*$ namespace object ./bar
|
||||
> ./bar.js [3] ./templates lazy ^\.\/ba.*$ namespace object ./bar.js
|
||||
[2] ./templates/bar.js 41 bytes {1} [optional] [built]
|
||||
[exports: default]
|
||||
context element ./bar.js [3] ./templates lazy ^\.\/ba.*$ namespace object ./bar.js
|
||||
context element ./bar [3] ./templates lazy ^\.\/ba.*$ namespace object ./bar
|
||||
chunk {2} 2.output.js (chunk-foo) 41 bytes {3} [rendered]
|
||||
> duplicate chunk-foo [4] ./example.js 1:0-62
|
||||
> duplicate chunk-foo1 [4] ./example.js 5:0-8:16
|
||||
chunk {2} 2.output.js (chunk-foo) 41 bytes <{3}> [rendered]
|
||||
> ./templates/foo [4] ./example.js 1:0-62
|
||||
> [4] ./example.js 5:0-8:16
|
||||
[0] ./templates/foo.js 41 bytes {2} [built]
|
||||
[exports: default]
|
||||
import() ./templates/foo [4] ./example.js 1:0-62
|
||||
cjs require ./templates/foo [4] ./example.js 6:11-37
|
||||
chunk {3} output.js (main) 580 bytes [entry] [rendered]
|
||||
> main [4] ./example.js
|
||||
chunk {3} output.js (main) 580 bytes >{0}< >{1}< >{2}< [entry] [rendered]
|
||||
> .\example.js main
|
||||
[3] ./templates lazy ^\.\/ba.*$ namespace object 160 bytes {3} [built]
|
||||
import() context lazy ./templates [4] ./example.js 11:0-84
|
||||
[4] ./example.js 420 bytes {3} [built]
|
||||
|
|
@ -333,30 +342,34 @@ chunk {3} output.js (main) 580 bytes [entry] [rendered]
|
|||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
0.output.js 114 bytes 0 [emitted] chunk-bar-baz2
|
||||
1.output.js 115 bytes 1 [emitted] chunk-bar-baz0
|
||||
0.output.js 114 bytes 0 [emitted] chunk-bar-baz3
|
||||
1.output.js 115 bytes 1 [emitted] chunk-bar-baz1
|
||||
2.output.js 113 bytes 2 [emitted] chunk-foo
|
||||
output.js 2.12 KiB 3 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} 0.output.js (chunk-bar-baz2) 41 bytes {3} [rendered]
|
||||
chunk {0} 0.output.js (chunk-bar-baz3) 41 bytes <{3}> [rendered]
|
||||
> ./baz [3] ./templates lazy ^\.\/ba.*$ namespace object ./baz
|
||||
> ./baz.js [3] ./templates lazy ^\.\/ba.*$ namespace object ./baz.js
|
||||
[1] ./templates/baz.js 41 bytes {0} [optional] [built]
|
||||
[exports: default]
|
||||
context element ./baz.js [3] ./templates lazy ^\.\/ba.*$ namespace object ./baz.js
|
||||
context element ./baz [3] ./templates lazy ^\.\/ba.*$ namespace object ./baz
|
||||
chunk {1} 1.output.js (chunk-bar-baz0) 41 bytes {3} [rendered]
|
||||
chunk {1} 1.output.js (chunk-bar-baz1) 41 bytes <{3}> [rendered]
|
||||
> ./bar [3] ./templates lazy ^\.\/ba.*$ namespace object ./bar
|
||||
> ./bar.js [3] ./templates lazy ^\.\/ba.*$ namespace object ./bar.js
|
||||
[2] ./templates/bar.js 41 bytes {1} [optional] [built]
|
||||
[exports: default]
|
||||
context element ./bar.js [3] ./templates lazy ^\.\/ba.*$ namespace object ./bar.js
|
||||
context element ./bar [3] ./templates lazy ^\.\/ba.*$ namespace object ./bar
|
||||
chunk {2} 2.output.js (chunk-foo) 41 bytes {3} [rendered]
|
||||
> duplicate chunk-foo [4] ./example.js 1:0-62
|
||||
> duplicate chunk-foo1 [4] ./example.js 5:0-8:16
|
||||
chunk {2} 2.output.js (chunk-foo) 41 bytes <{3}> [rendered]
|
||||
> ./templates/foo [4] ./example.js 1:0-62
|
||||
> [4] ./example.js 5:0-8:16
|
||||
[0] ./templates/foo.js 41 bytes {2} [built]
|
||||
[exports: default]
|
||||
import() ./templates/foo [4] ./example.js 1:0-62
|
||||
cjs require ./templates/foo [4] ./example.js 6:11-37
|
||||
chunk {3} output.js (main) 580 bytes [entry] [rendered]
|
||||
> main [4] ./example.js
|
||||
chunk {3} output.js (main) 580 bytes >{0}< >{1}< >{2}< [entry] [rendered]
|
||||
> .\example.js main
|
||||
[3] ./templates lazy ^\.\/ba.*$ namespace object 160 bytes {3} [built]
|
||||
import() context lazy ./templates [4] ./example.js 11:0-84
|
||||
[4] ./example.js 420 bytes {3} [built]
|
||||
|
|
|
|||
|
|
@ -44,10 +44,12 @@ require.ensure(["c"], function(require) {
|
|||
/******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // install a JSONP callback for chunk loading
|
||||
/******/ function webpackJsonpCallback(data) {
|
||||
/******/ var chunkIds = data[0], moreModules = data[1], executeModules = data[2];
|
||||
/******/ var chunkIds = data[0];
|
||||
/******/ var moreModules = data[1]
|
||||
/******/
|
||||
/******/ // add "moreModules" to the modules object,
|
||||
/******/ // then flag all "chunkIds" as loaded and fire callback
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [], result;
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [];
|
||||
/******/ for(;i < chunkIds.length; i++) {
|
||||
/******/ chunkId = chunkIds[i];
|
||||
/******/ if(installedChunks[chunkId]) {
|
||||
|
|
@ -67,6 +69,7 @@ require.ensure(["c"], function(require) {
|
|||
/******/
|
||||
/******/ };
|
||||
/******/
|
||||
/******/
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
|
|
@ -75,7 +78,7 @@ require.ensure(["c"], function(require) {
|
|||
/******/ 1: 0
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ var scheduledModules = [];
|
||||
/******/
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
|
|
@ -201,10 +204,12 @@ require.ensure(["c"], function(require) {
|
|||
/******/ __webpack_require__.oe = function(err) { console.error(err); throw err; };
|
||||
/******/
|
||||
/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
|
||||
/******/ var parentJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ jsonpArray.push = webpackJsonpCallback;
|
||||
/******/ jsonpArray = jsonpArray.slice();
|
||||
/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
|
||||
/******/ var parentJsonpFunction = oldJsonpFunction;
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 2);
|
||||
|
|
@ -299,13 +304,13 @@ Hash: 0a1b2c3d4e5f6a7b8c9d
|
|||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
0.output.js 490 bytes 0 [emitted]
|
||||
output.js 7.44 KiB 1 [emitted] main
|
||||
output.js 7.47 KiB 1 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} 0.output.js 22 bytes {1} [rendered]
|
||||
chunk {0} 0.output.js 22 bytes <{1}> [rendered]
|
||||
> [2] ./example.js 3:0-6:2
|
||||
2 modules
|
||||
chunk {1} output.js (main) 166 bytes [entry] [rendered]
|
||||
> main [2] ./example.js
|
||||
chunk {1} output.js (main) 166 bytes >{0}< [entry] [rendered]
|
||||
> .\example.js main
|
||||
[2] ./example.js 144 bytes {1} [built]
|
||||
single entry .\example.js main
|
||||
+ 2 hidden modules
|
||||
|
|
@ -320,11 +325,11 @@ Version: webpack next
|
|||
0.output.js 95 bytes 0 [emitted]
|
||||
output.js 1.68 KiB 1 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} 0.output.js 22 bytes {1} [rendered]
|
||||
chunk {0} 0.output.js 22 bytes <{1}> [rendered]
|
||||
> [2] ./example.js 3:0-6:2
|
||||
2 modules
|
||||
chunk {1} output.js (main) 166 bytes [entry] [rendered]
|
||||
> main [2] ./example.js
|
||||
chunk {1} output.js (main) 166 bytes >{0}< [entry] [rendered]
|
||||
> .\example.js main
|
||||
[2] ./example.js 144 bytes {1} [built]
|
||||
single entry .\example.js main
|
||||
+ 2 hidden modules
|
||||
|
|
|
|||
|
|
@ -94,6 +94,7 @@ module.exports = 42
|
|||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "dist/";
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 0);
|
||||
/******/ })
|
||||
|
|
@ -154,10 +155,10 @@ module.exports = 42;
|
|||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
output.js 3.34 KiB 0 [emitted] main
|
||||
output.js 3.35 KiB 0 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} output.js (main) 206 bytes [entry] [rendered]
|
||||
> main [0] ./example.js
|
||||
> .\example.js main
|
||||
[0] ./example.js 31 bytes {0} [built]
|
||||
single entry .\example.js main
|
||||
[1] ./cup1.coffee 118 bytes {0} [built]
|
||||
|
|
@ -176,7 +177,7 @@ Version: webpack next
|
|||
output.js 708 bytes 0 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} output.js (main) 206 bytes [entry] [rendered]
|
||||
> main [2] ./example.js
|
||||
> .\example.js main
|
||||
[0] ./cup2.coffee 57 bytes {0} [built]
|
||||
cjs require ./cup2.coffee [1] ./cup1.coffee 4:12-36
|
||||
cjs require ./cup2 [1] ./cup1.coffee 5:9-26
|
||||
|
|
|
|||
|
|
@ -35,44 +35,109 @@ With this bundle configuration, you would load your third party libraries, then
|
|||
|
||||
``` javascript
|
||||
var path = require("path");
|
||||
var CommonsChunkPlugin = require("../../lib/optimize/CommonsChunkPlugin");
|
||||
|
||||
module.exports = {
|
||||
// mode: "development" || "production",
|
||||
entry: {
|
||||
vendor: ["./vendor1", "./vendor2"],
|
||||
pageA: "./pageA",
|
||||
pageB: "./pageB",
|
||||
pageC: "./pageC"
|
||||
// older versions of webpack may require an empty entry point declaration here
|
||||
// common: []
|
||||
},
|
||||
optimization: {
|
||||
splitChunks: {
|
||||
chunks: "initial",
|
||||
minSize: 0, // This is example is too small to create commons chunks
|
||||
name: "common",
|
||||
cacheGroups: {
|
||||
vendor: {
|
||||
test: /node_modules/,
|
||||
name: "vendor",
|
||||
enforce: true
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
output: {
|
||||
path: path.join(__dirname, "dist"),
|
||||
filename: "[name].js"
|
||||
},
|
||||
plugins: [
|
||||
new CommonsChunkPlugin({
|
||||
// The order of this array matters
|
||||
names: ["common", "vendor"],
|
||||
minChunks: 2
|
||||
})
|
||||
]
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
# dist/vendor.js
|
||||
|
||||
``` javascript
|
||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[3],{
|
||||
|
||||
/***/ 1:
|
||||
/*!*********************************!*\
|
||||
!*** ./node_modules/vendor1.js ***!
|
||||
\*********************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports = "vendor1";
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ 5:
|
||||
/*!*********************************!*\
|
||||
!*** ./node_modules/vendor2.js ***!
|
||||
\*********************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports = "vendor2";
|
||||
|
||||
/***/ })
|
||||
|
||||
}]);
|
||||
```
|
||||
|
||||
# dist/common.js
|
||||
|
||||
``` javascript
|
||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[4],{
|
||||
|
||||
/***/ 3:
|
||||
/*!*********************!*\
|
||||
!*** ./utility2.js ***!
|
||||
\*********************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports = "utility2";
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ 6:
|
||||
/*!*********************!*\
|
||||
!*** ./utility3.js ***!
|
||||
\*********************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports = "utility3";
|
||||
|
||||
/***/ })
|
||||
|
||||
}]);
|
||||
```
|
||||
|
||||
# dist/pageA.js
|
||||
|
||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||
|
||||
``` javascript
|
||||
/******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // install a JSONP callback for chunk loading
|
||||
/******/ function webpackJsonpCallback(data) {
|
||||
/******/ var chunkIds = data[0], moreModules = data[1], executeModules = data[2];
|
||||
/******/ var chunkIds = data[0];
|
||||
/******/ var moreModules = data[1]
|
||||
/******/ var executeModules = data[2];
|
||||
/******/ // add "moreModules" to the modules object,
|
||||
/******/ // then flag all "chunkIds" as loaded and fire callback
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [], result;
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [];
|
||||
/******/ for(;i < chunkIds.length; i++) {
|
||||
/******/ chunkId = chunkIds[i];
|
||||
/******/ if(installedChunks[chunkId]) {
|
||||
|
|
@ -89,22 +154,29 @@ module.exports = {
|
|||
/******/ while(resolves.length) {
|
||||
/******/ resolves.shift()();
|
||||
/******/ }
|
||||
/******/ scheduledModules.push.apply(scheduledModules, executeModules || []);
|
||||
/******/
|
||||
/******/ for(i = 0; i < scheduledModules.length; i++) {
|
||||
/******/ var scheduledModule = scheduledModules[i];
|
||||
/******/ // add entry modules from loaded chunk to deferred list
|
||||
/******/ deferredModules.push.apply(deferredModules, executeModules || []);
|
||||
/******/
|
||||
/******/ // run deferred modules when all chunks ready
|
||||
/******/ return checkDeferredModules();
|
||||
/******/ };
|
||||
/******/ function checkDeferredModules() {
|
||||
/******/ var result;
|
||||
/******/ for(var i = 0; i < deferredModules.length; i++) {
|
||||
/******/ var deferredModule = deferredModules[i];
|
||||
/******/ var fullfilled = true;
|
||||
/******/ for(var j = 1; j < scheduledModule.length; j++) {
|
||||
/******/ var depId = scheduledModule[j];
|
||||
/******/ for(var j = 1; j < deferredModule.length; j++) {
|
||||
/******/ var depId = deferredModule[j];
|
||||
/******/ if(installedChunks[depId] !== 0) fullfilled = false;
|
||||
/******/ }
|
||||
/******/ if(fullfilled) {
|
||||
/******/ scheduledModules.splice(i--, 1);
|
||||
/******/ result = __webpack_require__(__webpack_require__.s = scheduledModule[0]);
|
||||
/******/ deferredModules.splice(i--, 1);
|
||||
/******/ result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ return result;
|
||||
/******/ };
|
||||
/******/ }
|
||||
/******/
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
|
|
@ -114,7 +186,7 @@ module.exports = {
|
|||
/******/ 0: 0
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ var scheduledModules = [];
|
||||
/******/ var deferredModules = [];
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
|
|
@ -178,17 +250,18 @@ module.exports = {
|
|||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "dist/";
|
||||
/******/
|
||||
/******/ // on error function for async loading
|
||||
/******/ __webpack_require__.oe = function(err) { console.error(err); throw err; };
|
||||
/******/
|
||||
/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
|
||||
/******/ var parentJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ jsonpArray.push = webpackJsonpCallback;
|
||||
/******/ jsonpArray = jsonpArray.slice();
|
||||
/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
|
||||
/******/ var parentJsonpFunction = oldJsonpFunction;
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 0);
|
||||
/******/
|
||||
/******/ // add entry module to deferred list
|
||||
/******/ deferredModules.push([0,3,4]);
|
||||
/******/ // run deferred modules when ready
|
||||
/******/ return checkDeferredModules();
|
||||
/******/ })
|
||||
/************************************************************************/
|
||||
```
|
||||
|
|
@ -198,91 +271,22 @@ module.exports = {
|
|||
``` javascript
|
||||
/******/ ([
|
||||
/* 0 */
|
||||
/*!*********************************!*\
|
||||
!*** multi ./vendor1 ./vendor2 ***!
|
||||
\*********************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
__webpack_require__(/*! ./vendor1 */1);
|
||||
module.exports = __webpack_require__(/*! ./vendor2 */2);
|
||||
|
||||
|
||||
/***/ }),
|
||||
/* 1 */
|
||||
/*!********************!*\
|
||||
!*** ./vendor1.js ***!
|
||||
\********************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports = "vendor1";
|
||||
|
||||
/***/ }),
|
||||
/* 2 */
|
||||
/*!********************!*\
|
||||
!*** ./vendor2.js ***!
|
||||
\********************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports = "vendor2";
|
||||
|
||||
/***/ })
|
||||
/******/ ]);
|
||||
```
|
||||
|
||||
# dist/common.js
|
||||
|
||||
``` javascript
|
||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[4],{
|
||||
|
||||
/***/ 5:
|
||||
/*!*********************!*\
|
||||
!*** ./utility2.js ***!
|
||||
\*********************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports = "utility2";
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ 7:
|
||||
/*!*********************!*\
|
||||
!*** ./utility3.js ***!
|
||||
\*********************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports = "utility3";
|
||||
|
||||
/***/ })
|
||||
|
||||
}]);
|
||||
```
|
||||
|
||||
# dist/pageA.js
|
||||
|
||||
``` javascript
|
||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
|
||||
/* 0 */,
|
||||
/* 1 */,
|
||||
/* 2 */,
|
||||
/* 3 */
|
||||
/*!******************!*\
|
||||
!*** ./pageA.js ***!
|
||||
\******************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
var utility1 = __webpack_require__(/*! ./utility1 */ 4);
|
||||
var utility2 = __webpack_require__(/*! ./utility2 */ 5);
|
||||
var vendor1 = __webpack_require__(/*! vendor1 */ 1);
|
||||
var utility1 = __webpack_require__(/*! ./utility1 */ 2);
|
||||
var utility2 = __webpack_require__(/*! ./utility2 */ 3);
|
||||
|
||||
module.exports = "pageA";
|
||||
|
||||
|
||||
/***/ }),
|
||||
/* 4 */
|
||||
/* 1 */,
|
||||
/* 2 */
|
||||
/*!*********************!*\
|
||||
!*** ./utility1.js ***!
|
||||
\*********************/
|
||||
|
|
@ -292,51 +296,323 @@ module.exports = "pageA";
|
|||
module.exports = "utility1";
|
||||
|
||||
/***/ })
|
||||
],[[3,0,4,1]]]);
|
||||
/******/ ]);
|
||||
```
|
||||
|
||||
# dist/pageB.js
|
||||
|
||||
``` javascript
|
||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{
|
||||
/******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // install a JSONP callback for chunk loading
|
||||
/******/ function webpackJsonpCallback(data) {
|
||||
/******/ var chunkIds = data[0];
|
||||
/******/ var moreModules = data[1]
|
||||
/******/ var executeModules = data[2];
|
||||
/******/ // add "moreModules" to the modules object,
|
||||
/******/ // then flag all "chunkIds" as loaded and fire callback
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [];
|
||||
/******/ for(;i < chunkIds.length; i++) {
|
||||
/******/ chunkId = chunkIds[i];
|
||||
/******/ if(installedChunks[chunkId]) {
|
||||
/******/ resolves.push(installedChunks[chunkId][0]);
|
||||
/******/ }
|
||||
/******/ installedChunks[chunkId] = 0;
|
||||
/******/ }
|
||||
/******/ for(moduleId in moreModules) {
|
||||
/******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
|
||||
/******/ modules[moduleId] = moreModules[moduleId];
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ if(parentJsonpFunction) parentJsonpFunction(data);
|
||||
/******/ while(resolves.length) {
|
||||
/******/ resolves.shift()();
|
||||
/******/ }
|
||||
/******/
|
||||
/******/ // add entry modules from loaded chunk to deferred list
|
||||
/******/ deferredModules.push.apply(deferredModules, executeModules || []);
|
||||
/******/
|
||||
/******/ // run deferred modules when all chunks ready
|
||||
/******/ return checkDeferredModules();
|
||||
/******/ };
|
||||
/******/ function checkDeferredModules() {
|
||||
/******/ var result;
|
||||
/******/ for(var i = 0; i < deferredModules.length; i++) {
|
||||
/******/ var deferredModule = deferredModules[i];
|
||||
/******/ var fullfilled = true;
|
||||
/******/ for(var j = 1; j < deferredModule.length; j++) {
|
||||
/******/ var depId = deferredModule[j];
|
||||
/******/ if(installedChunks[depId] !== 0) fullfilled = false;
|
||||
/******/ }
|
||||
/******/ if(fullfilled) {
|
||||
/******/ deferredModules.splice(i--, 1);
|
||||
/******/ result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ return result;
|
||||
/******/ }
|
||||
/******/
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
/******/ // object to store loaded and loading chunks
|
||||
/******/ var installedChunks = {
|
||||
/******/ 1: 0
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ var deferredModules = [];
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
/******/
|
||||
/******/ // Check if module is in cache
|
||||
/******/ if(installedModules[moduleId]) {
|
||||
/******/ return installedModules[moduleId].exports;
|
||||
/******/ }
|
||||
/******/ // Create a new module (and put it into the cache)
|
||||
/******/ var module = installedModules[moduleId] = {
|
||||
/******/ i: moduleId,
|
||||
/******/ l: false,
|
||||
/******/ exports: {}
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Execute the module function
|
||||
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
||||
/******/
|
||||
/******/ // Flag the module as loaded
|
||||
/******/ module.l = true;
|
||||
/******/
|
||||
/******/ // Return the exports of the module
|
||||
/******/ return module.exports;
|
||||
/******/ }
|
||||
/******/
|
||||
/******/
|
||||
/******/ // expose the modules object (__webpack_modules__)
|
||||
/******/ __webpack_require__.m = modules;
|
||||
/******/
|
||||
/******/ // expose the module cache
|
||||
/******/ __webpack_require__.c = installedModules;
|
||||
/******/
|
||||
/******/ // define getter function for harmony exports
|
||||
/******/ __webpack_require__.d = function(exports, name, getter) {
|
||||
/******/ if(!__webpack_require__.o(exports, name)) {
|
||||
/******/ Object.defineProperty(exports, name, {
|
||||
/******/ configurable: false,
|
||||
/******/ enumerable: true,
|
||||
/******/ get: getter
|
||||
/******/ });
|
||||
/******/ }
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // define __esModule on exports
|
||||
/******/ __webpack_require__.r = function(exports) {
|
||||
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
||||
/******/ __webpack_require__.n = function(module) {
|
||||
/******/ var getter = module && module.__esModule ?
|
||||
/******/ function getDefault() { return module['default']; } :
|
||||
/******/ function getModuleExports() { return module; };
|
||||
/******/ __webpack_require__.d(getter, 'a', getter);
|
||||
/******/ return getter;
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Object.prototype.hasOwnProperty.call
|
||||
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
||||
/******/
|
||||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "dist/";
|
||||
/******/
|
||||
/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
|
||||
/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ jsonpArray.push = webpackJsonpCallback;
|
||||
/******/ jsonpArray = jsonpArray.slice();
|
||||
/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
|
||||
/******/ var parentJsonpFunction = oldJsonpFunction;
|
||||
/******/
|
||||
/******/
|
||||
/******/ // add entry module to deferred list
|
||||
/******/ deferredModules.push([4,3,4]);
|
||||
/******/ // run deferred modules when ready
|
||||
/******/ return checkDeferredModules();
|
||||
/******/ })
|
||||
/************************************************************************/
|
||||
/******/ ({
|
||||
|
||||
/***/ 6:
|
||||
/***/ 4:
|
||||
/*!******************!*\
|
||||
!*** ./pageB.js ***!
|
||||
\******************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
var utility2 = __webpack_require__(/*! ./utility2 */ 5);
|
||||
var utility3 = __webpack_require__(/*! ./utility3 */ 7);
|
||||
var vendor2 = __webpack_require__(/*! vendor2 */ 5);
|
||||
var utility2 = __webpack_require__(/*! ./utility2 */ 3);
|
||||
var utility3 = __webpack_require__(/*! ./utility3 */ 6);
|
||||
|
||||
module.exports = "pageB";
|
||||
|
||||
|
||||
/***/ })
|
||||
|
||||
},[[6,0,4,2]]]);
|
||||
/******/ });
|
||||
```
|
||||
|
||||
# dist/pageC.js
|
||||
|
||||
``` javascript
|
||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[3],{
|
||||
/******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // install a JSONP callback for chunk loading
|
||||
/******/ function webpackJsonpCallback(data) {
|
||||
/******/ var chunkIds = data[0];
|
||||
/******/ var moreModules = data[1]
|
||||
/******/ var executeModules = data[2];
|
||||
/******/ // add "moreModules" to the modules object,
|
||||
/******/ // then flag all "chunkIds" as loaded and fire callback
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [];
|
||||
/******/ for(;i < chunkIds.length; i++) {
|
||||
/******/ chunkId = chunkIds[i];
|
||||
/******/ if(installedChunks[chunkId]) {
|
||||
/******/ resolves.push(installedChunks[chunkId][0]);
|
||||
/******/ }
|
||||
/******/ installedChunks[chunkId] = 0;
|
||||
/******/ }
|
||||
/******/ for(moduleId in moreModules) {
|
||||
/******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
|
||||
/******/ modules[moduleId] = moreModules[moduleId];
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ if(parentJsonpFunction) parentJsonpFunction(data);
|
||||
/******/ while(resolves.length) {
|
||||
/******/ resolves.shift()();
|
||||
/******/ }
|
||||
/******/
|
||||
/******/ // add entry modules from loaded chunk to deferred list
|
||||
/******/ deferredModules.push.apply(deferredModules, executeModules || []);
|
||||
/******/
|
||||
/******/ // run deferred modules when all chunks ready
|
||||
/******/ return checkDeferredModules();
|
||||
/******/ };
|
||||
/******/ function checkDeferredModules() {
|
||||
/******/ var result;
|
||||
/******/ for(var i = 0; i < deferredModules.length; i++) {
|
||||
/******/ var deferredModule = deferredModules[i];
|
||||
/******/ var fullfilled = true;
|
||||
/******/ for(var j = 1; j < deferredModule.length; j++) {
|
||||
/******/ var depId = deferredModule[j];
|
||||
/******/ if(installedChunks[depId] !== 0) fullfilled = false;
|
||||
/******/ }
|
||||
/******/ if(fullfilled) {
|
||||
/******/ deferredModules.splice(i--, 1);
|
||||
/******/ result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ return result;
|
||||
/******/ }
|
||||
/******/
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
/******/ // object to store loaded and loading chunks
|
||||
/******/ var installedChunks = {
|
||||
/******/ 2: 0
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ var deferredModules = [];
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
/******/
|
||||
/******/ // Check if module is in cache
|
||||
/******/ if(installedModules[moduleId]) {
|
||||
/******/ return installedModules[moduleId].exports;
|
||||
/******/ }
|
||||
/******/ // Create a new module (and put it into the cache)
|
||||
/******/ var module = installedModules[moduleId] = {
|
||||
/******/ i: moduleId,
|
||||
/******/ l: false,
|
||||
/******/ exports: {}
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Execute the module function
|
||||
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
||||
/******/
|
||||
/******/ // Flag the module as loaded
|
||||
/******/ module.l = true;
|
||||
/******/
|
||||
/******/ // Return the exports of the module
|
||||
/******/ return module.exports;
|
||||
/******/ }
|
||||
/******/
|
||||
/******/
|
||||
/******/ // expose the modules object (__webpack_modules__)
|
||||
/******/ __webpack_require__.m = modules;
|
||||
/******/
|
||||
/******/ // expose the module cache
|
||||
/******/ __webpack_require__.c = installedModules;
|
||||
/******/
|
||||
/******/ // define getter function for harmony exports
|
||||
/******/ __webpack_require__.d = function(exports, name, getter) {
|
||||
/******/ if(!__webpack_require__.o(exports, name)) {
|
||||
/******/ Object.defineProperty(exports, name, {
|
||||
/******/ configurable: false,
|
||||
/******/ enumerable: true,
|
||||
/******/ get: getter
|
||||
/******/ });
|
||||
/******/ }
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // define __esModule on exports
|
||||
/******/ __webpack_require__.r = function(exports) {
|
||||
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
||||
/******/ __webpack_require__.n = function(module) {
|
||||
/******/ var getter = module && module.__esModule ?
|
||||
/******/ function getDefault() { return module['default']; } :
|
||||
/******/ function getModuleExports() { return module; };
|
||||
/******/ __webpack_require__.d(getter, 'a', getter);
|
||||
/******/ return getter;
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Object.prototype.hasOwnProperty.call
|
||||
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
||||
/******/
|
||||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "dist/";
|
||||
/******/
|
||||
/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
|
||||
/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ jsonpArray.push = webpackJsonpCallback;
|
||||
/******/ jsonpArray = jsonpArray.slice();
|
||||
/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
|
||||
/******/ var parentJsonpFunction = oldJsonpFunction;
|
||||
/******/
|
||||
/******/
|
||||
/******/ // add entry module to deferred list
|
||||
/******/ deferredModules.push([7,4]);
|
||||
/******/ // run deferred modules when ready
|
||||
/******/ return checkDeferredModules();
|
||||
/******/ })
|
||||
/************************************************************************/
|
||||
/******/ ({
|
||||
|
||||
/***/ 8:
|
||||
/***/ 7:
|
||||
/*!******************!*\
|
||||
!*** ./pageC.js ***!
|
||||
\******************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
var utility2 = __webpack_require__(/*! ./utility2 */ 5);
|
||||
var utility3 = __webpack_require__(/*! ./utility3 */ 7);
|
||||
var utility2 = __webpack_require__(/*! ./utility2 */ 3);
|
||||
var utility3 = __webpack_require__(/*! ./utility3 */ 6);
|
||||
|
||||
module.exports = "pageC";
|
||||
|
||||
/***/ })
|
||||
|
||||
},[[8,0,4,3]]]);
|
||||
/******/ });
|
||||
```
|
||||
|
||||
# Info
|
||||
|
|
@ -347,45 +623,43 @@ module.exports = "pageC";
|
|||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
vendor.js 5.47 KiB 0 [emitted] vendor
|
||||
pageA.js 627 bytes 1 [emitted] pageA
|
||||
pageB.js 408 bytes 2 [emitted] pageB
|
||||
pageC.js 408 bytes 3 [emitted] pageC
|
||||
pageA.js 5.6 KiB 0 [emitted] pageA
|
||||
pageB.js 5.4 KiB 1 [emitted] pageB
|
||||
pageC.js 5.34 KiB 2 [emitted] pageC
|
||||
vendor.js 536 bytes 3 [emitted] vendor
|
||||
common.js 466 bytes 4 [emitted] common
|
||||
Entrypoint vendor = vendor.js
|
||||
Entrypoint pageA = vendor.js common.js pageA.js
|
||||
Entrypoint pageB = vendor.js common.js pageB.js
|
||||
Entrypoint pageC = vendor.js common.js pageC.js
|
||||
chunk {0} vendor.js (vendor) 94 bytes [entry] [rendered]
|
||||
> vendor [0] multi ./vendor1 ./vendor2
|
||||
[0] multi ./vendor1 ./vendor2 40 bytes {0} [built]
|
||||
multi entry
|
||||
[1] ./vendor1.js 27 bytes {0} [built]
|
||||
single entry ./vendor1 [0] multi ./vendor1 ./vendor2 vendor:100000
|
||||
[2] ./vendor2.js 27 bytes {0} [built]
|
||||
single entry ./vendor2 [0] multi ./vendor1 ./vendor2 vendor:100001
|
||||
chunk {1} pageA.js (pageA) 133 bytes {4} [initial] [rendered]
|
||||
> pageA [3] ./pageA.js
|
||||
[3] ./pageA.js 105 bytes {1} [built]
|
||||
Entrypoint pageC = common.js pageC.js
|
||||
chunk {0} pageA.js (pageA) 170 bytes ={3}= ={4}= [entry] [rendered]
|
||||
> ./pageA pageA
|
||||
[0] ./pageA.js 142 bytes {0} [built]
|
||||
single entry ./pageA pageA
|
||||
[4] ./utility1.js 28 bytes {1} [built]
|
||||
cjs require ./utility1 [3] ./pageA.js 1:15-36
|
||||
chunk {2} pageB.js (pageB) 105 bytes {4} [initial] [rendered]
|
||||
> pageB [6] ./pageB.js
|
||||
[6] ./pageB.js 105 bytes {2} [built]
|
||||
[2] ./utility1.js 28 bytes {0} [built]
|
||||
cjs require ./utility1 [0] ./pageA.js 2:15-36
|
||||
chunk {1} pageB.js (pageB) 142 bytes ={3}= ={4}= [entry] [rendered]
|
||||
> ./pageB pageB
|
||||
[4] ./pageB.js 142 bytes {1} [built]
|
||||
single entry ./pageB pageB
|
||||
chunk {3} pageC.js (pageC) 105 bytes {4} [initial] [rendered]
|
||||
> pageC [8] ./pageC.js
|
||||
[8] ./pageC.js 105 bytes {3} [built]
|
||||
chunk {2} pageC.js (pageC) 105 bytes ={4}= [entry] [rendered]
|
||||
> ./pageC pageC
|
||||
[7] ./pageC.js 105 bytes {2} [built]
|
||||
single entry ./pageC pageC
|
||||
chunk {4} common.js (common) 56 bytes {0} [initial] [rendered]
|
||||
[5] ./utility2.js 28 bytes {4} [built]
|
||||
cjs require ./utility2 [3] ./pageA.js 2:15-36
|
||||
cjs require ./utility2 [6] ./pageB.js 1:15-36
|
||||
cjs require ./utility2 [8] ./pageC.js 1:15-36
|
||||
[7] ./utility3.js 28 bytes {4} [built]
|
||||
cjs require ./utility3 [6] ./pageB.js 2:15-36
|
||||
cjs require ./utility3 [8] ./pageC.js 2:15-36
|
||||
chunk {3} vendor.js (vendor) 54 bytes ={4}= ={0}= ={1}= [initial] [rendered] split chunk (cache group: vendor) (name: vendor)
|
||||
> ./pageA pageA
|
||||
> ./pageB pageB
|
||||
2 modules
|
||||
chunk {4} common.js (common) 56 bytes ={2}= ={3}= ={1}= ={0}= [initial] [rendered] split chunk (name: common)
|
||||
> ./pageC pageC
|
||||
> ./pageB pageB
|
||||
> ./pageA pageA
|
||||
[3] ./utility2.js 28 bytes {4} [built]
|
||||
cjs require ./utility2 [0] ./pageA.js 3:15-36
|
||||
cjs require ./utility2 [4] ./pageB.js 2:15-36
|
||||
cjs require ./utility2 [7] ./pageC.js 1:15-36
|
||||
[6] ./utility3.js 28 bytes {4} [built]
|
||||
cjs require ./utility3 [4] ./pageB.js 3:15-36
|
||||
cjs require ./utility3 [7] ./pageC.js 2:15-36
|
||||
```
|
||||
|
||||
## Production mode
|
||||
|
|
@ -395,42 +669,40 @@ Hash: 0a1b2c3d4e5f6a7b8c9d
|
|||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
common.js 132 bytes 0 [emitted] common
|
||||
pageC.js 119 bytes 1 [emitted] pageC
|
||||
pageB.js 119 bytes 2 [emitted] pageB
|
||||
pageA.js 157 bytes 3 [emitted] pageA
|
||||
vendor.js 1.17 KiB 4 [emitted] vendor
|
||||
Entrypoint vendor = vendor.js
|
||||
vendor.js 134 bytes 1 [emitted] vendor
|
||||
pageC.js 1.1 KiB 2 [emitted] pageC
|
||||
pageB.js 1.11 KiB 3 [emitted] pageB
|
||||
pageA.js 1.15 KiB 4 [emitted] pageA
|
||||
Entrypoint pageA = vendor.js common.js pageA.js
|
||||
Entrypoint pageB = vendor.js common.js pageB.js
|
||||
Entrypoint pageC = vendor.js common.js pageC.js
|
||||
chunk {0} common.js (common) 56 bytes {4} [initial] [rendered]
|
||||
Entrypoint pageC = common.js pageC.js
|
||||
chunk {0} common.js (common) 56 bytes ={2}= ={1}= ={3}= ={4}= [initial] [rendered] split chunk (name: common)
|
||||
> ./pageC pageC
|
||||
> ./pageB pageB
|
||||
> ./pageA pageA
|
||||
[0] ./utility2.js 28 bytes {0} [built]
|
||||
cjs require ./utility2 [2] ./pageC.js 1:15-36
|
||||
cjs require ./utility2 [3] ./pageB.js 1:15-36
|
||||
cjs require ./utility2 [5] ./pageA.js 2:15-36
|
||||
cjs require ./utility2 [4] ./pageB.js 2:15-36
|
||||
cjs require ./utility2 [7] ./pageA.js 3:15-36
|
||||
[1] ./utility3.js 28 bytes {0} [built]
|
||||
cjs require ./utility3 [2] ./pageC.js 2:15-36
|
||||
cjs require ./utility3 [3] ./pageB.js 2:15-36
|
||||
chunk {1} pageC.js (pageC) 105 bytes {0} [initial] [rendered]
|
||||
> pageC [2] ./pageC.js
|
||||
[2] ./pageC.js 105 bytes {1} [built]
|
||||
cjs require ./utility3 [4] ./pageB.js 3:15-36
|
||||
chunk {1} vendor.js (vendor) 54 bytes ={0}= ={4}= ={3}= [initial] [rendered] split chunk (cache group: vendor) (name: vendor)
|
||||
> ./pageA pageA
|
||||
> ./pageB pageB
|
||||
2 modules
|
||||
chunk {2} pageC.js (pageC) 105 bytes ={0}= [entry] [rendered]
|
||||
> ./pageC pageC
|
||||
[2] ./pageC.js 105 bytes {2} [built]
|
||||
single entry ./pageC pageC
|
||||
chunk {2} pageB.js (pageB) 105 bytes {0} [initial] [rendered]
|
||||
> pageB [3] ./pageB.js
|
||||
[3] ./pageB.js 105 bytes {2} [built]
|
||||
chunk {3} pageB.js (pageB) 142 bytes ={1}= ={0}= [entry] [rendered]
|
||||
> ./pageB pageB
|
||||
[4] ./pageB.js 142 bytes {3} [built]
|
||||
single entry ./pageB pageB
|
||||
chunk {3} pageA.js (pageA) 133 bytes {0} [initial] [rendered]
|
||||
> pageA [5] ./pageA.js
|
||||
[4] ./utility1.js 28 bytes {3} [built]
|
||||
cjs require ./utility1 [5] ./pageA.js 1:15-36
|
||||
[5] ./pageA.js 105 bytes {3} [built]
|
||||
chunk {4} pageA.js (pageA) 170 bytes ={1}= ={0}= [entry] [rendered]
|
||||
> ./pageA pageA
|
||||
[5] ./utility1.js 28 bytes {4} [built]
|
||||
cjs require ./utility1 [7] ./pageA.js 2:15-36
|
||||
[7] ./pageA.js 142 bytes {4} [built]
|
||||
single entry ./pageA pageA
|
||||
chunk {4} vendor.js (vendor) 94 bytes [entry] [rendered]
|
||||
> vendor [8] multi ./vendor1 ./vendor2
|
||||
[6] ./vendor2.js 27 bytes {4} [built]
|
||||
single entry ./vendor2 [8] multi ./vendor1 ./vendor2 vendor:100001
|
||||
[7] ./vendor1.js 27 bytes {4} [built]
|
||||
single entry ./vendor1 [8] multi ./vendor1 ./vendor2 vendor:100000
|
||||
[8] multi ./vendor1 ./vendor2 40 bytes {4} [built]
|
||||
multi entry
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
var vendor1 = require('vendor1');
|
||||
var utility1 = require('./utility1');
|
||||
var utility2 = require('./utility2');
|
||||
|
||||
module.exports = "pageA";
|
||||
module.exports = "pageA";
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
var vendor2 = require('vendor2');
|
||||
var utility2 = require('./utility2');
|
||||
var utility3 = require('./utility3');
|
||||
|
||||
module.exports = "pageB";
|
||||
module.exports = "pageB";
|
||||
|
|
|
|||
|
|
@ -1,25 +1,28 @@
|
|||
var path = require("path");
|
||||
var CommonsChunkPlugin = require("../../lib/optimize/CommonsChunkPlugin");
|
||||
|
||||
module.exports = {
|
||||
// mode: "development" || "production",
|
||||
entry: {
|
||||
vendor: ["./vendor1", "./vendor2"],
|
||||
pageA: "./pageA",
|
||||
pageB: "./pageB",
|
||||
pageC: "./pageC"
|
||||
// older versions of webpack may require an empty entry point declaration here
|
||||
// common: []
|
||||
},
|
||||
optimization: {
|
||||
splitChunks: {
|
||||
chunks: "initial",
|
||||
minSize: 0, // This is example is too small to create commons chunks
|
||||
name: "common",
|
||||
cacheGroups: {
|
||||
vendor: {
|
||||
test: /node_modules/,
|
||||
name: "vendor",
|
||||
enforce: true
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
output: {
|
||||
path: path.join(__dirname, "dist"),
|
||||
filename: "[name].js"
|
||||
},
|
||||
plugins: [
|
||||
new CommonsChunkPlugin({
|
||||
// The order of this array matters
|
||||
names: ["common", "vendor"],
|
||||
minChunks: 2
|
||||
})
|
||||
]
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,19 +4,20 @@ This example illustrates how common modules from deep ancestors of an entry poin
|
|||
* `pageC` and `pageA` both require the `reusableComponent`
|
||||
* `pageB` dynamically requires `PageC`
|
||||
|
||||
You can see that webpack outputs four files/chunks:
|
||||
You can see that webpack outputs five files/chunks:
|
||||
|
||||
* `output.js` is the entry chunk and contains
|
||||
* the module system
|
||||
* chunk loading logic
|
||||
* the entry point `example.js`
|
||||
* module `reusableComponent`
|
||||
* `0.output.js` is an additional chunk
|
||||
* module `pageC`
|
||||
* module `reusableComponent`
|
||||
* `1.output.js` is an additional chunk
|
||||
* module `pageB`
|
||||
* `2.output.js` is an additional chunk
|
||||
* module `pageA`
|
||||
* `3.output.js` is an additional chunk
|
||||
* module `pageC`
|
||||
|
||||
|
||||
# example.js
|
||||
|
|
@ -83,54 +84,24 @@ module.exports = function() {
|
|||
|
||||
``` javascript
|
||||
"use strict";
|
||||
const webpack = require("../../");
|
||||
const path = require("path");
|
||||
|
||||
module.exports = [
|
||||
{
|
||||
// mode: "development || "production",
|
||||
entry: {
|
||||
main: ["./example.js"]
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, "dist"),
|
||||
filename: "output.js"
|
||||
},
|
||||
plugins: [
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
name: "main",
|
||||
minChunks: 2,
|
||||
children: true,
|
||||
deepChildren: true,
|
||||
})
|
||||
],
|
||||
optimization: {
|
||||
occurrenceOrder: true // To keep filename consistent between different modes (for example building only)
|
||||
}
|
||||
module.exports = {
|
||||
// mode: "development || "production",
|
||||
entry: {
|
||||
main: ["./example.js"]
|
||||
},
|
||||
{
|
||||
// mode: "development || "production",
|
||||
entry: {
|
||||
main: ["./example.js"]
|
||||
optimization: {
|
||||
splitChunks: {
|
||||
minSize: 0 // This example is too small, in pratice you can use the defaults
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, "dist"),
|
||||
filename: "asyncoutput.js"
|
||||
},
|
||||
plugins: [
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
name: "main",
|
||||
minChunks: 2,
|
||||
async: true,
|
||||
children: true,
|
||||
deepChildren: true,
|
||||
})
|
||||
],
|
||||
optimization: {
|
||||
occurrenceOrder: true // To keep filename consistent between different modes (for example building only)
|
||||
}
|
||||
occurrenceOrder: true // To keep filename consistent between different modes (for example building only)
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, "dist"),
|
||||
filename: "output.js"
|
||||
}
|
||||
];
|
||||
};
|
||||
```
|
||||
|
||||
# dist/output.js
|
||||
|
|
@ -141,10 +112,12 @@ module.exports = [
|
|||
/******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // install a JSONP callback for chunk loading
|
||||
/******/ function webpackJsonpCallback(data) {
|
||||
/******/ var chunkIds = data[0], moreModules = data[1], executeModules = data[2];
|
||||
/******/ var chunkIds = data[0];
|
||||
/******/ var moreModules = data[1]
|
||||
/******/
|
||||
/******/ // add "moreModules" to the modules object,
|
||||
/******/ // then flag all "chunkIds" as loaded and fire callback
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [], result;
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [];
|
||||
/******/ for(;i < chunkIds.length; i++) {
|
||||
/******/ chunkId = chunkIds[i];
|
||||
/******/ if(installedChunks[chunkId]) {
|
||||
|
|
@ -164,15 +137,16 @@ module.exports = [
|
|||
/******/
|
||||
/******/ };
|
||||
/******/
|
||||
/******/
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
/******/ // object to store loaded and loading chunks
|
||||
/******/ var installedChunks = {
|
||||
/******/ 3: 0
|
||||
/******/ 4: 0
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ var scheduledModules = [];
|
||||
/******/
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
|
|
@ -298,10 +272,12 @@ module.exports = [
|
|||
/******/ __webpack_require__.oe = function(err) { console.error(err); throw err; };
|
||||
/******/
|
||||
/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
|
||||
/******/ var parentJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ jsonpArray.push = webpackJsonpCallback;
|
||||
/******/ jsonpArray = jsonpArray.slice();
|
||||
/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
|
||||
/******/ var parentJsonpFunction = oldJsonpFunction;
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 1);
|
||||
|
|
@ -320,305 +296,6 @@ module.exports = [
|
|||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
var main = function() {
|
||||
console.log("Main class");
|
||||
__webpack_require__.e(/*! require.ensure */ 2).then((() => {
|
||||
const page = __webpack_require__(/*! ./pageA */ 4);
|
||||
page();
|
||||
}).bind(null, __webpack_require__)).catch(__webpack_require__.oe);
|
||||
__webpack_require__.e(/*! require.ensure */ 1).then((() => {
|
||||
const page = __webpack_require__(/*! ./pageB */ 3);
|
||||
page();
|
||||
}).bind(null, __webpack_require__)).catch(__webpack_require__.oe);
|
||||
};
|
||||
|
||||
main();
|
||||
|
||||
|
||||
/***/ }),
|
||||
/* 1 */
|
||||
/*!**************************!*\
|
||||
!*** multi ./example.js ***!
|
||||
\**************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
module.exports = __webpack_require__(/*! ./example.js */0);
|
||||
|
||||
|
||||
/***/ }),
|
||||
/* 2 */
|
||||
/*!******************************!*\
|
||||
!*** ./reusableComponent.js ***!
|
||||
\******************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports = function() {
|
||||
console.log("reusable Component");
|
||||
};
|
||||
|
||||
|
||||
/***/ })
|
||||
/******/ ]);
|
||||
```
|
||||
|
||||
# dist/0.output.js
|
||||
|
||||
``` javascript
|
||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],{
|
||||
|
||||
/***/ 5:
|
||||
/*!******************!*\
|
||||
!*** ./pageC.js ***!
|
||||
\******************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
var reusableComponent = __webpack_require__(/*! ./reusableComponent */ 2);
|
||||
|
||||
module.exports = function() {
|
||||
console.log("Page C");
|
||||
reusableComponent();
|
||||
};
|
||||
|
||||
|
||||
/***/ })
|
||||
|
||||
}]);
|
||||
```
|
||||
|
||||
# dist/1.output.js
|
||||
|
||||
``` javascript
|
||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],{
|
||||
|
||||
/***/ 3:
|
||||
/*!******************!*\
|
||||
!*** ./pageB.js ***!
|
||||
\******************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
module.exports = function() {
|
||||
console.log("Page B");
|
||||
__webpack_require__.e(/*! require.ensure */ 0).then((()=>{
|
||||
const page = __webpack_require__(/*! ./pageC */ 5);
|
||||
page();
|
||||
}).bind(null, __webpack_require__)).catch(__webpack_require__.oe);
|
||||
};
|
||||
|
||||
|
||||
/***/ })
|
||||
|
||||
}]);
|
||||
```
|
||||
|
||||
# dist/2.output.js
|
||||
|
||||
``` javascript
|
||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{
|
||||
|
||||
/***/ 4:
|
||||
/*!******************!*\
|
||||
!*** ./pageA.js ***!
|
||||
\******************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
var reusableComponent = __webpack_require__(/*! ./reusableComponent */ 2);
|
||||
|
||||
module.exports = function() {
|
||||
console.log("Page A");
|
||||
reusableComponent();
|
||||
};
|
||||
|
||||
|
||||
/***/ })
|
||||
|
||||
}]);
|
||||
```
|
||||
|
||||
# dist/asyncoutput.js
|
||||
|
||||
``` javascript
|
||||
/******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // install a JSONP callback for chunk loading
|
||||
/******/ function webpackJsonpCallback(data) {
|
||||
/******/ var chunkIds = data[0], moreModules = data[1], executeModules = data[2];
|
||||
/******/ // add "moreModules" to the modules object,
|
||||
/******/ // then flag all "chunkIds" as loaded and fire callback
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [], result;
|
||||
/******/ for(;i < chunkIds.length; i++) {
|
||||
/******/ chunkId = chunkIds[i];
|
||||
/******/ if(installedChunks[chunkId]) {
|
||||
/******/ resolves.push(installedChunks[chunkId][0]);
|
||||
/******/ }
|
||||
/******/ installedChunks[chunkId] = 0;
|
||||
/******/ }
|
||||
/******/ for(moduleId in moreModules) {
|
||||
/******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
|
||||
/******/ modules[moduleId] = moreModules[moduleId];
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ if(parentJsonpFunction) parentJsonpFunction(data);
|
||||
/******/ while(resolves.length) {
|
||||
/******/ resolves.shift()();
|
||||
/******/ }
|
||||
/******/
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
/******/ // object to store loaded and loading chunks
|
||||
/******/ var installedChunks = {
|
||||
/******/ 4: 0
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ var scheduledModules = [];
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
/******/
|
||||
/******/ // Check if module is in cache
|
||||
/******/ if(installedModules[moduleId]) {
|
||||
/******/ return installedModules[moduleId].exports;
|
||||
/******/ }
|
||||
/******/ // Create a new module (and put it into the cache)
|
||||
/******/ var module = installedModules[moduleId] = {
|
||||
/******/ i: moduleId,
|
||||
/******/ l: false,
|
||||
/******/ exports: {}
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Execute the module function
|
||||
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
||||
/******/
|
||||
/******/ // Flag the module as loaded
|
||||
/******/ module.l = true;
|
||||
/******/
|
||||
/******/ // Return the exports of the module
|
||||
/******/ return module.exports;
|
||||
/******/ }
|
||||
/******/
|
||||
/******/ // This file contains only the entry chunk.
|
||||
/******/ // The chunk loading function for additional chunks
|
||||
/******/ __webpack_require__.e = function requireEnsure(chunkId) {
|
||||
/******/ var promises = [];
|
||||
/******/
|
||||
/******/
|
||||
/******/ // JSONP chunk loading for javascript
|
||||
/******/
|
||||
/******/ var installedChunkData = installedChunks[chunkId];
|
||||
/******/ if(installedChunkData !== 0) { // 0 means "already installed".
|
||||
/******/
|
||||
/******/ // a Promise means "currently loading".
|
||||
/******/ if(installedChunkData) {
|
||||
/******/ promises.push(installedChunkData[2]);
|
||||
/******/ } else {
|
||||
/******/ // setup Promise in chunk cache
|
||||
/******/ var promise = new Promise(function(resolve, reject) {
|
||||
/******/ installedChunkData = installedChunks[chunkId] = [resolve, reject];
|
||||
/******/ });
|
||||
/******/ promises.push(installedChunkData[2] = promise);
|
||||
/******/
|
||||
/******/ // start chunk loading
|
||||
/******/ var head = document.getElementsByTagName('head')[0];
|
||||
/******/ var script = document.createElement('script');
|
||||
/******/
|
||||
/******/ script.charset = 'utf-8';
|
||||
/******/ script.timeout = 120000;
|
||||
/******/
|
||||
/******/ if (__webpack_require__.nc) {
|
||||
/******/ script.setAttribute("nonce", __webpack_require__.nc);
|
||||
/******/ }
|
||||
/******/ script.src = __webpack_require__.p + "" + chunkId + ".asyncoutput.js";
|
||||
/******/ var timeout = setTimeout(function(){
|
||||
/******/ onScriptComplete({ type: 'timeout', target: script });
|
||||
/******/ }, 120000);
|
||||
/******/ script.onerror = script.onload = onScriptComplete;
|
||||
/******/ function onScriptComplete(event) {
|
||||
/******/ // avoid mem leaks in IE.
|
||||
/******/ script.onerror = script.onload = null;
|
||||
/******/ clearTimeout(timeout);
|
||||
/******/ var chunk = installedChunks[chunkId];
|
||||
/******/ if(chunk !== 0) {
|
||||
/******/ if(chunk) {
|
||||
/******/ var errorType = event && (event.type === 'load' ? 'missing' : event.type);
|
||||
/******/ var realSrc = event && event.target && event.target.src;
|
||||
/******/ var error = new Error('Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')');
|
||||
/******/ error.type = errorType;
|
||||
/******/ error.request = realSrc;
|
||||
/******/ chunk[1](error);
|
||||
/******/ }
|
||||
/******/ installedChunks[chunkId] = undefined;
|
||||
/******/ }
|
||||
/******/ };
|
||||
/******/ head.appendChild(script);
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ return Promise.all(promises);
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // expose the modules object (__webpack_modules__)
|
||||
/******/ __webpack_require__.m = modules;
|
||||
/******/
|
||||
/******/ // expose the module cache
|
||||
/******/ __webpack_require__.c = installedModules;
|
||||
/******/
|
||||
/******/ // define getter function for harmony exports
|
||||
/******/ __webpack_require__.d = function(exports, name, getter) {
|
||||
/******/ if(!__webpack_require__.o(exports, name)) {
|
||||
/******/ Object.defineProperty(exports, name, {
|
||||
/******/ configurable: false,
|
||||
/******/ enumerable: true,
|
||||
/******/ get: getter
|
||||
/******/ });
|
||||
/******/ }
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // define __esModule on exports
|
||||
/******/ __webpack_require__.r = function(exports) {
|
||||
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
||||
/******/ __webpack_require__.n = function(module) {
|
||||
/******/ var getter = module && module.__esModule ?
|
||||
/******/ function getDefault() { return module['default']; } :
|
||||
/******/ function getModuleExports() { return module; };
|
||||
/******/ __webpack_require__.d(getter, 'a', getter);
|
||||
/******/ return getter;
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Object.prototype.hasOwnProperty.call
|
||||
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
||||
/******/
|
||||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "dist/";
|
||||
/******/
|
||||
/******/ // on error function for async loading
|
||||
/******/ __webpack_require__.oe = function(err) { console.error(err); throw err; };
|
||||
/******/
|
||||
/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
|
||||
/******/ var parentJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ jsonpArray.push = webpackJsonpCallback;
|
||||
/******/ jsonpArray = jsonpArray.slice();
|
||||
/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 1);
|
||||
/******/ })
|
||||
/************************************************************************/
|
||||
/******/ ([
|
||||
/* 0 */
|
||||
/*!********************!*\
|
||||
!*** ./example.js ***!
|
||||
\********************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
var main = function() {
|
||||
console.log("Main class");
|
||||
Promise.all(/*! require.ensure */[__webpack_require__.e(0), __webpack_require__.e(2)]).then((() => {
|
||||
|
|
@ -649,7 +326,7 @@ module.exports = __webpack_require__(/*! ./example.js */0);
|
|||
/******/ ]);
|
||||
```
|
||||
|
||||
# dist/0.asyncoutput.js
|
||||
# dist/0.output.js
|
||||
|
||||
``` javascript
|
||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],{
|
||||
|
|
@ -671,7 +348,7 @@ module.exports = function() {
|
|||
}]);
|
||||
```
|
||||
|
||||
# dist/1.asyncoutput.js
|
||||
# dist/1.output.js
|
||||
|
||||
``` javascript
|
||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],{
|
||||
|
|
@ -697,7 +374,7 @@ module.exports = function() {
|
|||
}]);
|
||||
```
|
||||
|
||||
# dist/2.asyncoutput.js
|
||||
# dist/2.output.js
|
||||
|
||||
``` javascript
|
||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{
|
||||
|
|
@ -722,7 +399,7 @@ module.exports = function() {
|
|||
}]);
|
||||
```
|
||||
|
||||
# dist/3.asyncoutput.js
|
||||
# dist/3.output.js
|
||||
|
||||
``` javascript
|
||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[3],{
|
||||
|
|
@ -754,68 +431,37 @@ module.exports = function() {
|
|||
```
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Child
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Asset Size Chunks Chunk Names
|
||||
0.output.js 414 bytes 0 [emitted]
|
||||
1.output.js 509 bytes 1 [emitted]
|
||||
2.output.js 414 bytes 2 [emitted]
|
||||
output.js 7.72 KiB 3 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} 0.output.js 142 bytes {3} [rendered]
|
||||
> [3] ./pageB.js 3:1-6:3
|
||||
[5] ./pageC.js 142 bytes {0} [built]
|
||||
cjs require ./pageC [3] ./pageB.js 4:15-33
|
||||
chunk {1} 1.output.js 140 bytes {3} [rendered]
|
||||
> [0] ./example.js 7:1-10:3
|
||||
[3] ./pageB.js 140 bytes {1} [built]
|
||||
cjs require ./pageB [0] ./example.js 8:15-33
|
||||
chunk {2} 2.output.js 142 bytes {3} [rendered]
|
||||
> [0] ./example.js 3:1-6:3
|
||||
[4] ./pageA.js 142 bytes {2} [built]
|
||||
cjs require ./pageA [0] ./example.js 4:15-33
|
||||
chunk {3} output.js (main) 333 bytes [entry] [rendered]
|
||||
> main [1] multi ./example.js
|
||||
[0] ./example.js 233 bytes {3} [built]
|
||||
single entry ./example.js [1] multi ./example.js main:100000
|
||||
[1] multi ./example.js 28 bytes {3} [built]
|
||||
multi entry
|
||||
[2] ./reusableComponent.js 72 bytes {3} [built]
|
||||
cjs require ./reusableComponent [4] ./pageA.js 1:24-54
|
||||
cjs require ./reusableComponent [5] ./pageC.js 1:24-54
|
||||
Child
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Asset Size Chunks Chunk Names
|
||||
0.asyncoutput.js 340 bytes 0 [emitted]
|
||||
1.asyncoutput.js 549 bytes 1 [emitted]
|
||||
2.asyncoutput.js 414 bytes 2 [emitted]
|
||||
3.asyncoutput.js 414 bytes 3 [emitted]
|
||||
asyncoutput.js 7.5 KiB 4 [emitted] main
|
||||
Entrypoint main = asyncoutput.js
|
||||
chunk {0} 0.asyncoutput.js 72 bytes {4} [rendered]
|
||||
> async commons [0] ./example.js 3:1-6:3
|
||||
> async commons [2] ./pageB.js 3:1-6:3
|
||||
[4] ./reusableComponent.js 72 bytes {0} [built]
|
||||
cjs require ./reusableComponent [3] ./pageA.js 1:24-54
|
||||
cjs require ./reusableComponent [5] ./pageC.js 1:24-54
|
||||
chunk {1} 1.asyncoutput.js 140 bytes {4} [rendered]
|
||||
> [0] ./example.js 7:1-10:3
|
||||
[2] ./pageB.js 140 bytes {1} [built]
|
||||
cjs require ./pageB [0] ./example.js 8:15-33
|
||||
chunk {2} 2.asyncoutput.js 142 bytes {4} [rendered]
|
||||
> [0] ./example.js 3:1-6:3
|
||||
[3] ./pageA.js 142 bytes {2} [built]
|
||||
cjs require ./pageA [0] ./example.js 4:15-33
|
||||
chunk {3} 3.asyncoutput.js 142 bytes {1} [rendered]
|
||||
> [2] ./pageB.js 3:1-6:3
|
||||
[5] ./pageC.js 142 bytes {3} [built]
|
||||
cjs require ./pageC [2] ./pageB.js 4:15-33
|
||||
chunk {4} asyncoutput.js (main) 261 bytes [entry] [rendered]
|
||||
> main [1] multi ./example.js
|
||||
[0] ./example.js 233 bytes {4} [built]
|
||||
single entry ./example.js [1] multi ./example.js main:100000
|
||||
[1] multi ./example.js 28 bytes {4} [built]
|
||||
multi entry
|
||||
Asset Size Chunks Chunk Names
|
||||
0.output.js 340 bytes 0 [emitted]
|
||||
1.output.js 549 bytes 1 [emitted]
|
||||
2.output.js 414 bytes 2 [emitted]
|
||||
3.output.js 414 bytes 3 [emitted]
|
||||
output.js 7.53 KiB 4 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} 0.output.js 72 bytes <{1}> <{4}> ={3}= ={2}= [rendered] split chunk
|
||||
> [2] ./pageB.js 3:1-6:3
|
||||
> [0] ./example.js 3:1-6:3
|
||||
[4] ./reusableComponent.js 72 bytes {0} [built]
|
||||
cjs require ./reusableComponent [3] ./pageA.js 1:24-54
|
||||
cjs require ./reusableComponent [5] ./pageC.js 1:24-54
|
||||
chunk {1} 1.output.js 140 bytes <{4}> >{0}< >{3}< [rendered]
|
||||
> [0] ./example.js 7:1-10:3
|
||||
[2] ./pageB.js 140 bytes {1} [built]
|
||||
cjs require ./pageB [0] ./example.js 8:15-33
|
||||
chunk {2} 2.output.js 142 bytes <{4}> ={0}= [rendered]
|
||||
> [0] ./example.js 3:1-6:3
|
||||
[3] ./pageA.js 142 bytes {2} [built]
|
||||
cjs require ./pageA [0] ./example.js 4:15-33
|
||||
chunk {3} 3.output.js 142 bytes <{1}> ={0}= [rendered]
|
||||
> [2] ./pageB.js 3:1-6:3
|
||||
[5] ./pageC.js 142 bytes {3} [built]
|
||||
cjs require ./pageC [2] ./pageB.js 4:15-33
|
||||
chunk {4} output.js (main) 261 bytes >{0}< >{2}< >{1}< [entry] [rendered]
|
||||
> main
|
||||
[0] ./example.js 233 bytes {4} [built]
|
||||
single entry ./example.js [1] multi ./example.js main:100000
|
||||
[1] multi ./example.js 28 bytes {4} [built]
|
||||
multi entry
|
||||
```
|
||||
|
||||
## Production mode
|
||||
|
|
@ -823,66 +469,35 @@ Child
|
|||
```
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Child
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Asset Size Chunks Chunk Names
|
||||
0.output.js 138 bytes 0 [emitted]
|
||||
1.output.js 176 bytes 1 [emitted]
|
||||
2.output.js 138 bytes 2 [emitted]
|
||||
output.js 1.81 KiB 3 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} 0.output.js 142 bytes {3} [rendered]
|
||||
> [3] ./pageB.js 3:1-6:3
|
||||
[5] ./pageC.js 142 bytes {0} [built]
|
||||
cjs require ./pageC [3] ./pageB.js 4:15-33
|
||||
chunk {1} 1.output.js 140 bytes {3} [rendered]
|
||||
> [0] ./example.js 7:1-10:3
|
||||
[3] ./pageB.js 140 bytes {1} [built]
|
||||
cjs require ./pageB [0] ./example.js 8:15-33
|
||||
chunk {2} 2.output.js 142 bytes {3} [rendered]
|
||||
> [0] ./example.js 3:1-6:3
|
||||
[4] ./pageA.js 142 bytes {2} [built]
|
||||
cjs require ./pageA [0] ./example.js 4:15-33
|
||||
chunk {3} output.js (main) 333 bytes [entry] [rendered]
|
||||
> main [1] multi ./example.js
|
||||
[0] ./example.js 233 bytes {3} [built]
|
||||
single entry ./example.js [1] multi ./example.js main:100000
|
||||
[1] multi ./example.js 28 bytes {3} [built]
|
||||
multi entry
|
||||
[2] ./reusableComponent.js 72 bytes {3} [built]
|
||||
cjs require ./reusableComponent [4] ./pageA.js 1:24-54
|
||||
cjs require ./reusableComponent [5] ./pageC.js 1:24-54
|
||||
Child
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Asset Size Chunks Chunk Names
|
||||
0.asyncoutput.js 133 bytes 0 [emitted]
|
||||
1.asyncoutput.js 198 bytes 1 [emitted]
|
||||
2.asyncoutput.js 138 bytes 2 [emitted]
|
||||
3.asyncoutput.js 138 bytes 3 [emitted]
|
||||
asyncoutput.js 1.76 KiB 4 [emitted] main
|
||||
Entrypoint main = asyncoutput.js
|
||||
chunk {0} 0.asyncoutput.js 72 bytes {4} [rendered]
|
||||
> async commons [0] ./example.js 3:1-6:3
|
||||
> async commons [2] ./pageB.js 3:1-6:3
|
||||
[4] ./reusableComponent.js 72 bytes {0} [built]
|
||||
cjs require ./reusableComponent [3] ./pageA.js 1:24-54
|
||||
cjs require ./reusableComponent [5] ./pageC.js 1:24-54
|
||||
chunk {1} 1.asyncoutput.js 140 bytes {4} [rendered]
|
||||
> [0] ./example.js 7:1-10:3
|
||||
[2] ./pageB.js 140 bytes {1} [built]
|
||||
cjs require ./pageB [0] ./example.js 8:15-33
|
||||
chunk {2} 2.asyncoutput.js 142 bytes {4} [rendered]
|
||||
> [0] ./example.js 3:1-6:3
|
||||
[3] ./pageA.js 142 bytes {2} [built]
|
||||
cjs require ./pageA [0] ./example.js 4:15-33
|
||||
chunk {3} 3.asyncoutput.js 142 bytes {1} [rendered]
|
||||
> [2] ./pageB.js 3:1-6:3
|
||||
[5] ./pageC.js 142 bytes {3} [built]
|
||||
cjs require ./pageC [2] ./pageB.js 4:15-33
|
||||
chunk {4} asyncoutput.js (main) 261 bytes [entry] [rendered]
|
||||
> main [1] multi ./example.js
|
||||
[0] ./example.js 233 bytes {4} [built]
|
||||
single entry ./example.js [1] multi ./example.js main:100000
|
||||
[1] multi ./example.js 28 bytes {4} [built]
|
||||
multi entry
|
||||
Asset Size Chunks Chunk Names
|
||||
0.output.js 133 bytes 0 [emitted]
|
||||
1.output.js 198 bytes 1 [emitted]
|
||||
2.output.js 138 bytes 2 [emitted]
|
||||
3.output.js 138 bytes 3 [emitted]
|
||||
output.js 1.76 KiB 4 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} 0.output.js 72 bytes <{1}> <{4}> ={3}= ={2}= [rendered] split chunk
|
||||
> [2] ./pageB.js 3:1-6:3
|
||||
> [0] ./example.js 3:1-6:3
|
||||
[4] ./reusableComponent.js 72 bytes {0} [built]
|
||||
cjs require ./reusableComponent [3] ./pageA.js 1:24-54
|
||||
cjs require ./reusableComponent [5] ./pageC.js 1:24-54
|
||||
chunk {1} 1.output.js 140 bytes <{4}> >{0}< >{3}< [rendered]
|
||||
> [0] ./example.js 7:1-10:3
|
||||
[2] ./pageB.js 140 bytes {1} [built]
|
||||
cjs require ./pageB [0] ./example.js 8:15-33
|
||||
chunk {2} 2.output.js 142 bytes <{4}> ={0}= [rendered]
|
||||
> [0] ./example.js 3:1-6:3
|
||||
[3] ./pageA.js 142 bytes {2} [built]
|
||||
cjs require ./pageA [0] ./example.js 4:15-33
|
||||
chunk {3} 3.output.js 142 bytes <{1}> ={0}= [rendered]
|
||||
> [2] ./pageB.js 3:1-6:3
|
||||
[5] ./pageC.js 142 bytes {3} [built]
|
||||
cjs require ./pageC [2] ./pageB.js 4:15-33
|
||||
chunk {4} output.js (main) 261 bytes >{0}< >{2}< >{1}< [entry] [rendered]
|
||||
> main
|
||||
[0] ./example.js 233 bytes {4} [built]
|
||||
single entry ./example.js [1] multi ./example.js main:100000
|
||||
[1] multi ./example.js 28 bytes {4} [built]
|
||||
multi entry
|
||||
```
|
||||
|
|
|
|||
|
|
@ -4,19 +4,20 @@ This example illustrates how common modules from deep ancestors of an entry poin
|
|||
* `pageC` and `pageA` both require the `reusableComponent`
|
||||
* `pageB` dynamically requires `PageC`
|
||||
|
||||
You can see that webpack outputs four files/chunks:
|
||||
You can see that webpack outputs five files/chunks:
|
||||
|
||||
* `output.js` is the entry chunk and contains
|
||||
* the module system
|
||||
* chunk loading logic
|
||||
* the entry point `example.js`
|
||||
* module `reusableComponent`
|
||||
* `0.output.js` is an additional chunk
|
||||
* module `pageC`
|
||||
* module `reusableComponent`
|
||||
* `1.output.js` is an additional chunk
|
||||
* module `pageB`
|
||||
* `2.output.js` is an additional chunk
|
||||
* module `pageA`
|
||||
* `3.output.js` is an additional chunk
|
||||
* module `pageC`
|
||||
|
||||
|
||||
# example.js
|
||||
|
|
@ -79,34 +80,10 @@ You can see that webpack outputs four files/chunks:
|
|||
{{dist/2.output.js}}
|
||||
```
|
||||
|
||||
# dist/asyncoutput.js
|
||||
# dist/3.output.js
|
||||
|
||||
``` javascript
|
||||
{{dist/asyncoutput.js}}
|
||||
```
|
||||
|
||||
# dist/0.asyncoutput.js
|
||||
|
||||
``` javascript
|
||||
{{dist/0.asyncoutput.js}}
|
||||
```
|
||||
|
||||
# dist/1.asyncoutput.js
|
||||
|
||||
``` javascript
|
||||
{{dist/1.asyncoutput.js}}
|
||||
```
|
||||
|
||||
# dist/2.asyncoutput.js
|
||||
|
||||
``` javascript
|
||||
{{dist/2.asyncoutput.js}}
|
||||
```
|
||||
|
||||
# dist/3.asyncoutput.js
|
||||
|
||||
``` javascript
|
||||
{{dist/3.asyncoutput.js}}
|
||||
{{dist/3.output.js}}
|
||||
```
|
||||
|
||||
# Info
|
||||
|
|
|
|||
|
|
@ -1,49 +1,19 @@
|
|||
"use strict";
|
||||
const webpack = require("../../");
|
||||
const path = require("path");
|
||||
|
||||
module.exports = [
|
||||
{
|
||||
// mode: "development || "production",
|
||||
entry: {
|
||||
main: ["./example.js"]
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, "dist"),
|
||||
filename: "output.js"
|
||||
},
|
||||
plugins: [
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
name: "main",
|
||||
minChunks: 2,
|
||||
children: true,
|
||||
deepChildren: true,
|
||||
})
|
||||
],
|
||||
optimization: {
|
||||
occurrenceOrder: true // To keep filename consistent between different modes (for example building only)
|
||||
}
|
||||
module.exports = {
|
||||
// mode: "development || "production",
|
||||
entry: {
|
||||
main: ["./example.js"]
|
||||
},
|
||||
{
|
||||
// mode: "development || "production",
|
||||
entry: {
|
||||
main: ["./example.js"]
|
||||
optimization: {
|
||||
splitChunks: {
|
||||
minSize: 0 // This example is too small, in pratice you can use the defaults
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, "dist"),
|
||||
filename: "asyncoutput.js"
|
||||
},
|
||||
plugins: [
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
name: "main",
|
||||
minChunks: 2,
|
||||
async: true,
|
||||
children: true,
|
||||
deepChildren: true,
|
||||
})
|
||||
],
|
||||
optimization: {
|
||||
occurrenceOrder: true // To keep filename consistent between different modes (for example building only)
|
||||
}
|
||||
occurrenceOrder: true // To keep filename consistent between different modes (for example building only)
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, "dist"),
|
||||
filename: "output.js"
|
||||
}
|
||||
];
|
||||
};
|
||||
|
|
|
|||
|
|
@ -106,6 +106,7 @@ exports.add = function() {
|
|||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "dist/";
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 0);
|
||||
/******/ })
|
||||
|
|
@ -168,10 +169,10 @@ exports.add = function() {
|
|||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
output.js 3.43 KiB 0 [emitted] main
|
||||
output.js 3.44 KiB 0 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} output.js (main) 329 bytes [entry] [rendered]
|
||||
> main [0] ./example.js
|
||||
> .\example.js main
|
||||
[0] ./example.js 69 bytes {0} [built]
|
||||
single entry .\example.js main
|
||||
[1] ./increment.js 98 bytes {0} [built]
|
||||
|
|
@ -189,7 +190,7 @@ Version: webpack next
|
|||
output.js 740 bytes 0 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} output.js (main) 329 bytes [entry] [rendered]
|
||||
> main [2] ./example.js
|
||||
> .\example.js main
|
||||
[0] ./math.js 162 bytes {0} [built]
|
||||
cjs require ./math [1] ./increment.js 1:10-27
|
||||
[1] ./increment.js 98 bytes {0} [built]
|
||||
|
|
|
|||
|
|
@ -1,217 +0,0 @@
|
|||
|
||||
# example.js
|
||||
|
||||
``` javascript
|
||||
require("./style.css");
|
||||
```
|
||||
|
||||
# style.css
|
||||
|
||||
``` css
|
||||
body {
|
||||
background: url(image.png);
|
||||
}
|
||||
```
|
||||
|
||||
# webpack.config.js
|
||||
|
||||
``` javascript
|
||||
const LoaderOptionsPlugin = require("../../lib/LoaderOptionsPlugin");
|
||||
const ExtractTextPlugin = require("extract-text-webpack-plugin");
|
||||
module.exports = {
|
||||
// mode: "development" || "production",
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
use: "css-loader"
|
||||
})
|
||||
},
|
||||
{ test: /\.png$/, loader: "file-loader" }
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new ExtractTextPlugin({
|
||||
filename: "style.css",
|
||||
allChunks: true
|
||||
}),
|
||||
// Temporary workaround for the file-loader
|
||||
new LoaderOptionsPlugin({
|
||||
options: {}
|
||||
})
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
# dist/output.js
|
||||
|
||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||
|
||||
``` javascript
|
||||
/******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
/******/
|
||||
/******/ // Check if module is in cache
|
||||
/******/ if(installedModules[moduleId]) {
|
||||
/******/ return installedModules[moduleId].exports;
|
||||
/******/ }
|
||||
/******/ // Create a new module (and put it into the cache)
|
||||
/******/ var module = installedModules[moduleId] = {
|
||||
/******/ i: moduleId,
|
||||
/******/ l: false,
|
||||
/******/ exports: {}
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Execute the module function
|
||||
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
||||
/******/
|
||||
/******/ // Flag the module as loaded
|
||||
/******/ module.l = true;
|
||||
/******/
|
||||
/******/ // Return the exports of the module
|
||||
/******/ return module.exports;
|
||||
/******/ }
|
||||
/******/
|
||||
/******/
|
||||
/******/ // expose the modules object (__webpack_modules__)
|
||||
/******/ __webpack_require__.m = modules;
|
||||
/******/
|
||||
/******/ // expose the module cache
|
||||
/******/ __webpack_require__.c = installedModules;
|
||||
/******/
|
||||
/******/ // define getter function for harmony exports
|
||||
/******/ __webpack_require__.d = function(exports, name, getter) {
|
||||
/******/ if(!__webpack_require__.o(exports, name)) {
|
||||
/******/ Object.defineProperty(exports, name, {
|
||||
/******/ configurable: false,
|
||||
/******/ enumerable: true,
|
||||
/******/ get: getter
|
||||
/******/ });
|
||||
/******/ }
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // define __esModule on exports
|
||||
/******/ __webpack_require__.r = function(exports) {
|
||||
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
||||
/******/ __webpack_require__.n = function(module) {
|
||||
/******/ var getter = module && module.__esModule ?
|
||||
/******/ function getDefault() { return module['default']; } :
|
||||
/******/ function getModuleExports() { return module; };
|
||||
/******/ __webpack_require__.d(getter, 'a', getter);
|
||||
/******/ return getter;
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Object.prototype.hasOwnProperty.call
|
||||
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
||||
/******/
|
||||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "dist/";
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 0);
|
||||
/******/ })
|
||||
/************************************************************************/
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
``` javascript
|
||||
/******/ ([
|
||||
/* 0 */
|
||||
/*!********************!*\
|
||||
!*** ./example.js ***!
|
||||
\********************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
__webpack_require__(/*! ./style.css */ 1);
|
||||
|
||||
/***/ }),
|
||||
/* 1 */
|
||||
/*!*******************!*\
|
||||
!*** ./style.css ***!
|
||||
\*******************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
// removed by extract-text-webpack-plugin
|
||||
|
||||
/***/ })
|
||||
/******/ ]);
|
||||
```
|
||||
|
||||
# dist/style.css
|
||||
|
||||
``` css
|
||||
body {
|
||||
background: url(dist/ce21cbdd9b894e6af794813eb3fdaf60.png);
|
||||
}
|
||||
```
|
||||
|
||||
# Info
|
||||
|
||||
## Unoptimized
|
||||
|
||||
```
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
ce21cbdd9b894e6af794813eb3fdaf60.png 119 bytes [emitted]
|
||||
output.js 2.97 KiB 0 [emitted] main
|
||||
style.css 71 bytes 0 [emitted] main
|
||||
Entrypoint main = output.js style.css
|
||||
chunk {0} output.js, style.css (main) 64 bytes [entry] [rendered]
|
||||
> main [0] ./example.js
|
||||
[0] ./example.js 23 bytes {0} [built]
|
||||
single entry .\example.js main
|
||||
[1] ./style.css 41 bytes {0} [built]
|
||||
cjs require ./style.css [0] ./example.js 1:0-22
|
||||
Child extract-text-webpack-plugin ../../node_modules/extract-text-webpack-plugin/dist ../../node_modules/css-loader/index.js!style.css:
|
||||
Asset Size Chunks Chunk Names
|
||||
ce21cbdd9b894e6af794813eb3fdaf60.png 119 bytes [emitted]
|
||||
Entrypoint undefined = extract-text-webpack-plugin-output-filename
|
||||
chunk {0} extract-text-webpack-plugin-output-filename 2.51 KiB [entry] [rendered]
|
||||
> [0] (webpack)/node_modules/css-loader!./style.css
|
||||
[0] (webpack)/node_modules/css-loader!./style.css 231 bytes {0} [built]
|
||||
single entry !!(webpack)\node_modules\css-loader\index.js!.\style.css
|
||||
[2] ./image.png 82 bytes {0} [built]
|
||||
cjs require ./image.png [0] (webpack)/node_modules/css-loader!./style.css 6:58-80
|
||||
+ 1 hidden module
|
||||
```
|
||||
|
||||
## Production mode
|
||||
|
||||
```
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
ce21cbdd9b894e6af794813eb3fdaf60.png 119 bytes [emitted]
|
||||
output.js 572 bytes 0 [emitted] main
|
||||
style.css 71 bytes 0 [emitted] main
|
||||
Entrypoint main = output.js style.css
|
||||
chunk {0} output.js, style.css (main) 64 bytes [entry] [rendered]
|
||||
> main [1] ./example.js
|
||||
[0] ./style.css 41 bytes {0} [built]
|
||||
cjs require ./style.css [1] ./example.js 1:0-22
|
||||
[1] ./example.js 23 bytes {0} [built]
|
||||
single entry .\example.js main
|
||||
Child extract-text-webpack-plugin ../../node_modules/extract-text-webpack-plugin/dist ../../node_modules/css-loader/index.js!style.css:
|
||||
Asset Size Chunks Chunk Names
|
||||
ce21cbdd9b894e6af794813eb3fdaf60.png 119 bytes [emitted]
|
||||
Entrypoint undefined = extract-text-webpack-plugin-output-filename
|
||||
chunk {0} extract-text-webpack-plugin-output-filename 2.51 KiB [entry] [rendered]
|
||||
> [2] (webpack)/node_modules/css-loader!./style.css
|
||||
[0] ./image.png 82 bytes {0} [built]
|
||||
cjs require ./image.png [2] (webpack)/node_modules/css-loader!./style.css 6:58-80
|
||||
[2] (webpack)/node_modules/css-loader!./style.css 231 bytes {0} [built]
|
||||
single entry !!(webpack)\node_modules\css-loader\index.js!.\style.css
|
||||
+ 1 hidden module
|
||||
```
|
||||
|
|
@ -1 +0,0 @@
|
|||
require("../build-common");
|
||||
|
|
@ -1 +0,0 @@
|
|||
require("./style.css");
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 119 B |
|
|
@ -1,3 +0,0 @@
|
|||
body {
|
||||
background: url(image.png);
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
|
||||
# example.js
|
||||
|
||||
``` javascript
|
||||
{{example.js}}
|
||||
```
|
||||
|
||||
# style.css
|
||||
|
||||
``` css
|
||||
{{style.css}}
|
||||
```
|
||||
|
||||
# webpack.config.js
|
||||
|
||||
``` javascript
|
||||
{{webpack.config.js}}
|
||||
```
|
||||
|
||||
# dist/output.js
|
||||
|
||||
``` javascript
|
||||
{{dist/output.js}}
|
||||
```
|
||||
|
||||
# dist/style.css
|
||||
|
||||
``` css
|
||||
{{dist/style.css}}
|
||||
```
|
||||
|
||||
# Info
|
||||
|
||||
## Unoptimized
|
||||
|
||||
```
|
||||
{{stdout}}
|
||||
```
|
||||
|
||||
## Production mode
|
||||
|
||||
```
|
||||
{{production:stdout}}
|
||||
```
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
const LoaderOptionsPlugin = require("../../lib/LoaderOptionsPlugin");
|
||||
const ExtractTextPlugin = require("extract-text-webpack-plugin");
|
||||
module.exports = {
|
||||
// mode: "development" || "production",
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
use: "css-loader"
|
||||
})
|
||||
},
|
||||
{ test: /\.png$/, loader: "file-loader" }
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new ExtractTextPlugin({
|
||||
filename: "style.css",
|
||||
allChunks: true
|
||||
}),
|
||||
// Temporary workaround for the file-loader
|
||||
new LoaderOptionsPlugin({
|
||||
options: {}
|
||||
})
|
||||
]
|
||||
};
|
||||
|
|
@ -41,7 +41,7 @@ export function square(n) {
|
|||
# dist/vendor.js
|
||||
|
||||
``` javascript
|
||||
var vendor_lib_3312d7a9aacfa149e455 =
|
||||
var vendor_lib_9ee2f174307b7ef21301 =
|
||||
```
|
||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||
|
||||
|
|
@ -112,6 +112,7 @@ var vendor_lib_3312d7a9aacfa149e455 =
|
|||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "dist/";
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 0);
|
||||
/******/ })
|
||||
|
|
@ -156,7 +157,7 @@ function square(n) {
|
|||
# dist/vendor-manifest.json
|
||||
|
||||
``` javascript
|
||||
{"name":"vendor_lib_3312d7a9aacfa149e455","content":{"../node_modules/example-vendor.js":{"id":1,"buildMeta":{"exportsType":"namespace","providedExports":["square"]}}}}
|
||||
{"name":"vendor_lib_9ee2f174307b7ef21301","content":{"../node_modules/example-vendor.js":{"id":1,"buildMeta":{"exportsType":"namespace","providedExports":["square"]}}}}
|
||||
```
|
||||
|
||||
# Info
|
||||
|
|
@ -167,10 +168,10 @@ function square(n) {
|
|||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
vendor.js 3.31 KiB 0 [emitted] main
|
||||
vendor.js 3.32 KiB 0 [emitted] main
|
||||
Entrypoint main = vendor.js
|
||||
chunk {0} vendor.js (main) 60 bytes [entry] [rendered]
|
||||
> main [0] dll main
|
||||
> main
|
||||
[0] dll main 12 bytes {0} [built]
|
||||
dll entry
|
||||
|
||||
|
|
@ -186,7 +187,7 @@ Version: webpack next
|
|||
vendor.js 704 bytes 0 [emitted] main
|
||||
Entrypoint main = vendor.js
|
||||
chunk {0} vendor.js (main) 60 bytes [entry] [rendered]
|
||||
> main [1] dll main
|
||||
> main
|
||||
[1] dll main 12 bytes {0} [built]
|
||||
dll entry
|
||||
|
||||
|
|
|
|||
|
|
@ -117,6 +117,7 @@ console.log(new square(7));
|
|||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "dist/";
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 0);
|
||||
/******/ })
|
||||
|
|
@ -146,22 +147,22 @@ console.log(new example_vendor__WEBPACK_IMPORTED_MODULE_0__["square"](7));
|
|||
/***/ }),
|
||||
/* 1 */
|
||||
/*!******************************************************************************************************!*\
|
||||
!*** delegated ../node_modules/example-vendor.js from dll-reference vendor_lib_3312d7a9aacfa149e455 ***!
|
||||
!*** delegated ../node_modules/example-vendor.js from dll-reference vendor_lib_9ee2f174307b7ef21301 ***!
|
||||
\******************************************************************************************************/
|
||||
/*! exports provided: square */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
module.exports = (__webpack_require__(/*! dll-reference vendor_lib_3312d7a9aacfa149e455 */ 2))(1);
|
||||
module.exports = (__webpack_require__(/*! dll-reference vendor_lib_9ee2f174307b7ef21301 */ 2))(1);
|
||||
|
||||
/***/ }),
|
||||
/* 2 */
|
||||
/*!**************************************************!*\
|
||||
!*** external "vendor_lib_3312d7a9aacfa149e455" ***!
|
||||
!*** external "vendor_lib_9ee2f174307b7ef21301" ***!
|
||||
\**************************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports = vendor_lib_3312d7a9aacfa149e455;
|
||||
module.exports = vendor_lib_9ee2f174307b7ef21301;
|
||||
|
||||
/***/ })
|
||||
/******/ ]);
|
||||
|
|
@ -174,21 +175,21 @@ module.exports = vendor_lib_3312d7a9aacfa149e455;
|
|||
```
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
app.js 3.89 KiB 0 [emitted] main
|
||||
Asset Size Chunks Chunk Names
|
||||
app.js 3.9 KiB 0 [emitted] main
|
||||
Entrypoint main = app.js
|
||||
chunk {0} app.js (main) 182 bytes [entry] [rendered]
|
||||
> main [0] ./example-app.js
|
||||
> ./example-app main
|
||||
[0] ./example-app.js 98 bytes {0} [built]
|
||||
[no exports]
|
||||
single entry ./example-app main
|
||||
[1] delegated ../node_modules/example-vendor.js from dll-reference vendor_lib_3312d7a9aacfa149e455 42 bytes {0} [built]
|
||||
[1] delegated ../node_modules/example-vendor.js from dll-reference vendor_lib_9ee2f174307b7ef21301 42 bytes {0} [built]
|
||||
[exports: square]
|
||||
harmony side effect evaluation example-vendor [0] ./example-app.js 1:0-40
|
||||
harmony import specifier example-vendor [0] ./example-app.js 3:12-18
|
||||
harmony import specifier example-vendor [0] ./example-app.js 4:16-22
|
||||
[2] external "vendor_lib_3312d7a9aacfa149e455" 42 bytes {0} [built]
|
||||
delegated source dll-reference vendor_lib_3312d7a9aacfa149e455 [1] delegated ../node_modules/example-vendor.js from dll-reference vendor_lib_3312d7a9aacfa149e455
|
||||
[2] external "vendor_lib_9ee2f174307b7ef21301" 42 bytes {0} [built]
|
||||
delegated source dll-reference vendor_lib_9ee2f174307b7ef21301 [1] delegated ../node_modules/example-vendor.js from dll-reference vendor_lib_9ee2f174307b7ef21301
|
||||
```
|
||||
|
||||
## Production mode
|
||||
|
|
@ -200,14 +201,14 @@ Version: webpack next
|
|||
app.js 736 bytes 0 [emitted] main
|
||||
Entrypoint main = app.js
|
||||
chunk {0} app.js (main) 182 bytes [entry] [rendered]
|
||||
> main [2] ./example-app.js
|
||||
[0] delegated ../node_modules/example-vendor.js from dll-reference vendor_lib_3312d7a9aacfa149e455 42 bytes {0} [built]
|
||||
> ./example-app main
|
||||
[0] delegated ../node_modules/example-vendor.js from dll-reference vendor_lib_9ee2f174307b7ef21301 42 bytes {0} [built]
|
||||
[exports: square]
|
||||
harmony side effect evaluation example-vendor [2] ./example-app.js 1:0-40
|
||||
harmony import specifier example-vendor [2] ./example-app.js 3:12-18
|
||||
harmony import specifier example-vendor [2] ./example-app.js 4:16-22
|
||||
[1] external "vendor_lib_3312d7a9aacfa149e455" 42 bytes {0} [built]
|
||||
delegated source dll-reference vendor_lib_3312d7a9aacfa149e455 [0] delegated ../node_modules/example-vendor.js from dll-reference vendor_lib_3312d7a9aacfa149e455
|
||||
[1] external "vendor_lib_9ee2f174307b7ef21301" 42 bytes {0} [built]
|
||||
delegated source dll-reference vendor_lib_9ee2f174307b7ef21301 [0] delegated ../node_modules/example-vendor.js from dll-reference vendor_lib_9ee2f174307b7ef21301
|
||||
[2] ./example-app.js 98 bytes {0} [built]
|
||||
[no exports]
|
||||
single entry ./example-app main
|
||||
|
|
|
|||
|
|
@ -109,6 +109,7 @@ console.log(require("module"));
|
|||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "dist/";
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 0);
|
||||
/******/ })
|
||||
|
|
@ -139,82 +140,82 @@ console.log(__webpack_require__(/*! module */ 8));
|
|||
/***/ }),
|
||||
/* 1 */
|
||||
/*!**************************************************************************!*\
|
||||
!*** delegated ./alpha.js from dll-reference alpha_100e8e712194d1301cec ***!
|
||||
!*** delegated ./alpha.js from dll-reference alpha_e92bad326fecff628fb8 ***!
|
||||
\**************************************************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
module.exports = (__webpack_require__(/*! dll-reference alpha_100e8e712194d1301cec */ 2))(1);
|
||||
module.exports = (__webpack_require__(/*! dll-reference alpha_e92bad326fecff628fb8 */ 2))(1);
|
||||
|
||||
/***/ }),
|
||||
/* 2 */
|
||||
/*!*********************************************!*\
|
||||
!*** external "alpha_100e8e712194d1301cec" ***!
|
||||
!*** external "alpha_e92bad326fecff628fb8" ***!
|
||||
\*********************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports = alpha_100e8e712194d1301cec;
|
||||
module.exports = alpha_e92bad326fecff628fb8;
|
||||
|
||||
/***/ }),
|
||||
/* 3 */
|
||||
/*!**********************************************************************!*\
|
||||
!*** delegated ./a.js from dll-reference alpha_100e8e712194d1301cec ***!
|
||||
!*** delegated ./a.js from dll-reference alpha_e92bad326fecff628fb8 ***!
|
||||
\**********************************************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
module.exports = (__webpack_require__(/*! dll-reference alpha_100e8e712194d1301cec */ 2))(2);
|
||||
module.exports = (__webpack_require__(/*! dll-reference alpha_e92bad326fecff628fb8 */ 2))(2);
|
||||
|
||||
/***/ }),
|
||||
/* 4 */
|
||||
/*!************************************************************************!*\
|
||||
!*** delegated ./beta.js from dll-reference beta_100e8e712194d1301cec ***!
|
||||
!*** delegated ./beta.js from dll-reference beta_e92bad326fecff628fb8 ***!
|
||||
\************************************************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
module.exports = (__webpack_require__(/*! dll-reference beta_100e8e712194d1301cec */ 5))(5);
|
||||
module.exports = (__webpack_require__(/*! dll-reference beta_e92bad326fecff628fb8 */ 5))(5);
|
||||
|
||||
/***/ }),
|
||||
/* 5 */
|
||||
/*!********************************************!*\
|
||||
!*** external "beta_100e8e712194d1301cec" ***!
|
||||
!*** external "beta_e92bad326fecff628fb8" ***!
|
||||
\********************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports = beta_100e8e712194d1301cec;
|
||||
module.exports = beta_e92bad326fecff628fb8;
|
||||
|
||||
/***/ }),
|
||||
/* 6 */
|
||||
/*!*********************************************************************!*\
|
||||
!*** delegated ./b.js from dll-reference beta_100e8e712194d1301cec ***!
|
||||
!*** delegated ./b.js from dll-reference beta_e92bad326fecff628fb8 ***!
|
||||
\*********************************************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
module.exports = (__webpack_require__(/*! dll-reference beta_100e8e712194d1301cec */ 5))(6);
|
||||
module.exports = (__webpack_require__(/*! dll-reference beta_e92bad326fecff628fb8 */ 5))(6);
|
||||
|
||||
/***/ }),
|
||||
/* 7 */
|
||||
/*!**********************************************************************!*\
|
||||
!*** delegated ./c.jsx from dll-reference beta_100e8e712194d1301cec ***!
|
||||
!*** delegated ./c.jsx from dll-reference beta_e92bad326fecff628fb8 ***!
|
||||
\**********************************************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
module.exports = (__webpack_require__(/*! dll-reference beta_100e8e712194d1301cec */ 5))(7);
|
||||
module.exports = (__webpack_require__(/*! dll-reference beta_e92bad326fecff628fb8 */ 5))(7);
|
||||
|
||||
/***/ }),
|
||||
/* 8 */
|
||||
/*!*****************************************************************************************!*\
|
||||
!*** delegated ../node_modules/module.js from dll-reference alpha_100e8e712194d1301cec ***!
|
||||
!*** delegated ../node_modules/module.js from dll-reference alpha_e92bad326fecff628fb8 ***!
|
||||
\*****************************************************************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
module.exports = (__webpack_require__(/*! dll-reference alpha_100e8e712194d1301cec */ 2))(3);
|
||||
module.exports = (__webpack_require__(/*! dll-reference alpha_e92bad326fecff628fb8 */ 2))(3);
|
||||
|
||||
/***/ })
|
||||
/******/ ]);
|
||||
|
|
@ -228,31 +229,31 @@ module.exports = (__webpack_require__(/*! dll-reference alpha_100e8e712194d1301c
|
|||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
output.js 6.18 KiB 0 [emitted] main
|
||||
output.js 6.19 KiB 0 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} output.js (main) 549 bytes [entry] [rendered]
|
||||
> main [0] ./example.js
|
||||
> .\example.js main
|
||||
[0] ./example.js 213 bytes {0} [built]
|
||||
single entry .\example.js main
|
||||
[1] delegated ./alpha.js from dll-reference alpha_100e8e712194d1301cec 42 bytes {0} [built]
|
||||
[1] delegated ./alpha.js from dll-reference alpha_e92bad326fecff628fb8 42 bytes {0} [built]
|
||||
cjs require ../dll/alpha [0] ./example.js 1:12-35
|
||||
[2] external "alpha_100e8e712194d1301cec" 42 bytes {0} [built]
|
||||
delegated source dll-reference alpha_100e8e712194d1301cec [1] delegated ./alpha.js from dll-reference alpha_100e8e712194d1301cec
|
||||
delegated source dll-reference alpha_100e8e712194d1301cec [3] delegated ./a.js from dll-reference alpha_100e8e712194d1301cec
|
||||
delegated source dll-reference alpha_100e8e712194d1301cec [8] delegated ../node_modules/module.js from dll-reference alpha_100e8e712194d1301cec
|
||||
[3] delegated ./a.js from dll-reference alpha_100e8e712194d1301cec 42 bytes {0} [built]
|
||||
[2] external "alpha_e92bad326fecff628fb8" 42 bytes {0} [built]
|
||||
delegated source dll-reference alpha_e92bad326fecff628fb8 [1] delegated ./alpha.js from dll-reference alpha_e92bad326fecff628fb8
|
||||
delegated source dll-reference alpha_e92bad326fecff628fb8 [3] delegated ./a.js from dll-reference alpha_e92bad326fecff628fb8
|
||||
delegated source dll-reference alpha_e92bad326fecff628fb8 [8] delegated ../node_modules/module.js from dll-reference alpha_e92bad326fecff628fb8
|
||||
[3] delegated ./a.js from dll-reference alpha_e92bad326fecff628fb8 42 bytes {0} [built]
|
||||
cjs require ../dll/a [0] ./example.js 2:12-31
|
||||
[4] delegated ./beta.js from dll-reference beta_100e8e712194d1301cec 42 bytes {0} [built]
|
||||
[4] delegated ./beta.js from dll-reference beta_e92bad326fecff628fb8 42 bytes {0} [built]
|
||||
cjs require beta/beta [0] ./example.js 4:12-32
|
||||
[5] external "beta_100e8e712194d1301cec" 42 bytes {0} [built]
|
||||
delegated source dll-reference beta_100e8e712194d1301cec [4] delegated ./beta.js from dll-reference beta_100e8e712194d1301cec
|
||||
delegated source dll-reference beta_100e8e712194d1301cec [6] delegated ./b.js from dll-reference beta_100e8e712194d1301cec
|
||||
delegated source dll-reference beta_100e8e712194d1301cec [7] delegated ./c.jsx from dll-reference beta_100e8e712194d1301cec
|
||||
[6] delegated ./b.js from dll-reference beta_100e8e712194d1301cec 42 bytes {0} [built]
|
||||
[5] external "beta_e92bad326fecff628fb8" 42 bytes {0} [built]
|
||||
delegated source dll-reference beta_e92bad326fecff628fb8 [4] delegated ./beta.js from dll-reference beta_e92bad326fecff628fb8
|
||||
delegated source dll-reference beta_e92bad326fecff628fb8 [6] delegated ./b.js from dll-reference beta_e92bad326fecff628fb8
|
||||
delegated source dll-reference beta_e92bad326fecff628fb8 [7] delegated ./c.jsx from dll-reference beta_e92bad326fecff628fb8
|
||||
[6] delegated ./b.js from dll-reference beta_e92bad326fecff628fb8 42 bytes {0} [built]
|
||||
cjs require beta/b [0] ./example.js 5:12-29
|
||||
[7] delegated ./c.jsx from dll-reference beta_100e8e712194d1301cec 42 bytes {0} [built]
|
||||
[7] delegated ./c.jsx from dll-reference beta_e92bad326fecff628fb8 42 bytes {0} [built]
|
||||
cjs require beta/c [0] ./example.js 6:12-29
|
||||
[8] delegated ../node_modules/module.js from dll-reference alpha_100e8e712194d1301cec 42 bytes {0} [built]
|
||||
[8] delegated ../node_modules/module.js from dll-reference alpha_e92bad326fecff628fb8 42 bytes {0} [built]
|
||||
cjs require module [0] ./example.js 8:12-29
|
||||
```
|
||||
|
||||
|
|
@ -265,26 +266,26 @@ Version: webpack next
|
|||
output.js 972 bytes 0 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} output.js (main) 549 bytes [entry] [rendered]
|
||||
> main [8] ./example.js
|
||||
[0] external "beta_100e8e712194d1301cec" 42 bytes {0} [built]
|
||||
delegated source dll-reference beta_100e8e712194d1301cec [3] delegated ./c.jsx from dll-reference beta_100e8e712194d1301cec
|
||||
delegated source dll-reference beta_100e8e712194d1301cec [4] delegated ./b.js from dll-reference beta_100e8e712194d1301cec
|
||||
delegated source dll-reference beta_100e8e712194d1301cec [5] delegated ./beta.js from dll-reference beta_100e8e712194d1301cec
|
||||
[1] external "alpha_100e8e712194d1301cec" 42 bytes {0} [built]
|
||||
delegated source dll-reference alpha_100e8e712194d1301cec [2] delegated ../node_modules/module.js from dll-reference alpha_100e8e712194d1301cec
|
||||
delegated source dll-reference alpha_100e8e712194d1301cec [6] delegated ./a.js from dll-reference alpha_100e8e712194d1301cec
|
||||
delegated source dll-reference alpha_100e8e712194d1301cec [7] delegated ./alpha.js from dll-reference alpha_100e8e712194d1301cec
|
||||
[2] delegated ../node_modules/module.js from dll-reference alpha_100e8e712194d1301cec 42 bytes {0} [built]
|
||||
> .\example.js main
|
||||
[0] external "beta_e92bad326fecff628fb8" 42 bytes {0} [built]
|
||||
delegated source dll-reference beta_e92bad326fecff628fb8 [3] delegated ./c.jsx from dll-reference beta_e92bad326fecff628fb8
|
||||
delegated source dll-reference beta_e92bad326fecff628fb8 [4] delegated ./b.js from dll-reference beta_e92bad326fecff628fb8
|
||||
delegated source dll-reference beta_e92bad326fecff628fb8 [5] delegated ./beta.js from dll-reference beta_e92bad326fecff628fb8
|
||||
[1] external "alpha_e92bad326fecff628fb8" 42 bytes {0} [built]
|
||||
delegated source dll-reference alpha_e92bad326fecff628fb8 [2] delegated ../node_modules/module.js from dll-reference alpha_e92bad326fecff628fb8
|
||||
delegated source dll-reference alpha_e92bad326fecff628fb8 [6] delegated ./a.js from dll-reference alpha_e92bad326fecff628fb8
|
||||
delegated source dll-reference alpha_e92bad326fecff628fb8 [7] delegated ./alpha.js from dll-reference alpha_e92bad326fecff628fb8
|
||||
[2] delegated ../node_modules/module.js from dll-reference alpha_e92bad326fecff628fb8 42 bytes {0} [built]
|
||||
cjs require module [8] ./example.js 8:12-29
|
||||
[3] delegated ./c.jsx from dll-reference beta_100e8e712194d1301cec 42 bytes {0} [built]
|
||||
[3] delegated ./c.jsx from dll-reference beta_e92bad326fecff628fb8 42 bytes {0} [built]
|
||||
cjs require beta/c [8] ./example.js 6:12-29
|
||||
[4] delegated ./b.js from dll-reference beta_100e8e712194d1301cec 42 bytes {0} [built]
|
||||
[4] delegated ./b.js from dll-reference beta_e92bad326fecff628fb8 42 bytes {0} [built]
|
||||
cjs require beta/b [8] ./example.js 5:12-29
|
||||
[5] delegated ./beta.js from dll-reference beta_100e8e712194d1301cec 42 bytes {0} [built]
|
||||
[5] delegated ./beta.js from dll-reference beta_e92bad326fecff628fb8 42 bytes {0} [built]
|
||||
cjs require beta/beta [8] ./example.js 4:12-32
|
||||
[6] delegated ./a.js from dll-reference alpha_100e8e712194d1301cec 42 bytes {0} [built]
|
||||
[6] delegated ./a.js from dll-reference alpha_e92bad326fecff628fb8 42 bytes {0} [built]
|
||||
cjs require ../dll/a [8] ./example.js 2:12-31
|
||||
[7] delegated ./alpha.js from dll-reference alpha_100e8e712194d1301cec 42 bytes {0} [built]
|
||||
[7] delegated ./alpha.js from dll-reference alpha_e92bad326fecff628fb8 42 bytes {0} [built]
|
||||
cjs require ../dll/alpha [8] ./example.js 1:12-35
|
||||
[8] ./example.js 213 bytes {0} [built]
|
||||
single entry .\example.js main
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ module.exports = {
|
|||
# dist/MyDll.alpha.js
|
||||
|
||||
``` javascript
|
||||
var alpha_100e8e712194d1301cec =
|
||||
var alpha_e92bad326fecff628fb8 =
|
||||
```
|
||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||
|
||||
|
|
@ -107,6 +107,7 @@ var alpha_100e8e712194d1301cec =
|
|||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "dist/";
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 0);
|
||||
/******/ })
|
||||
|
|
@ -167,7 +168,7 @@ module.exports = "module";
|
|||
# dist/alpha-manifest.json
|
||||
|
||||
``` javascript
|
||||
{"name":"alpha_100e8e712194d1301cec","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_e92bad326fecff628fb8","content":{"./alpha.js":{"id":1,"buildMeta":{"providedExports":true}},"./a.js":{"id":2,"buildMeta":{"providedExports":true}},"../node_modules/module.js":{"id":3,"buildMeta":{"providedExports":true}}}}
|
||||
```
|
||||
|
||||
# Info
|
||||
|
|
@ -178,12 +179,12 @@ module.exports = "module";
|
|||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
MyDll.alpha.js 3.45 KiB 0 [emitted] alpha
|
||||
MyDll.beta.js 3.42 KiB 1 [emitted] beta
|
||||
MyDll.alpha.js 3.46 KiB 0 [emitted] alpha
|
||||
MyDll.beta.js 3.43 KiB 1 [emitted] beta
|
||||
Entrypoint alpha = MyDll.alpha.js
|
||||
Entrypoint beta = MyDll.beta.js
|
||||
chunk {0} MyDll.alpha.js (alpha) 84 bytes [entry] [rendered]
|
||||
> alpha [0] dll alpha
|
||||
> alpha
|
||||
[0] dll alpha 12 bytes {0} [built]
|
||||
dll entry
|
||||
|
||||
|
|
@ -195,7 +196,7 @@ chunk {0} MyDll.alpha.js (alpha) 84 bytes [entry] [rendered]
|
|||
single entry ./a [0] dll alpha alpha:1
|
||||
+ 1 hidden module
|
||||
chunk {1} MyDll.beta.js (beta) 80 bytes [entry] [rendered]
|
||||
> beta [4] dll beta
|
||||
> beta
|
||||
[4] dll beta 12 bytes {1} [built]
|
||||
dll entry
|
||||
|
||||
|
|
@ -221,7 +222,7 @@ MyDll.alpha.js 700 bytes 1 [emitted] alpha
|
|||
Entrypoint alpha = MyDll.alpha.js
|
||||
Entrypoint beta = MyDll.beta.js
|
||||
chunk {0} MyDll.beta.js (beta) 80 bytes [entry] [rendered]
|
||||
> beta [3] dll beta
|
||||
> beta
|
||||
[0] ./c.jsx 23 bytes {0} [built]
|
||||
|
||||
single entry ./c [3] dll beta beta:2
|
||||
|
|
@ -235,7 +236,7 @@ chunk {0} MyDll.beta.js (beta) 80 bytes [entry] [rendered]
|
|||
dll entry
|
||||
|
||||
chunk {1} MyDll.alpha.js (alpha) 84 bytes [entry] [rendered]
|
||||
> alpha [7] dll alpha
|
||||
> alpha
|
||||
[5] ./a.js 21 bytes {1} [built]
|
||||
|
||||
single entry ./a [7] dll alpha alpha:1
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ module.exports = [
|
|||
# dist/vendor.js
|
||||
|
||||
``` javascript
|
||||
var vendor_44a43fa9f51c57e4a162 =
|
||||
var vendor_36000db9190edee14765 =
|
||||
```
|
||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||
|
||||
|
|
@ -116,6 +116,7 @@ var vendor_44a43fa9f51c57e4a162 =
|
|||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "dist/";
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 0);
|
||||
/******/ })
|
||||
|
|
@ -231,6 +232,7 @@ module.exports = "Vendor2";
|
|||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "dist/";
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 0);
|
||||
/******/ })
|
||||
|
|
@ -249,22 +251,22 @@ module.exports = "pageA";
|
|||
/***/ }),
|
||||
/* 1 */
|
||||
/*!****************************************************************************!*\
|
||||
!*** delegated ./vendor.js from dll-reference vendor_44a43fa9f51c57e4a162 ***!
|
||||
!*** delegated ./vendor.js from dll-reference vendor_36000db9190edee14765 ***!
|
||||
\****************************************************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
module.exports = (__webpack_require__(/*! dll-reference vendor_44a43fa9f51c57e4a162 */ 2))(1);
|
||||
module.exports = (__webpack_require__(/*! dll-reference vendor_36000db9190edee14765 */ 2))(1);
|
||||
|
||||
/***/ }),
|
||||
/* 2 */
|
||||
/*!**********************************************!*\
|
||||
!*** external "vendor_44a43fa9f51c57e4a162" ***!
|
||||
!*** external "vendor_36000db9190edee14765" ***!
|
||||
\**********************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports = vendor_44a43fa9f51c57e4a162;
|
||||
module.exports = vendor_36000db9190edee14765;
|
||||
|
||||
/***/ })
|
||||
/******/ ]);
|
||||
|
|
@ -280,10 +282,10 @@ Version: webpack next
|
|||
Child vendor:
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Asset Size Chunks Chunk Names
|
||||
vendor.js 3.23 KiB 0 [emitted] main
|
||||
vendor.js 3.24 KiB 0 [emitted] main
|
||||
Entrypoint main = vendor.js
|
||||
chunk {0} vendor.js (main) 65 bytes [entry] [rendered]
|
||||
> main [0] dll main
|
||||
> main
|
||||
[0] dll main 12 bytes {0} [built]
|
||||
dll entry
|
||||
|
||||
|
|
@ -296,32 +298,32 @@ Child vendor:
|
|||
Child app:
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Asset Size Chunks Chunk Names
|
||||
pageA.js 3.52 KiB 0 [emitted] pageA
|
||||
pageB.js 3.54 KiB 1 [emitted] pageB
|
||||
pageC.js 2.73 KiB 2 [emitted] pageC
|
||||
pageA.js 3.53 KiB 0 [emitted] pageA
|
||||
pageB.js 3.55 KiB 1 [emitted] pageB
|
||||
pageC.js 2.74 KiB 2 [emitted] pageC
|
||||
Entrypoint pageA = pageA.js
|
||||
Entrypoint pageB = pageB.js
|
||||
Entrypoint pageC = pageC.js
|
||||
chunk {0} pageA.js (pageA) 144 bytes [entry] [rendered]
|
||||
> pageA [0] ./pageA.js
|
||||
> ./pageA pageA
|
||||
[0] ./pageA.js 60 bytes {0} [built]
|
||||
single entry ./pageA pageA
|
||||
[1] delegated ./vendor.js from dll-reference vendor_44a43fa9f51c57e4a162 42 bytes {0} [built]
|
||||
[1] delegated ./vendor.js from dll-reference vendor_36000db9190edee14765 42 bytes {0} [built]
|
||||
cjs require ./vendor [0] ./pageA.js 1:12-31
|
||||
[2] external "vendor_44a43fa9f51c57e4a162" 42 bytes {0} {1} [built]
|
||||
delegated source dll-reference vendor_44a43fa9f51c57e4a162 [1] delegated ./vendor.js from dll-reference vendor_44a43fa9f51c57e4a162
|
||||
delegated source dll-reference vendor_44a43fa9f51c57e4a162 [4] delegated ./vendor2.js from dll-reference vendor_44a43fa9f51c57e4a162
|
||||
[2] external "vendor_36000db9190edee14765" 42 bytes {0} {1} [built]
|
||||
delegated source dll-reference vendor_36000db9190edee14765 [1] delegated ./vendor.js from dll-reference vendor_36000db9190edee14765
|
||||
delegated source dll-reference vendor_36000db9190edee14765 [4] delegated ./vendor2.js from dll-reference vendor_36000db9190edee14765
|
||||
chunk {1} pageB.js (pageB) 145 bytes [entry] [rendered]
|
||||
> pageB [3] ./pageB.js
|
||||
[2] external "vendor_44a43fa9f51c57e4a162" 42 bytes {0} {1} [built]
|
||||
delegated source dll-reference vendor_44a43fa9f51c57e4a162 [1] delegated ./vendor.js from dll-reference vendor_44a43fa9f51c57e4a162
|
||||
delegated source dll-reference vendor_44a43fa9f51c57e4a162 [4] delegated ./vendor2.js from dll-reference vendor_44a43fa9f51c57e4a162
|
||||
> ./pageB pageB
|
||||
[2] external "vendor_36000db9190edee14765" 42 bytes {0} {1} [built]
|
||||
delegated source dll-reference vendor_36000db9190edee14765 [1] delegated ./vendor.js from dll-reference vendor_36000db9190edee14765
|
||||
delegated source dll-reference vendor_36000db9190edee14765 [4] delegated ./vendor2.js from dll-reference vendor_36000db9190edee14765
|
||||
[3] ./pageB.js 61 bytes {1} [built]
|
||||
single entry ./pageB pageB
|
||||
[4] delegated ./vendor2.js from dll-reference vendor_44a43fa9f51c57e4a162 42 bytes {1} [built]
|
||||
[4] delegated ./vendor2.js from dll-reference vendor_36000db9190edee14765 42 bytes {1} [built]
|
||||
cjs require ./vendor2 [3] ./pageB.js 1:12-32
|
||||
chunk {2} pageC.js (pageC) 25 bytes [entry] [rendered]
|
||||
> pageC [5] ./pageC.js
|
||||
> ./pageC pageC
|
||||
[5] ./pageC.js 25 bytes {2} [built]
|
||||
single entry ./pageC pageC
|
||||
```
|
||||
|
|
@ -337,7 +339,7 @@ Child vendor:
|
|||
vendor.js 670 bytes 0 [emitted] main
|
||||
Entrypoint main = vendor.js
|
||||
chunk {0} vendor.js (main) 65 bytes [entry] [rendered]
|
||||
> main [2] dll main
|
||||
> main
|
||||
[0] ./vendor2.js 27 bytes {0} [built]
|
||||
|
||||
single entry ./vendor2 [2] dll main main:1
|
||||
|
|
@ -357,24 +359,24 @@ Child app:
|
|||
Entrypoint pageB = pageB.js
|
||||
Entrypoint pageC = pageC.js
|
||||
chunk {0} pageC.js (pageC) 25 bytes [entry] [rendered]
|
||||
> pageC [1] ./pageC.js
|
||||
> ./pageC pageC
|
||||
[1] ./pageC.js 25 bytes {0} [built]
|
||||
single entry ./pageC pageC
|
||||
chunk {1} pageB.js (pageB) 145 bytes [entry] [rendered]
|
||||
> pageB [3] ./pageB.js
|
||||
[0] external "vendor_4931cea4c9b3fadeb2db" 42 bytes {1} {2} [built]
|
||||
delegated source dll-reference vendor_4931cea4c9b3fadeb2db [2] delegated ./vendor2.js from dll-reference vendor_4931cea4c9b3fadeb2db
|
||||
delegated source dll-reference vendor_4931cea4c9b3fadeb2db [4] delegated ./vendor.js from dll-reference vendor_4931cea4c9b3fadeb2db
|
||||
[2] delegated ./vendor2.js from dll-reference vendor_4931cea4c9b3fadeb2db 42 bytes {1} [built]
|
||||
> ./pageB pageB
|
||||
[0] external "vendor_bca8264c25e79f49ad09" 42 bytes {1} {2} [built]
|
||||
delegated source dll-reference vendor_bca8264c25e79f49ad09 [2] delegated ./vendor2.js from dll-reference vendor_bca8264c25e79f49ad09
|
||||
delegated source dll-reference vendor_bca8264c25e79f49ad09 [4] delegated ./vendor.js from dll-reference vendor_bca8264c25e79f49ad09
|
||||
[2] delegated ./vendor2.js from dll-reference vendor_bca8264c25e79f49ad09 42 bytes {1} [built]
|
||||
cjs require ./vendor2 [3] ./pageB.js 1:12-32
|
||||
[3] ./pageB.js 61 bytes {1} [built]
|
||||
single entry ./pageB pageB
|
||||
chunk {2} pageA.js (pageA) 144 bytes [entry] [rendered]
|
||||
> pageA [5] ./pageA.js
|
||||
[0] external "vendor_4931cea4c9b3fadeb2db" 42 bytes {1} {2} [built]
|
||||
delegated source dll-reference vendor_4931cea4c9b3fadeb2db [2] delegated ./vendor2.js from dll-reference vendor_4931cea4c9b3fadeb2db
|
||||
delegated source dll-reference vendor_4931cea4c9b3fadeb2db [4] delegated ./vendor.js from dll-reference vendor_4931cea4c9b3fadeb2db
|
||||
[4] delegated ./vendor.js from dll-reference vendor_4931cea4c9b3fadeb2db 42 bytes {2} [built]
|
||||
> ./pageA pageA
|
||||
[0] external "vendor_bca8264c25e79f49ad09" 42 bytes {1} {2} [built]
|
||||
delegated source dll-reference vendor_bca8264c25e79f49ad09 [2] delegated ./vendor2.js from dll-reference vendor_bca8264c25e79f49ad09
|
||||
delegated source dll-reference vendor_bca8264c25e79f49ad09 [4] delegated ./vendor.js from dll-reference vendor_bca8264c25e79f49ad09
|
||||
[4] delegated ./vendor.js from dll-reference vendor_bca8264c25e79f49ad09 42 bytes {2} [built]
|
||||
cjs require ./vendor [5] ./pageA.js 1:12-31
|
||||
[5] ./pageA.js 60 bytes {2} [built]
|
||||
single entry ./pageA pageA
|
||||
|
|
|
|||
|
|
@ -129,6 +129,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "dist/";
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 0);
|
||||
/******/ })
|
||||
|
|
@ -184,10 +185,10 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__2__;
|
|||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
output.js 4.16 KiB 0 [emitted] main
|
||||
output.js 4.17 KiB 0 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} output.js (main) 197 bytes [entry] [rendered]
|
||||
> main [0] ./example.js
|
||||
> .\example.js main
|
||||
[0] ./example.js 113 bytes {0} [built]
|
||||
single entry .\example.js main
|
||||
[1] external "add" 42 bytes {0} [built]
|
||||
|
|
@ -205,7 +206,7 @@ Version: webpack next
|
|||
output.js 1.02 KiB 0 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} output.js (main) 197 bytes [entry] [rendered]
|
||||
> main [2] ./example.js
|
||||
> .\example.js main
|
||||
[0] external {"root":"subtract","commonjs2":"./subtract","commonjs":["./math","subtract"],"amd":"subtract"} 42 bytes {0} [built]
|
||||
cjs require subtract [2] ./example.js 2:15-34
|
||||
[1] external "add" 42 bytes {0} [built]
|
||||
|
|
|
|||
|
|
@ -24,25 +24,12 @@ require.ensure(["./a", "./e"], function(require) {
|
|||
# webpack.config.js
|
||||
|
||||
``` javascript
|
||||
var CommonsChunkPlugin = require("../../lib/optimize/CommonsChunkPlugin");
|
||||
|
||||
module.exports = {
|
||||
// mode: "development || "production",
|
||||
plugins: [
|
||||
new CommonsChunkPlugin({
|
||||
name: "main",
|
||||
async: "async1"
|
||||
}),
|
||||
new CommonsChunkPlugin({
|
||||
name: "main",
|
||||
async: "async2",
|
||||
minChunks: 2
|
||||
}),
|
||||
new CommonsChunkPlugin({
|
||||
async: true
|
||||
}),
|
||||
],
|
||||
optimization: {
|
||||
splitChunks: {
|
||||
minSize: 0 // This example is too small
|
||||
},
|
||||
occurrenceOrder: true // To keep filename consistent between different modes (for example building only)
|
||||
}
|
||||
};
|
||||
|
|
@ -56,10 +43,12 @@ module.exports = {
|
|||
/******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // install a JSONP callback for chunk loading
|
||||
/******/ function webpackJsonpCallback(data) {
|
||||
/******/ var chunkIds = data[0], moreModules = data[1], executeModules = data[2];
|
||||
/******/ var chunkIds = data[0];
|
||||
/******/ var moreModules = data[1]
|
||||
/******/
|
||||
/******/ // add "moreModules" to the modules object,
|
||||
/******/ // then flag all "chunkIds" as loaded and fire callback
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [], result;
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [];
|
||||
/******/ for(;i < chunkIds.length; i++) {
|
||||
/******/ chunkId = chunkIds[i];
|
||||
/******/ if(installedChunks[chunkId]) {
|
||||
|
|
@ -79,6 +68,7 @@ module.exports = {
|
|||
/******/
|
||||
/******/ };
|
||||
/******/
|
||||
/******/
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
|
|
@ -87,7 +77,7 @@ module.exports = {
|
|||
/******/ 7: 0
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ var scheduledModules = [];
|
||||
/******/
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
|
|
@ -213,10 +203,12 @@ module.exports = {
|
|||
/******/ __webpack_require__.oe = function(err) { console.error(err); throw err; };
|
||||
/******/
|
||||
/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
|
||||
/******/ var parentJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ jsonpArray.push = webpackJsonpCallback;
|
||||
/******/ jsonpArray = jsonpArray.slice();
|
||||
/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
|
||||
/******/ var parentJsonpFunction = oldJsonpFunction;
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 2);
|
||||
|
|
@ -236,19 +228,19 @@ module.exports = {
|
|||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
Promise.all(/*! AMD require | duplicate */[__webpack_require__.e(4), __webpack_require__.e(0), __webpack_require__.e(1)]).then(function() { var __WEBPACK_AMD_REQUIRE_ARRAY__ = [__webpack_require__(/*! ./a */ 1), __webpack_require__(/*! ./b */ 0), __webpack_require__(/*! ./c */ 7)]; (function(a, b, c) {}).apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__);}).catch(__webpack_require__.oe);
|
||||
Promise.all(/*! AMD require */[__webpack_require__.e(0), __webpack_require__.e(1), __webpack_require__.e(4)]).then(function() { var __WEBPACK_AMD_REQUIRE_ARRAY__ = [__webpack_require__(/*! ./a */ 1), __webpack_require__(/*! ./b */ 0), __webpack_require__(/*! ./c */ 7)]; (function(a, b, c) {}).apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__);}).catch(__webpack_require__.oe);
|
||||
|
||||
Promise.all(/*! require.ensure | duplicate */[__webpack_require__.e(3), __webpack_require__.e(0), __webpack_require__.e(1)]).then((function(require) {
|
||||
Promise.all(/*! require.ensure */[__webpack_require__.e(0), __webpack_require__.e(1), __webpack_require__.e(3)]).then((function(require) {
|
||||
__webpack_require__(/*! ./b */ 0);
|
||||
__webpack_require__(/*! ./d */ 6);
|
||||
}).bind(null, __webpack_require__)).catch(__webpack_require__.oe);
|
||||
|
||||
Promise.all(/*! require.ensure */[__webpack_require__.e(2), __webpack_require__.e(1)]).then((function(require) {
|
||||
Promise.all(/*! require.ensure */[__webpack_require__.e(0), __webpack_require__.e(2)]).then((function(require) {
|
||||
__webpack_require__(/*! ./a */ 1);
|
||||
Promise.all(/*! require.ensure | duplicate */[__webpack_require__.e(6), __webpack_require__.e(0)]).then((function(require) {
|
||||
Promise.all(/*! require.ensure */[__webpack_require__.e(1), __webpack_require__.e(6)]).then((function(require) {
|
||||
__webpack_require__(/*! ./f */ 4);
|
||||
}).bind(null, __webpack_require__)).catch(__webpack_require__.oe);
|
||||
Promise.all(/*! require.ensure | duplicate */[__webpack_require__.e(5), __webpack_require__.e(0)]).then((function(require) {
|
||||
Promise.all(/*! require.ensure */[__webpack_require__.e(1), __webpack_require__.e(5)]).then((function(require) {
|
||||
__webpack_require__(/*! ./g */ 3);
|
||||
}).bind(null, __webpack_require__)).catch(__webpack_require__.oe);
|
||||
}).bind(null, __webpack_require__)).catch(__webpack_require__.oe);
|
||||
|
|
@ -267,56 +259,56 @@ Promise.all(/*! require.ensure */[__webpack_require__.e(2), __webpack_require__.
|
|||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
0.output.js 238 bytes 0 [emitted] async2
|
||||
1.output.js 247 bytes 1 [emitted] async1
|
||||
0.output.js 247 bytes 0 [emitted]
|
||||
1.output.js 238 bytes 1 [emitted]
|
||||
2.output.js 241 bytes 2 [emitted]
|
||||
3.output.js 241 bytes 3 [emitted]
|
||||
4.output.js 241 bytes 4 [emitted]
|
||||
5.output.js 241 bytes 5 [emitted]
|
||||
6.output.js 241 bytes 6 [emitted]
|
||||
output.js 8.09 KiB 7 [emitted] main
|
||||
output.js 8.07 KiB 7 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} 0.output.js (async2) 21 bytes {2} {7} [rendered]
|
||||
> async commons duplicate [2] ./example.js 1:0-52
|
||||
> async commons duplicate [2] ./example.js 3:0-6:2
|
||||
> async commons duplicate [2] ./example.js 10:1-12:3
|
||||
> async commons duplicate [2] ./example.js 13:1-15:3
|
||||
[0] ./b.js 21 bytes {0} [built]
|
||||
amd require ./b [2] ./example.js 1:0-52
|
||||
cjs require ./b [2] ./example.js 4:1-15
|
||||
require.ensure item ./b [2] ./example.js 10:1-12:3
|
||||
require.ensure item ./b [2] ./example.js 13:1-15:3
|
||||
chunk {1} 1.output.js (async1) 21 bytes {7} [rendered]
|
||||
> async commons [2] ./example.js 1:0-52
|
||||
> async commons [2] ./example.js 3:0-6:2
|
||||
> async commons [2] ./example.js 8:0-16:2
|
||||
[1] ./a.js 21 bytes {1} [built]
|
||||
chunk {0} 0.output.js 21 bytes <{7}> ={2}= ={1}= ={3}= ={4}= >{1}< >{5}< >{6}< [rendered] split chunk
|
||||
> [2] ./example.js 8:0-16:2
|
||||
> [2] ./example.js 3:0-6:2
|
||||
> ./a ./b ./c [2] ./example.js 1:0-52
|
||||
[1] ./a.js 21 bytes {0} [built]
|
||||
amd require ./a [2] ./example.js 1:0-52
|
||||
require.ensure item ./a [2] ./example.js 3:0-6:2
|
||||
require.ensure item ./a [2] ./example.js 8:0-16:2
|
||||
cjs require ./a [2] ./example.js 9:1-15
|
||||
chunk {2} 2.output.js 21 bytes {7} [rendered]
|
||||
chunk {1} 1.output.js 21 bytes <{0}> <{2}> <{7}> ={5}= ={6}= ={0}= ={3}= ={4}= [rendered] split chunk
|
||||
> [2] ./example.js 13:1-15:3
|
||||
> [2] ./example.js 10:1-12:3
|
||||
> [2] ./example.js 3:0-6:2
|
||||
> ./a ./b ./c [2] ./example.js 1:0-52
|
||||
[0] ./b.js 21 bytes {1} [built]
|
||||
amd require ./b [2] ./example.js 1:0-52
|
||||
cjs require ./b [2] ./example.js 4:1-15
|
||||
require.ensure item ./b [2] ./example.js 10:1-12:3
|
||||
require.ensure item ./b [2] ./example.js 13:1-15:3
|
||||
chunk {2} 2.output.js 21 bytes <{7}> ={0}= >{1}< >{5}< >{6}< [rendered]
|
||||
> [2] ./example.js 8:0-16:2
|
||||
[5] ./e.js 21 bytes {2} [built]
|
||||
require.ensure item ./e [2] ./example.js 8:0-16:2
|
||||
chunk {3} 3.output.js 21 bytes {7} [rendered]
|
||||
chunk {3} 3.output.js 21 bytes <{7}> ={0}= ={1}= [rendered]
|
||||
> [2] ./example.js 3:0-6:2
|
||||
[6] ./d.js 21 bytes {3} [built]
|
||||
cjs require ./d [2] ./example.js 5:1-15
|
||||
chunk {4} 4.output.js 21 bytes {7} [rendered]
|
||||
> [2] ./example.js 1:0-52
|
||||
chunk {4} 4.output.js 21 bytes <{7}> ={0}= ={1}= [rendered]
|
||||
> ./a ./b ./c [2] ./example.js 1:0-52
|
||||
[7] ./c.js 21 bytes {4} [built]
|
||||
amd require ./c [2] ./example.js 1:0-52
|
||||
chunk {5} 5.output.js 21 bytes {2} [rendered]
|
||||
chunk {5} 5.output.js 21 bytes <{0}> <{2}> ={1}= [rendered]
|
||||
> [2] ./example.js 13:1-15:3
|
||||
[3] ./g.js 21 bytes {5} [built]
|
||||
cjs require ./g [2] ./example.js 14:2-16
|
||||
chunk {6} 6.output.js 21 bytes {2} [rendered]
|
||||
chunk {6} 6.output.js 21 bytes <{0}> <{2}> ={1}= [rendered]
|
||||
> [2] ./example.js 10:1-12:3
|
||||
[4] ./f.js 21 bytes {6} [built]
|
||||
cjs require ./f [2] ./example.js 11:2-16
|
||||
chunk {7} output.js (main) 362 bytes [entry] [rendered]
|
||||
> main [2] ./example.js
|
||||
chunk {7} output.js (main) 362 bytes >{0}< >{1}< >{3}< >{4}< >{2}< [entry] [rendered]
|
||||
> .\example.js main
|
||||
[2] ./example.js 362 bytes {7} [built]
|
||||
single entry .\example.js main
|
||||
```
|
||||
|
|
@ -327,8 +319,8 @@ chunk {7} output.js (main) 362 bytes [entry] [rendered]
|
|||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
0.output.js 89 bytes 0 [emitted] async2
|
||||
1.output.js 90 bytes 1 [emitted] async1
|
||||
0.output.js 90 bytes 0 [emitted]
|
||||
1.output.js 89 bytes 1 [emitted]
|
||||
2.output.js 91 bytes 2 [emitted]
|
||||
3.output.js 91 bytes 3 [emitted]
|
||||
4.output.js 91 bytes 4 [emitted]
|
||||
|
|
@ -336,47 +328,47 @@ Version: webpack next
|
|||
6.output.js 91 bytes 6 [emitted]
|
||||
output.js 2.02 KiB 7 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} 0.output.js (async2) 21 bytes {2} {7} [rendered]
|
||||
> async commons duplicate [2] ./example.js 1:0-52
|
||||
> async commons duplicate [2] ./example.js 3:0-6:2
|
||||
> async commons duplicate [2] ./example.js 10:1-12:3
|
||||
> async commons duplicate [2] ./example.js 13:1-15:3
|
||||
[0] ./b.js 21 bytes {0} [built]
|
||||
amd require ./b [2] ./example.js 1:0-52
|
||||
cjs require ./b [2] ./example.js 4:1-15
|
||||
require.ensure item ./b [2] ./example.js 10:1-12:3
|
||||
require.ensure item ./b [2] ./example.js 13:1-15:3
|
||||
chunk {1} 1.output.js (async1) 21 bytes {7} [rendered]
|
||||
> async commons [2] ./example.js 1:0-52
|
||||
> async commons [2] ./example.js 3:0-6:2
|
||||
> async commons [2] ./example.js 8:0-16:2
|
||||
[1] ./a.js 21 bytes {1} [built]
|
||||
chunk {0} 0.output.js 21 bytes <{7}> ={2}= ={1}= ={3}= ={4}= >{1}< >{5}< >{6}< [rendered] split chunk
|
||||
> [2] ./example.js 8:0-16:2
|
||||
> [2] ./example.js 3:0-6:2
|
||||
> ./a ./b ./c [2] ./example.js 1:0-52
|
||||
[1] ./a.js 21 bytes {0} [built]
|
||||
amd require ./a [2] ./example.js 1:0-52
|
||||
require.ensure item ./a [2] ./example.js 3:0-6:2
|
||||
require.ensure item ./a [2] ./example.js 8:0-16:2
|
||||
cjs require ./a [2] ./example.js 9:1-15
|
||||
chunk {2} 2.output.js 21 bytes {7} [rendered]
|
||||
chunk {1} 1.output.js 21 bytes <{0}> <{2}> <{7}> ={5}= ={6}= ={0}= ={3}= ={4}= [rendered] split chunk
|
||||
> [2] ./example.js 13:1-15:3
|
||||
> [2] ./example.js 10:1-12:3
|
||||
> [2] ./example.js 3:0-6:2
|
||||
> ./a ./b ./c [2] ./example.js 1:0-52
|
||||
[0] ./b.js 21 bytes {1} [built]
|
||||
amd require ./b [2] ./example.js 1:0-52
|
||||
cjs require ./b [2] ./example.js 4:1-15
|
||||
require.ensure item ./b [2] ./example.js 10:1-12:3
|
||||
require.ensure item ./b [2] ./example.js 13:1-15:3
|
||||
chunk {2} 2.output.js 21 bytes <{7}> ={0}= >{1}< >{5}< >{6}< [rendered]
|
||||
> [2] ./example.js 8:0-16:2
|
||||
[5] ./e.js 21 bytes {2} [built]
|
||||
require.ensure item ./e [2] ./example.js 8:0-16:2
|
||||
chunk {3} 3.output.js 21 bytes {7} [rendered]
|
||||
chunk {3} 3.output.js 21 bytes <{7}> ={0}= ={1}= [rendered]
|
||||
> [2] ./example.js 3:0-6:2
|
||||
[6] ./d.js 21 bytes {3} [built]
|
||||
cjs require ./d [2] ./example.js 5:1-15
|
||||
chunk {4} 4.output.js 21 bytes {7} [rendered]
|
||||
> [2] ./example.js 1:0-52
|
||||
chunk {4} 4.output.js 21 bytes <{7}> ={0}= ={1}= [rendered]
|
||||
> ./a ./b ./c [2] ./example.js 1:0-52
|
||||
[7] ./c.js 21 bytes {4} [built]
|
||||
amd require ./c [2] ./example.js 1:0-52
|
||||
chunk {5} 5.output.js 21 bytes {2} [rendered]
|
||||
chunk {5} 5.output.js 21 bytes <{0}> <{2}> ={1}= [rendered]
|
||||
> [2] ./example.js 13:1-15:3
|
||||
[3] ./g.js 21 bytes {5} [built]
|
||||
cjs require ./g [2] ./example.js 14:2-16
|
||||
chunk {6} 6.output.js 21 bytes {2} [rendered]
|
||||
chunk {6} 6.output.js 21 bytes <{0}> <{2}> ={1}= [rendered]
|
||||
> [2] ./example.js 10:1-12:3
|
||||
[4] ./f.js 21 bytes {6} [built]
|
||||
cjs require ./f [2] ./example.js 11:2-16
|
||||
chunk {7} output.js (main) 362 bytes [entry] [rendered]
|
||||
> main [2] ./example.js
|
||||
chunk {7} output.js (main) 362 bytes >{0}< >{1}< >{3}< >{4}< >{2}< [entry] [rendered]
|
||||
> .\example.js main
|
||||
[2] ./example.js 362 bytes {7} [built]
|
||||
single entry .\example.js main
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,22 +1,9 @@
|
|||
var CommonsChunkPlugin = require("../../lib/optimize/CommonsChunkPlugin");
|
||||
|
||||
module.exports = {
|
||||
// mode: "development || "production",
|
||||
plugins: [
|
||||
new CommonsChunkPlugin({
|
||||
name: "main",
|
||||
async: "async1"
|
||||
}),
|
||||
new CommonsChunkPlugin({
|
||||
name: "main",
|
||||
async: "async2",
|
||||
minChunks: 2
|
||||
}),
|
||||
new CommonsChunkPlugin({
|
||||
async: true
|
||||
}),
|
||||
],
|
||||
optimization: {
|
||||
splitChunks: {
|
||||
minSize: 0 // This example is too small
|
||||
},
|
||||
occurrenceOrder: true // To keep filename consistent between different modes (for example building only)
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
This example shows how to create a async loaded commons chunk.
|
||||
|
||||
When a chunk has many child chunks which share common modules the `CommonsChunkPlugin` can extract these common modules into a commons chunk which is loaded in parallel to the requested child chunk.
|
||||
This example shows automatically created async commons chunks.
|
||||
|
||||
The example entry references two chunks:
|
||||
|
||||
|
|
@ -16,7 +14,9 @@ The example entry references two chunks:
|
|||
* module `b`
|
||||
* module `d`
|
||||
|
||||
These chunks share modules `a` and `b`. The `CommonsChunkPlugin` 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 pratice there is no configuration needed for this.
|
||||
|
||||
* entry chunk
|
||||
* async require -> chunk X & Z
|
||||
|
|
@ -36,7 +36,7 @@ Pretty useful for a router in a SPA.
|
|||
|
||||
``` javascript
|
||||
// a chunks with a, b, c
|
||||
require(["./a", "./b", "./c"], function(a, b, c) {});
|
||||
require(["./a", "./b", "./c"]);
|
||||
|
||||
// a chunk with a, b, d
|
||||
require.ensure(["./a"], function(require) {
|
||||
|
|
@ -45,29 +45,6 @@ require.ensure(["./a"], function(require) {
|
|||
});
|
||||
```
|
||||
|
||||
# webpack.config.js
|
||||
|
||||
``` javascript
|
||||
var CommonsChunkPlugin = require("../../lib/optimize/CommonsChunkPlugin");
|
||||
|
||||
module.exports = {
|
||||
// mode: "development || "production",
|
||||
plugins: [
|
||||
new CommonsChunkPlugin({
|
||||
// process all children of the main chunk
|
||||
// if omitted it would process all chunks
|
||||
name: "main",
|
||||
// create a additional async chunk for the common modules
|
||||
// which is loaded in parallel to the requested chunks
|
||||
async: true
|
||||
})
|
||||
],
|
||||
optimization: {
|
||||
occurrenceOrder: true // To keep filename consistent between different modes (for example building only)
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
# dist/output.js
|
||||
|
||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||
|
|
@ -76,10 +53,12 @@ module.exports = {
|
|||
/******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // install a JSONP callback for chunk loading
|
||||
/******/ function webpackJsonpCallback(data) {
|
||||
/******/ var chunkIds = data[0], moreModules = data[1], executeModules = data[2];
|
||||
/******/ var chunkIds = data[0];
|
||||
/******/ var moreModules = data[1]
|
||||
/******/
|
||||
/******/ // add "moreModules" to the modules object,
|
||||
/******/ // then flag all "chunkIds" as loaded and fire callback
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [], result;
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [];
|
||||
/******/ for(;i < chunkIds.length; i++) {
|
||||
/******/ chunkId = chunkIds[i];
|
||||
/******/ if(installedChunks[chunkId]) {
|
||||
|
|
@ -99,6 +78,7 @@ module.exports = {
|
|||
/******/
|
||||
/******/ };
|
||||
/******/
|
||||
/******/
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
|
|
@ -107,7 +87,7 @@ module.exports = {
|
|||
/******/ 3: 0
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ var scheduledModules = [];
|
||||
/******/
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
|
|
@ -233,10 +213,12 @@ module.exports = {
|
|||
/******/ __webpack_require__.oe = function(err) { console.error(err); throw err; };
|
||||
/******/
|
||||
/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
|
||||
/******/ var parentJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ jsonpArray.push = webpackJsonpCallback;
|
||||
/******/ jsonpArray = jsonpArray.slice();
|
||||
/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
|
||||
/******/ var parentJsonpFunction = oldJsonpFunction;
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 2);
|
||||
|
|
@ -257,7 +239,7 @@ module.exports = {
|
|||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
// a chunks with a, b, c
|
||||
Promise.all(/*! AMD require */[__webpack_require__.e(0), __webpack_require__.e(2)]).then(function() { var __WEBPACK_AMD_REQUIRE_ARRAY__ = [__webpack_require__(/*! ./a */ 1), __webpack_require__(/*! ./b */ 0), __webpack_require__(/*! ./c */ 4)]; (function(a, b, c) {}).apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__);}).catch(__webpack_require__.oe);
|
||||
Promise.all(/*! AMD require */[__webpack_require__.e(0), __webpack_require__.e(2)]).then(function() {[__webpack_require__(/*! ./a */ 1), __webpack_require__(/*! ./b */ 0), __webpack_require__(/*! ./c */ 4)];}).catch(__webpack_require__.oe);
|
||||
|
||||
// a chunk with a, b, d
|
||||
Promise.all(/*! require.ensure */[__webpack_require__.e(0), __webpack_require__.e(1)]).then((function(require) {
|
||||
|
|
@ -347,28 +329,28 @@ Version: webpack next
|
|||
0.output.js 405 bytes 0 [emitted]
|
||||
1.output.js 241 bytes 1 [emitted]
|
||||
2.output.js 241 bytes 2 [emitted]
|
||||
output.js 7.39 KiB 3 [emitted] main
|
||||
output.js 7.32 KiB 3 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} 0.output.js 42 bytes {3} [rendered]
|
||||
> async commons [2] ./example.js 2:0-52
|
||||
> async commons [2] ./example.js 5:0-8:2
|
||||
chunk {0} 0.output.js 42 bytes <{3}> ={1}= ={2}= [rendered] split chunk
|
||||
> [2] ./example.js 5:0-8:2
|
||||
> ./a ./b ./c [2] ./example.js 2:0-30
|
||||
[0] ./b.js 21 bytes {0} [built]
|
||||
amd require ./b [2] ./example.js 2:0-52
|
||||
amd require ./b [2] ./example.js 2:0-30
|
||||
cjs require ./b [2] ./example.js 6:1-15
|
||||
[1] ./a.js 21 bytes {0} [built]
|
||||
amd require ./a [2] ./example.js 2:0-52
|
||||
amd require ./a [2] ./example.js 2:0-30
|
||||
require.ensure item ./a [2] ./example.js 5:0-8:2
|
||||
chunk {1} 1.output.js 21 bytes {3} [rendered]
|
||||
chunk {1} 1.output.js 21 bytes <{3}> ={0}= [rendered]
|
||||
> [2] ./example.js 5:0-8:2
|
||||
[3] ./d.js 21 bytes {1} [built]
|
||||
cjs require ./d [2] ./example.js 7:1-15
|
||||
chunk {2} 2.output.js 21 bytes {3} [rendered]
|
||||
> [2] ./example.js 2:0-52
|
||||
chunk {2} 2.output.js 21 bytes <{3}> ={0}= [rendered]
|
||||
> ./a ./b ./c [2] ./example.js 2:0-30
|
||||
[4] ./c.js 21 bytes {2} [built]
|
||||
amd require ./c [2] ./example.js 2:0-52
|
||||
chunk {3} output.js (main) 194 bytes [entry] [rendered]
|
||||
> main [2] ./example.js
|
||||
[2] ./example.js 194 bytes {3} [built]
|
||||
amd require ./c [2] ./example.js 2:0-30
|
||||
chunk {3} output.js (main) 172 bytes >{0}< >{1}< >{2}< [entry] [rendered]
|
||||
> .\example.js main
|
||||
[2] ./example.js 172 bytes {3} [built]
|
||||
single entry .\example.js main
|
||||
```
|
||||
|
||||
|
|
@ -381,27 +363,27 @@ Version: webpack next
|
|||
0.output.js 118 bytes 0 [emitted]
|
||||
1.output.js 91 bytes 1 [emitted]
|
||||
2.output.js 91 bytes 2 [emitted]
|
||||
output.js 1.77 KiB 3 [emitted] main
|
||||
output.js 1.73 KiB 3 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} 0.output.js 42 bytes {3} [rendered]
|
||||
> async commons [2] ./example.js 2:0-52
|
||||
> async commons [2] ./example.js 5:0-8:2
|
||||
chunk {0} 0.output.js 42 bytes <{3}> ={1}= ={2}= [rendered] split chunk
|
||||
> [2] ./example.js 5:0-8:2
|
||||
> ./a ./b ./c [2] ./example.js 2:0-30
|
||||
[0] ./b.js 21 bytes {0} [built]
|
||||
amd require ./b [2] ./example.js 2:0-52
|
||||
amd require ./b [2] ./example.js 2:0-30
|
||||
cjs require ./b [2] ./example.js 6:1-15
|
||||
[1] ./a.js 21 bytes {0} [built]
|
||||
amd require ./a [2] ./example.js 2:0-52
|
||||
amd require ./a [2] ./example.js 2:0-30
|
||||
require.ensure item ./a [2] ./example.js 5:0-8:2
|
||||
chunk {1} 1.output.js 21 bytes {3} [rendered]
|
||||
chunk {1} 1.output.js 21 bytes <{3}> ={0}= [rendered]
|
||||
> [2] ./example.js 5:0-8:2
|
||||
[3] ./d.js 21 bytes {1} [built]
|
||||
cjs require ./d [2] ./example.js 7:1-15
|
||||
chunk {2} 2.output.js 21 bytes {3} [rendered]
|
||||
> [2] ./example.js 2:0-52
|
||||
chunk {2} 2.output.js 21 bytes <{3}> ={0}= [rendered]
|
||||
> ./a ./b ./c [2] ./example.js 2:0-30
|
||||
[4] ./c.js 21 bytes {2} [built]
|
||||
amd require ./c [2] ./example.js 2:0-52
|
||||
chunk {3} output.js (main) 194 bytes [entry] [rendered]
|
||||
> main [2] ./example.js
|
||||
[2] ./example.js 194 bytes {3} [built]
|
||||
amd require ./c [2] ./example.js 2:0-30
|
||||
chunk {3} output.js (main) 172 bytes >{0}< >{1}< >{2}< [entry] [rendered]
|
||||
> .\example.js main
|
||||
[2] ./example.js 172 bytes {3} [built]
|
||||
single entry .\example.js main
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// a chunks with a, b, c
|
||||
require(["./a", "./b", "./c"], function(a, b, c) {});
|
||||
require(["./a", "./b", "./c"]);
|
||||
|
||||
// a chunk with a, b, d
|
||||
require.ensure(["./a"], function(require) {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
This example shows how to create a async loaded commons chunk.
|
||||
|
||||
When a chunk has many child chunks which share common modules the `CommonsChunkPlugin` can extract these common modules into a commons chunk which is loaded in parallel to the requested child chunk.
|
||||
This example shows automatically created async commons chunks.
|
||||
|
||||
The example entry references two chunks:
|
||||
|
||||
|
|
@ -16,7 +14,9 @@ The example entry references two chunks:
|
|||
* module `b`
|
||||
* module `d`
|
||||
|
||||
These chunks share modules `a` and `b`. The `CommonsChunkPlugin` 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 pratice there is no configuration needed for this.
|
||||
|
||||
* entry chunk
|
||||
* async require -> chunk X & Z
|
||||
|
|
@ -38,12 +38,6 @@ Pretty useful for a router in a SPA.
|
|||
{{example.js}}
|
||||
```
|
||||
|
||||
# webpack.config.js
|
||||
|
||||
``` javascript
|
||||
{{webpack.config.js}}
|
||||
```
|
||||
|
||||
# dist/output.js
|
||||
|
||||
``` javascript
|
||||
|
|
|
|||
|
|
@ -1,18 +1,9 @@
|
|||
var CommonsChunkPlugin = require("../../lib/optimize/CommonsChunkPlugin");
|
||||
|
||||
module.exports = {
|
||||
// mode: "development || "production",
|
||||
plugins: [
|
||||
new CommonsChunkPlugin({
|
||||
// process all children of the main chunk
|
||||
// if omitted it would process all chunks
|
||||
name: "main",
|
||||
// create a additional async chunk for the common modules
|
||||
// which is loaded in parallel to the requested chunks
|
||||
async: true
|
||||
})
|
||||
],
|
||||
optimization: {
|
||||
splitChunks: {
|
||||
minSize: 0 // This example is too small
|
||||
},
|
||||
occurrenceOrder: true // To keep filename consistent between different modes (for example building only)
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -135,6 +135,7 @@ export var named = "named";
|
|||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "dist/";
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 0);
|
||||
/******/ })
|
||||
|
|
@ -261,10 +262,10 @@ var named = "named";
|
|||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
output.js 6.12 KiB 0 [emitted] main
|
||||
output.js 6.13 KiB 0 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} output.js (main) 1.17 KiB [entry] [rendered]
|
||||
> main [0] ./example.js
|
||||
> .\example.js main
|
||||
[0] ./example.js 389 bytes {0} [built]
|
||||
[no exports]
|
||||
single entry .\example.js main
|
||||
|
|
@ -296,7 +297,7 @@ Version: webpack next
|
|||
output.js 993 bytes 0 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} output.js (main) 1.17 KiB [entry] [rendered]
|
||||
> main [4] ./example.js
|
||||
> .\example.js main
|
||||
[0] ./fs.js 265 bytes {0} [built]
|
||||
[only some exports used: default, readFile]
|
||||
harmony side effect evaluation ./fs [1] ./reexport-commonjs.js 2:0-21
|
||||
|
|
|
|||
|
|
@ -97,6 +97,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "dist/";
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 0);
|
||||
/******/ })
|
||||
|
|
@ -138,10 +139,10 @@ function increment() {
|
|||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
MyLibrary.umd.js 3.55 KiB 0 [emitted] main
|
||||
MyLibrary.umd.js 3.56 KiB 0 [emitted] main
|
||||
Entrypoint main = MyLibrary.umd.js
|
||||
chunk {0} MyLibrary.umd.js (main) 97 bytes [entry] [rendered]
|
||||
> main [0] ./example.js
|
||||
> ./example main
|
||||
[0] ./example.js 97 bytes {0} [built]
|
||||
[exports: value, increment, default]
|
||||
single entry ./example main
|
||||
|
|
@ -156,7 +157,7 @@ Version: webpack next
|
|||
MyLibrary.umd.js 926 bytes 0 [emitted] main
|
||||
Entrypoint main = MyLibrary.umd.js
|
||||
chunk {0} MyLibrary.umd.js (main) 97 bytes [entry] [rendered]
|
||||
> main [0] ./example.js
|
||||
> ./example main
|
||||
[0] ./example.js 97 bytes {0} [built]
|
||||
[exports: value, increment, default]
|
||||
single entry ./example main
|
||||
|
|
|
|||
|
|
@ -118,6 +118,7 @@ export { add as reexportedAdd, multiply as reexportedMultiply } from "./math";
|
|||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "dist/";
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 0);
|
||||
/******/ })
|
||||
|
|
@ -244,7 +245,7 @@ Version: webpack next
|
|||
output.js 5.93 KiB 0 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} output.js (main) 726 bytes [entry] [rendered]
|
||||
> main [0] ./example.js
|
||||
> .\example.js main
|
||||
[0] ./example.js 119 bytes {0} [built]
|
||||
[no exports]
|
||||
single entry .\example.js main
|
||||
|
|
@ -276,7 +277,7 @@ Version: webpack next
|
|||
output.js 971 bytes 0 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} output.js (main) 726 bytes [entry] [rendered]
|
||||
> main [3] ./example.js
|
||||
> .\example.js main
|
||||
[0] ./math.js 366 bytes {0} [built]
|
||||
[exports: add, multiply, list]
|
||||
[only some exports used: add, multiply]
|
||||
|
|
|
|||
|
|
@ -29,10 +29,12 @@ export function increment(val) {
|
|||
/******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // install a JSONP callback for chunk loading
|
||||
/******/ function webpackJsonpCallback(data) {
|
||||
/******/ var chunkIds = data[0], moreModules = data[1], executeModules = data[2];
|
||||
/******/ var chunkIds = data[0];
|
||||
/******/ var moreModules = data[1]
|
||||
/******/
|
||||
/******/ // add "moreModules" to the modules object,
|
||||
/******/ // then flag all "chunkIds" as loaded and fire callback
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [], result;
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [];
|
||||
/******/ for(;i < chunkIds.length; i++) {
|
||||
/******/ chunkId = chunkIds[i];
|
||||
/******/ if(installedChunks[chunkId]) {
|
||||
|
|
@ -52,6 +54,7 @@ export function increment(val) {
|
|||
/******/
|
||||
/******/ };
|
||||
/******/
|
||||
/******/
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
|
|
@ -60,7 +63,7 @@ export function increment(val) {
|
|||
/******/ 1: 0
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ var scheduledModules = [];
|
||||
/******/
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
|
|
@ -186,10 +189,12 @@ export function increment(val) {
|
|||
/******/ __webpack_require__.oe = function(err) { console.error(err); throw err; };
|
||||
/******/
|
||||
/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
|
||||
/******/ var parentJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ jsonpArray.push = webpackJsonpCallback;
|
||||
/******/ jsonpArray = jsonpArray.slice();
|
||||
/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
|
||||
/******/ var parentJsonpFunction = oldJsonpFunction;
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 2);
|
||||
|
|
@ -272,15 +277,15 @@ Hash: 0a1b2c3d4e5f6a7b8c9d
|
|||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
0.output.js 479 bytes 0 [emitted]
|
||||
output.js 8.24 KiB 1 [emitted] main
|
||||
output.js 8.27 KiB 1 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} 0.output.js 25 bytes {1} [rendered]
|
||||
> [2] ./example.js 6:0-24
|
||||
chunk {0} 0.output.js 25 bytes <{1}> [rendered]
|
||||
> ./async-loaded [2] ./example.js 6:0-24
|
||||
[3] ./async-loaded.js 25 bytes {0} [built]
|
||||
[exports: answer]
|
||||
import() ./async-loaded [2] ./example.js 6:0-24
|
||||
chunk {1} output.js (main) 419 bytes [entry] [rendered]
|
||||
> main [2] ./example.js
|
||||
chunk {1} output.js (main) 419 bytes >{0}< [entry] [rendered]
|
||||
> .\example.js main
|
||||
[0] ./math.js 142 bytes {1} [built]
|
||||
[exports: add]
|
||||
harmony side effect evaluation ./math [1] ./increment.js 1:0-29
|
||||
|
|
@ -303,13 +308,13 @@ Version: webpack next
|
|||
0.output.js 144 bytes 0 [emitted]
|
||||
output.js 1.75 KiB 1 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} 0.output.js 25 bytes {1} [rendered]
|
||||
> [] 6:0-24
|
||||
chunk {0} 0.output.js 25 bytes <{1}> [rendered]
|
||||
> ./async-loaded [] 6:0-24
|
||||
[1] ./async-loaded.js 25 bytes {0} [built]
|
||||
[exports: answer]
|
||||
import() ./async-loaded ./example.js 6:0-24
|
||||
chunk {1} output.js (main) 419 bytes [entry] [rendered]
|
||||
> main []
|
||||
chunk {1} output.js (main) 419 bytes >{0}< [entry] [rendered]
|
||||
> .\example.js main
|
||||
[0] ./example.js + 2 modules 419 bytes {1} [built]
|
||||
[no exports]
|
||||
single entry .\example.js main
|
||||
|
|
|
|||
|
|
@ -49,68 +49,68 @@ module.exports = {
|
|||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
1d1f50c6f480a313a283.js 52.9 KiB 7 [emitted]
|
||||
650a1f5b6bbd5e2a0bcb.js 36.5 KiB 0 [emitted]
|
||||
4a984680da6e56d39889.js 60 KiB 2 [emitted]
|
||||
de45e35c6080cc33435c.js 31.6 KiB 3 [emitted]
|
||||
b9d30d332886e3897e04.js 56.1 KiB 4 [emitted]
|
||||
091d7e57346e564d3d09.js 52.4 KiB 5 [emitted]
|
||||
525a050e7b27998ce47b.js 51.8 KiB 6 [emitted]
|
||||
ad733bf1033fc5a7a830.js 32.3 KiB 1 [emitted]
|
||||
46af055d8fc77c1333fd.js 49.8 KiB 8 [emitted]
|
||||
d5f1ea3a0710998c9d82.js 50.9 KiB 9 [emitted]
|
||||
d12e724ddfa623596d6a.js 54.2 KiB 10 [emitted]
|
||||
6cbad41d6996fe8e07a5.js 51.7 KiB 11 [emitted]
|
||||
0bb84ee671fc256e158e.js 51.2 KiB 12 [emitted]
|
||||
c8536008639de2173e51.js 58.2 KiB 13 [emitted]
|
||||
763fbc691b4fe33d506e.js 22 KiB 14 [emitted]
|
||||
Entrypoint main = 4a984680da6e56d39889.js de45e35c6080cc33435c.js 650a1f5b6bbd5e2a0bcb.js
|
||||
chunk {0} 650a1f5b6bbd5e2a0bcb.js 32.4 KiB [initial] [rendered]
|
||||
> aggressive-splitted main [0] ./example.js
|
||||
aae9c6dac629dd3f112e.js 54.5 KiB 7 [emitted]
|
||||
c943782a49da9f00f591.js 34.8 KiB 0 [emitted]
|
||||
987f929f287f8a6c88ac.js 52.1 KiB 2 [emitted]
|
||||
bc5ed8b126130fde4f42.js 31.1 KiB 3 [emitted]
|
||||
511009f3a8f06b7c54cb.js 43 KiB 4 [emitted]
|
||||
2a784b823ab0da1e0293.js 43.7 KiB 5 [emitted]
|
||||
0abfd767d2250ac9265a.js 46 KiB 6 [emitted]
|
||||
3147c249192926fa3521.js 12.6 KiB 1 [emitted]
|
||||
cd98376ec90f2e366b94.js 36.8 KiB 8 [emitted]
|
||||
a0f973cb054f411fba45.js 43 KiB 9 [emitted]
|
||||
ee6461bbec846ab2c762.js 37.6 KiB 10 [emitted]
|
||||
74249374b007623d16bf.js 41.7 KiB 11 [emitted]
|
||||
0a6d10836900825087ce.js 44.7 KiB 12 [emitted]
|
||||
5ec04d5529f6b78241e2.js 51.9 KiB 13 [emitted]
|
||||
38a6975540caa0156886.js 51.3 KiB 14 [emitted]
|
||||
Entrypoint main = bc5ed8b126130fde4f42.js 2a784b823ab0da1e0293.js c943782a49da9f00f591.js
|
||||
chunk {0} c943782a49da9f00f591.js 28.3 KiB ={3}= ={5}= >{2}< >{4}< >{6}< >{7}< >{8}< >{9}< >{10}< >{11}< >{12}< >{13}< >{14}< >{1}< [entry] [rendered]
|
||||
> ./example main
|
||||
[0] ./example.js 44 bytes {0} [built]
|
||||
+ 11 hidden modules
|
||||
chunk {1} ad733bf1033fc5a7a830.js 31.4 KiB {0} {2} {3} [rendered] [recorded]
|
||||
> aggressive-splitted [0] ./example.js 2:0-22
|
||||
+ 13 hidden modules
|
||||
chunk {1} 3147c249192926fa3521.js 24.9 KiB <{3}> <{5}> <{0}> ={2}= ={4}= ={6}= ={7}= ={8}= ={9}= ={10}= ={11}= ={12}= ={13}= ={14}= [rendered]
|
||||
> react-dom [0] ./example.js 2:0-22
|
||||
3 modules
|
||||
chunk {2} 4a984680da6e56d39889.js 48.8 KiB [entry] [rendered] [recorded]
|
||||
> aggressive-splitted main [0] ./example.js
|
||||
16 modules
|
||||
chunk {3} de45e35c6080cc33435c.js 30.5 KiB [initial] [rendered] [recorded]
|
||||
> aggressive-splitted main [0] ./example.js
|
||||
3 modules
|
||||
chunk {4} b9d30d332886e3897e04.js 48.7 KiB {0} {2} {3} [rendered] [recorded]
|
||||
> aggressive-splitted [0] ./example.js 2:0-22
|
||||
24 modules
|
||||
chunk {5} 091d7e57346e564d3d09.js 48.8 KiB {0} {2} {3} [rendered] [recorded]
|
||||
> aggressive-splitted [0] ./example.js 2:0-22
|
||||
11 modules
|
||||
chunk {6} 525a050e7b27998ce47b.js 48.6 KiB {0} {2} {3} [rendered] [recorded]
|
||||
> aggressive-splitted [0] ./example.js 2:0-22
|
||||
chunk {2} 987f929f287f8a6c88ac.js 45.7 KiB <{3}> <{5}> <{0}> ={4}= ={6}= ={7}= ={8}= ={9}= ={10}= ={11}= ={12}= ={13}= ={14}= ={1}= [rendered] [recorded] aggressive splitted
|
||||
> react-dom [0] ./example.js 2:0-22
|
||||
23 modules
|
||||
chunk {3} bc5ed8b126130fde4f42.js 37.8 KiB ={5}= ={0}= >{2}< >{4}< >{6}< >{7}< >{8}< >{9}< >{10}< >{11}< >{12}< >{13}< >{14}< >{1}< [initial] [rendered] [recorded] aggressive splitted
|
||||
> ./example main
|
||||
8 modules
|
||||
chunk {4} 511009f3a8f06b7c54cb.js 46.9 KiB <{3}> <{5}> <{0}> ={2}= ={6}= ={7}= ={8}= ={9}= ={10}= ={11}= ={12}= ={13}= ={14}= ={1}= [rendered] [recorded] aggressive splitted
|
||||
> react-dom [0] ./example.js 2:0-22
|
||||
8 modules
|
||||
chunk {5} 2a784b823ab0da1e0293.js 45.7 KiB ={3}= ={0}= >{2}< >{4}< >{6}< >{7}< >{8}< >{9}< >{10}< >{11}< >{12}< >{13}< >{14}< >{1}< [initial] [rendered] [recorded] aggressive splitted
|
||||
> ./example main
|
||||
9 modules
|
||||
chunk {6} 0abfd767d2250ac9265a.js 46.3 KiB <{3}> <{5}> <{0}> ={2}= ={4}= ={7}= ={8}= ={9}= ={10}= ={11}= ={12}= ={13}= ={14}= ={1}= [rendered] [recorded] aggressive splitted
|
||||
> react-dom [0] ./example.js 2:0-22
|
||||
10 modules
|
||||
chunk {7} 1d1f50c6f480a313a283.js 48.7 KiB {0} {2} {3} [rendered] [recorded]
|
||||
> aggressive-splitted [0] ./example.js 2:0-22
|
||||
11 modules
|
||||
chunk {8} 46af055d8fc77c1333fd.js 48.8 KiB {0} {2} {3} [rendered] [recorded]
|
||||
> aggressive-splitted [0] ./example.js 2:0-22
|
||||
6 modules
|
||||
chunk {9} d5f1ea3a0710998c9d82.js 48.7 KiB {0} {2} {3} [rendered] [recorded]
|
||||
> aggressive-splitted [0] ./example.js 2:0-22
|
||||
6 modules
|
||||
chunk {10} d12e724ddfa623596d6a.js 48.7 KiB {0} {2} {3} [rendered] [recorded]
|
||||
> aggressive-splitted [0] ./example.js 2:0-22
|
||||
15 modules
|
||||
chunk {11} 6cbad41d6996fe8e07a5.js 48.8 KiB {0} {2} {3} [rendered] [recorded]
|
||||
> aggressive-splitted [0] ./example.js 2:0-22
|
||||
9 modules
|
||||
chunk {12} 0bb84ee671fc256e158e.js 48.6 KiB {0} {2} {3} [rendered] [recorded]
|
||||
> aggressive-splitted [0] ./example.js 2:0-22
|
||||
chunk {7} aae9c6dac629dd3f112e.js 62.3 KiB <{3}> <{5}> <{0}> ={2}= ={4}= ={6}= ={8}= ={9}= ={10}= ={11}= ={12}= ={13}= ={14}= ={1}= [rendered] [recorded] aggressive splitted
|
||||
> react-dom [0] ./example.js 2:0-22
|
||||
7 modules
|
||||
chunk {13} c8536008639de2173e51.js 48.5 KiB {0} {2} {3} [rendered] [recorded]
|
||||
> aggressive-splitted [0] ./example.js 2:0-22
|
||||
28 modules
|
||||
chunk {14} 763fbc691b4fe33d506e.js 18.9 KiB {0} {2} {3} [rendered]
|
||||
> aggressive-splitted [0] ./example.js 2:0-22
|
||||
chunk {8} cd98376ec90f2e366b94.js 43.3 KiB <{3}> <{5}> <{0}> ={2}= ={4}= ={6}= ={7}= ={9}= ={10}= ={11}= ={12}= ={13}= ={14}= ={1}= [rendered] [recorded] aggressive splitted
|
||||
> react-dom [0] ./example.js 2:0-22
|
||||
3 modules
|
||||
chunk {9} a0f973cb054f411fba45.js 44.4 KiB <{3}> <{5}> <{0}> ={2}= ={4}= ={6}= ={7}= ={8}= ={10}= ={11}= ={12}= ={13}= ={14}= ={1}= [rendered] [recorded] aggressive splitted
|
||||
> react-dom [0] ./example.js 2:0-22
|
||||
10 modules
|
||||
chunk {10} ee6461bbec846ab2c762.js 34 KiB <{3}> <{5}> <{0}> ={2}= ={4}= ={6}= ={7}= ={8}= ={9}= ={11}= ={12}= ={13}= ={14}= ={1}= [rendered] [recorded] aggressive splitted
|
||||
> react-dom [0] ./example.js 2:0-22
|
||||
16 modules
|
||||
chunk {11} 74249374b007623d16bf.js 48.4 KiB <{3}> <{5}> <{0}> ={2}= ={4}= ={6}= ={7}= ={8}= ={9}= ={10}= ={12}= ={13}= ={14}= ={1}= [rendered] [recorded] aggressive splitted
|
||||
> react-dom [0] ./example.js 2:0-22
|
||||
6 modules
|
||||
chunk {12} 0a6d10836900825087ce.js 46.2 KiB <{3}> <{5}> <{0}> ={2}= ={4}= ={6}= ={7}= ={8}= ={9}= ={10}= ={11}= ={13}= ={14}= ={1}= [rendered] [recorded] aggressive splitted
|
||||
> react-dom [0] ./example.js 2:0-22
|
||||
9 modules
|
||||
chunk {13} 5ec04d5529f6b78241e2.js 48.2 KiB <{3}> <{5}> <{0}> ={2}= ={4}= ={6}= ={7}= ={8}= ={9}= ={10}= ={11}= ={12}= ={14}= ={1}= [rendered] [recorded] aggressive splitted
|
||||
> react-dom [0] ./example.js 2:0-22
|
||||
20 modules
|
||||
chunk {14} 38a6975540caa0156886.js 46.6 KiB <{3}> <{5}> <{0}> ={2}= ={4}= ={6}= ={7}= ={8}= ={9}= ={10}= ={11}= ={12}= ={13}= ={1}= [rendered] [recorded] aggressive splitted
|
||||
> react-dom [0] ./example.js 2:0-22
|
||||
24 modules
|
||||
```
|
||||
|
||||
## Production mode
|
||||
|
|
@ -119,68 +119,68 @@ chunk {14} 763fbc691b4fe33d506e.js 18.9 KiB {0} {2} {3} [rendered]
|
|||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
39f63970b3a505be3348.js 10.6 KiB 7 [emitted]
|
||||
ae85856cebfcdd8c297c.js 4.88 KiB 0 [emitted]
|
||||
39b30b6e92b9a23bbe4d.js 15.1 KiB 2 [emitted]
|
||||
1eaba1ccd9861309a585.js 7.49 KiB 3 [emitted]
|
||||
46dbd7b5ea65ed2c7493.js 10.8 KiB 4 [emitted]
|
||||
1b86f4a2bde4e55b9437.js 12.5 KiB 5 [emitted]
|
||||
12df97cbb03e8f3fbf12.js 11.1 KiB 6 [emitted]
|
||||
b4ceaf41eafb58de0ffb.js 8.75 KiB 1 [emitted]
|
||||
cb73f4cb70c06c65b248.js 12.1 KiB 8 [emitted]
|
||||
4ec9445e60b5516c0459.js 9.93 KiB 9 [emitted]
|
||||
53cef345d9ccd6bb3876.js 13 KiB 10 [emitted]
|
||||
c5b86ebb82485218af01.js 4.99 KiB 11 [emitted]
|
||||
0309b4e1ec5aa2f66403.js 7.02 KiB 12 [emitted]
|
||||
48e2dcb305baa66eaaff.js 10.2 KiB 13 [emitted]
|
||||
0b3c96677d32cb9cb074.js 5.91 KiB 14 [emitted]
|
||||
Entrypoint main = 48e2dcb305baa66eaaff.js 0309b4e1ec5aa2f66403.js 0b3c96677d32cb9cb074.js
|
||||
chunk {0} ae85856cebfcdd8c297c.js 18.9 KiB {12} {13} {14} [rendered]
|
||||
> aggressive-splitted [30] ./example.js 2:0-22
|
||||
9 modules
|
||||
chunk {1} b4ceaf41eafb58de0ffb.js 48.5 KiB {12} {13} {14} [rendered] [recorded]
|
||||
> aggressive-splitted [30] ./example.js 2:0-22
|
||||
28 modules
|
||||
chunk {2} 39b30b6e92b9a23bbe4d.js 48.6 KiB {12} {13} {14} [rendered] [recorded]
|
||||
> aggressive-splitted [30] ./example.js 2:0-22
|
||||
7 modules
|
||||
chunk {3} 1eaba1ccd9861309a585.js 48.8 KiB {12} {13} {14} [rendered] [recorded]
|
||||
> aggressive-splitted [30] ./example.js 2:0-22
|
||||
9 modules
|
||||
chunk {4} 46dbd7b5ea65ed2c7493.js 48.7 KiB {12} {13} {14} [rendered] [recorded]
|
||||
> aggressive-splitted [30] ./example.js 2:0-22
|
||||
15 modules
|
||||
chunk {5} 1b86f4a2bde4e55b9437.js 48.7 KiB {12} {13} {14} [rendered] [recorded]
|
||||
> aggressive-splitted [30] ./example.js 2:0-22
|
||||
6 modules
|
||||
chunk {6} 12df97cbb03e8f3fbf12.js 48.8 KiB {12} {13} {14} [rendered] [recorded]
|
||||
> aggressive-splitted [30] ./example.js 2:0-22
|
||||
6 modules
|
||||
chunk {7} 39f63970b3a505be3348.js 48.7 KiB {12} {13} {14} [rendered] [recorded]
|
||||
> aggressive-splitted [30] ./example.js 2:0-22
|
||||
11 modules
|
||||
chunk {8} cb73f4cb70c06c65b248.js 48.6 KiB {12} {13} {14} [rendered] [recorded]
|
||||
> aggressive-splitted [30] ./example.js 2:0-22
|
||||
10 modules
|
||||
chunk {9} 4ec9445e60b5516c0459.js 48.8 KiB {12} {13} {14} [rendered] [recorded]
|
||||
> aggressive-splitted [30] ./example.js 2:0-22
|
||||
11 modules
|
||||
chunk {10} 53cef345d9ccd6bb3876.js 48.7 KiB {12} {13} {14} [rendered] [recorded]
|
||||
> aggressive-splitted [30] ./example.js 2:0-22
|
||||
7a1ec67d9e4e1019836a.js 14.8 KiB 7 [emitted]
|
||||
9baaf7bc0364c2600ef8.js 9.69 KiB 0 [emitted]
|
||||
cf3beff30352265c3fae.js 13.1 KiB 2 [emitted]
|
||||
0bc9e49d2884c20a78ae.js 7.89 KiB 3 [emitted]
|
||||
408e20e95f946dedfdd3.js 8.14 KiB 4 [emitted]
|
||||
5b44ef86854beead5c79.js 10.1 KiB 5 [emitted]
|
||||
2d761db260e810943d04.js 10.5 KiB 6 [emitted]
|
||||
148bbb5ef8fd203f5c99.js 9.97 KiB 1 [emitted]
|
||||
5efec1104bcbe14efad9.js 10.9 KiB 8 [emitted]
|
||||
050d4b543b70cc78b255.js 9.91 KiB 9 [emitted]
|
||||
2c42126f0455b98de2d0.js 12 KiB 10 [emitted]
|
||||
27d8a7d99dbd33243169.js 4.2 KiB 11 [emitted]
|
||||
f9403b4474b02c436f23.js 10.9 KiB 12 [emitted]
|
||||
97ad3a6439b7ef8470ec.js 6.41 KiB 13 [emitted]
|
||||
50362e240b6b01a16dd2.js 5.97 KiB 14 [emitted]
|
||||
Entrypoint main = 97ad3a6439b7ef8470ec.js f9403b4474b02c436f23.js 50362e240b6b01a16dd2.js
|
||||
chunk {0} 9baaf7bc0364c2600ef8.js 46.6 KiB <{13}> <{12}> <{14}> ={10}= ={9}= ={8}= ={7}= ={6}= ={5}= ={4}= ={3}= ={2}= ={1}= ={11}= [rendered] [recorded] aggressive splitted
|
||||
> react-dom [30] ./example.js 2:0-22
|
||||
24 modules
|
||||
chunk {11} c5b86ebb82485218af01.js 31.4 KiB {12} {13} {14} [rendered] [recorded]
|
||||
> aggressive-splitted [30] ./example.js 2:0-22
|
||||
3 modules
|
||||
chunk {12} 0309b4e1ec5aa2f66403.js 30.5 KiB [initial] [rendered] [recorded]
|
||||
> aggressive-splitted main [30] ./example.js
|
||||
3 modules
|
||||
chunk {13} 48e2dcb305baa66eaaff.js 48.8 KiB [entry] [rendered] [recorded]
|
||||
> aggressive-splitted main [30] ./example.js
|
||||
chunk {1} 148bbb5ef8fd203f5c99.js 48.2 KiB <{13}> <{12}> <{14}> ={10}= ={9}= ={8}= ={7}= ={6}= ={5}= ={4}= ={3}= ={2}= ={0}= ={11}= [rendered] [recorded] aggressive splitted
|
||||
> react-dom [30] ./example.js 2:0-22
|
||||
20 modules
|
||||
chunk {2} cf3beff30352265c3fae.js 46.2 KiB <{13}> <{12}> <{14}> ={10}= ={9}= ={8}= ={7}= ={6}= ={5}= ={4}= ={3}= ={1}= ={0}= ={11}= [rendered] [recorded] aggressive splitted
|
||||
> react-dom [30] ./example.js 2:0-22
|
||||
9 modules
|
||||
chunk {3} 0bc9e49d2884c20a78ae.js 48.4 KiB <{13}> <{12}> <{14}> ={10}= ={9}= ={8}= ={7}= ={6}= ={5}= ={4}= ={2}= ={1}= ={0}= ={11}= [rendered] [recorded] aggressive splitted
|
||||
> react-dom [30] ./example.js 2:0-22
|
||||
6 modules
|
||||
chunk {4} 408e20e95f946dedfdd3.js 34 KiB <{13}> <{12}> <{14}> ={10}= ={9}= ={8}= ={7}= ={6}= ={5}= ={3}= ={2}= ={1}= ={0}= ={11}= [rendered] [recorded] aggressive splitted
|
||||
> react-dom [30] ./example.js 2:0-22
|
||||
16 modules
|
||||
chunk {14} 0b3c96677d32cb9cb074.js 32.4 KiB [initial] [rendered]
|
||||
> aggressive-splitted main [30] ./example.js
|
||||
chunk {5} 5b44ef86854beead5c79.js 44.4 KiB <{13}> <{12}> <{14}> ={10}= ={9}= ={8}= ={7}= ={6}= ={4}= ={3}= ={2}= ={1}= ={0}= ={11}= [rendered] [recorded] aggressive splitted
|
||||
> react-dom [30] ./example.js 2:0-22
|
||||
10 modules
|
||||
chunk {6} 2d761db260e810943d04.js 43.3 KiB <{13}> <{12}> <{14}> ={10}= ={9}= ={8}= ={7}= ={5}= ={4}= ={3}= ={2}= ={1}= ={0}= ={11}= [rendered] [recorded] aggressive splitted
|
||||
> react-dom [30] ./example.js 2:0-22
|
||||
3 modules
|
||||
chunk {7} 7a1ec67d9e4e1019836a.js 62.3 KiB <{13}> <{12}> <{14}> ={10}= ={9}= ={8}= ={6}= ={5}= ={4}= ={3}= ={2}= ={1}= ={0}= ={11}= [rendered] [recorded] aggressive splitted
|
||||
> react-dom [30] ./example.js 2:0-22
|
||||
7 modules
|
||||
chunk {8} 5efec1104bcbe14efad9.js 46.3 KiB <{13}> <{12}> <{14}> ={10}= ={9}= ={7}= ={6}= ={5}= ={4}= ={3}= ={2}= ={1}= ={0}= ={11}= [rendered] [recorded] aggressive splitted
|
||||
> react-dom [30] ./example.js 2:0-22
|
||||
10 modules
|
||||
chunk {9} 050d4b543b70cc78b255.js 46.9 KiB <{13}> <{12}> <{14}> ={10}= ={8}= ={7}= ={6}= ={5}= ={4}= ={3}= ={2}= ={1}= ={0}= ={11}= [rendered] [recorded] aggressive splitted
|
||||
> react-dom [30] ./example.js 2:0-22
|
||||
8 modules
|
||||
chunk {10} 2c42126f0455b98de2d0.js 45.7 KiB <{13}> <{12}> <{14}> ={9}= ={8}= ={7}= ={6}= ={5}= ={4}= ={3}= ={2}= ={1}= ={0}= ={11}= [rendered] [recorded] aggressive splitted
|
||||
> react-dom [30] ./example.js 2:0-22
|
||||
23 modules
|
||||
chunk {11} 27d8a7d99dbd33243169.js 24.9 KiB <{13}> <{12}> <{14}> ={10}= ={9}= ={8}= ={7}= ={6}= ={5}= ={4}= ={3}= ={2}= ={1}= ={0}= [rendered]
|
||||
> react-dom [30] ./example.js 2:0-22
|
||||
3 modules
|
||||
chunk {12} f9403b4474b02c436f23.js 45.7 KiB ={13}= ={14}= >{10}< >{9}< >{8}< >{7}< >{6}< >{5}< >{4}< >{3}< >{2}< >{1}< >{0}< >{11}< [initial] [rendered] [recorded] aggressive splitted
|
||||
> ./example main
|
||||
9 modules
|
||||
chunk {13} 97ad3a6439b7ef8470ec.js 37.8 KiB ={12}= ={14}= >{10}< >{9}< >{8}< >{7}< >{6}< >{5}< >{4}< >{3}< >{2}< >{1}< >{0}< >{11}< [initial] [rendered] [recorded] aggressive splitted
|
||||
> ./example main
|
||||
8 modules
|
||||
chunk {14} 50362e240b6b01a16dd2.js 28.3 KiB ={13}= ={12}= >{10}< >{9}< >{8}< >{7}< >{6}< >{5}< >{4}< >{3}< >{2}< >{1}< >{0}< >{11}< [entry] [rendered]
|
||||
> ./example main
|
||||
[30] ./example.js 44 bytes {14} [built]
|
||||
+ 11 hidden modules
|
||||
+ 13 hidden modules
|
||||
```
|
||||
|
||||
## Records
|
||||
|
|
@ -535,265 +535,282 @@ chunk {14} 0b3c96677d32cb9cb074.js 32.4 KiB [initial] [rendered]
|
|||
},
|
||||
"chunks": {
|
||||
"byName": {},
|
||||
"byBlocks": {
|
||||
"example.js:0/0:11": 1,
|
||||
"example.js:0/0:1": 4,
|
||||
"example.js:0/0:4": 5,
|
||||
"example.js:0/0:5": 6,
|
||||
"example.js:0/0:3": 7,
|
||||
"example.js:0/0:10": 8,
|
||||
"example.js:0/0:9": 9,
|
||||
"example.js:0/0:2": 10,
|
||||
"example.js:0/0:7": 11,
|
||||
"example.js:0/0:8": 12,
|
||||
"example.js:0/0:0": 13,
|
||||
"example.js:0/0:6": 14
|
||||
"bySource": {
|
||||
"11 example.js react-dom": 1,
|
||||
"0 example.js react-dom": 2,
|
||||
"1 example.js react-dom": 4,
|
||||
"2 example.js react-dom": 6,
|
||||
"3 example.js react-dom": 7,
|
||||
"4 example.js react-dom": 8,
|
||||
"5 example.js react-dom": 9,
|
||||
"6 example.js react-dom": 10,
|
||||
"7 example.js react-dom": 11,
|
||||
"8 example.js react-dom": 12,
|
||||
"9 example.js react-dom": 13,
|
||||
"10 example.js react-dom": 14
|
||||
},
|
||||
"usedIds": {
|
||||
"0": 0,
|
||||
"1": 1,
|
||||
"2": 2,
|
||||
"3": 3,
|
||||
"4": 4,
|
||||
"5": 5,
|
||||
"6": 6,
|
||||
"7": 7,
|
||||
"8": 8,
|
||||
"9": 9,
|
||||
"10": 10,
|
||||
"11": 11,
|
||||
"12": 12,
|
||||
"13": 13,
|
||||
"14": 14
|
||||
}
|
||||
"usedIds": [
|
||||
0,
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
4,
|
||||
5,
|
||||
6,
|
||||
7,
|
||||
8,
|
||||
9,
|
||||
10,
|
||||
11,
|
||||
12,
|
||||
13,
|
||||
14
|
||||
]
|
||||
},
|
||||
"aggressiveSplits": [
|
||||
{
|
||||
"modules": [
|
||||
"../../node_modules/react-dom/lib/traverseAllChildren.js",
|
||||
"../../node_modules/react/lib/ReactComponentTreeHook.js",
|
||||
"../../node_modules/react-dom/lib/validateDOMNesting.js"
|
||||
"../../node_modules/fbjs/lib/EventListener.js",
|
||||
"../../node_modules/fbjs/lib/ExecutionEnvironment.js",
|
||||
"../../node_modules/fbjs/lib/camelize.js",
|
||||
"../../node_modules/fbjs/lib/camelizeStyleName.js",
|
||||
"../../node_modules/fbjs/lib/containsNode.js",
|
||||
"../../node_modules/fbjs/lib/createArrayFromMixed.js",
|
||||
"../../node_modules/fbjs/lib/createNodesFromMarkup.js",
|
||||
"../../node_modules/fbjs/lib/focusNode.js",
|
||||
"../../node_modules/fbjs/lib/getActiveElement.js",
|
||||
"../../node_modules/fbjs/lib/getMarkupWrap.js",
|
||||
"../../node_modules/fbjs/lib/getUnboundedScrollPosition.js",
|
||||
"../../node_modules/fbjs/lib/hyphenate.js",
|
||||
"../../node_modules/fbjs/lib/hyphenateStyleName.js",
|
||||
"../../node_modules/fbjs/lib/isNode.js",
|
||||
"../../node_modules/fbjs/lib/isTextNode.js",
|
||||
"../../node_modules/fbjs/lib/memoizeStringOnly.js",
|
||||
"../../node_modules/fbjs/lib/shallowEqual.js",
|
||||
"../../node_modules/process/browser.js",
|
||||
"../../node_modules/react-dom/index.js",
|
||||
"../../node_modules/react-dom/lib/ARIADOMPropertyConfig.js",
|
||||
"../../node_modules/react-dom/lib/AutoFocusUtils.js",
|
||||
"../../node_modules/react-dom/lib/BeforeInputEventPlugin.js",
|
||||
"../../node_modules/react-dom/lib/CSSProperty.js"
|
||||
],
|
||||
"hash": "ad733bf1033fc5a7a830729967f1aa3d",
|
||||
"id": 1
|
||||
},
|
||||
{
|
||||
"modules": [
|
||||
"../../node_modules/react/lib/React.js",
|
||||
"../../node_modules/object-assign/index.js",
|
||||
"../../node_modules/fbjs/lib/warning.js",
|
||||
"../../node_modules/fbjs/lib/emptyFunction.js",
|
||||
"../../node_modules/fbjs/lib/emptyObject.js",
|
||||
"../../node_modules/fbjs/lib/invariant.js",
|
||||
"../../node_modules/react/lib/PooledClass.js",
|
||||
"../../node_modules/react/lib/ReactCurrentOwner.js",
|
||||
"../../node_modules/react/lib/ReactElementSymbol.js",
|
||||
"../../node_modules/react/lib/KeyEscapeUtils.js",
|
||||
"../../node_modules/react/lib/ReactPropTypes.js",
|
||||
"../../node_modules/prop-types/factory.js",
|
||||
"../../node_modules/prop-types/lib/ReactPropTypesSecret.js",
|
||||
"../../node_modules/prop-types/checkPropTypes.js",
|
||||
"../../node_modules/react/lib/ReactVersion.js",
|
||||
"../../node_modules/create-react-class/factory.js"
|
||||
],
|
||||
"hash": "4a984680da6e56d398893f0087df99fd",
|
||||
"size": 46843,
|
||||
"hash": "987f929f287f8a6c88ac92f1fbcd45be",
|
||||
"id": 2
|
||||
},
|
||||
{
|
||||
"modules": [
|
||||
"../../node_modules/react/lib/ReactBaseClasses.js",
|
||||
"../../node_modules/react/lib/ReactChildren.js",
|
||||
"../../node_modules/prop-types/factoryWithTypeCheckers.js"
|
||||
"../../node_modules/create-react-class/factory.js",
|
||||
"../../node_modules/fbjs/lib/emptyFunction.js",
|
||||
"../../node_modules/fbjs/lib/emptyObject.js",
|
||||
"../../node_modules/fbjs/lib/invariant.js",
|
||||
"../../node_modules/fbjs/lib/warning.js",
|
||||
"../../node_modules/object-assign/index.js",
|
||||
"../../node_modules/prop-types/checkPropTypes.js",
|
||||
"../../node_modules/prop-types/factory.js"
|
||||
],
|
||||
"hash": "de45e35c6080cc33435c495b06d97616",
|
||||
"size": 38697,
|
||||
"hash": "bc5ed8b126130fde4f428f05cac600ce",
|
||||
"id": 3
|
||||
},
|
||||
{
|
||||
"modules": [
|
||||
"../../node_modules/react-dom/index.js",
|
||||
"../../node_modules/react-dom/lib/ARIADOMPropertyConfig.js",
|
||||
"../../node_modules/react-dom/lib/BeforeInputEventPlugin.js",
|
||||
"../../node_modules/fbjs/lib/ExecutionEnvironment.js",
|
||||
"../../node_modules/react-dom/lib/CSSPropertyOperations.js",
|
||||
"../../node_modules/react-dom/lib/CallbackQueue.js",
|
||||
"../../node_modules/fbjs/lib/createNodesFromMarkup.js",
|
||||
"../../node_modules/fbjs/lib/createArrayFromMixed.js",
|
||||
"../../node_modules/fbjs/lib/getMarkupWrap.js",
|
||||
"../../node_modules/react-dom/lib/AutoFocusUtils.js",
|
||||
"../../node_modules/fbjs/lib/focusNode.js",
|
||||
"../../node_modules/react-dom/lib/CSSProperty.js",
|
||||
"../../node_modules/fbjs/lib/camelizeStyleName.js",
|
||||
"../../node_modules/fbjs/lib/camelize.js",
|
||||
"../../node_modules/fbjs/lib/hyphenateStyleName.js",
|
||||
"../../node_modules/fbjs/lib/hyphenate.js",
|
||||
"../../node_modules/fbjs/lib/memoizeStringOnly.js",
|
||||
"../../node_modules/process/browser.js",
|
||||
"../../node_modules/fbjs/lib/shallowEqual.js",
|
||||
"../../node_modules/fbjs/lib/EventListener.js",
|
||||
"../../node_modules/fbjs/lib/getUnboundedScrollPosition.js",
|
||||
"../../node_modules/fbjs/lib/containsNode.js",
|
||||
"../../node_modules/fbjs/lib/isTextNode.js",
|
||||
"../../node_modules/fbjs/lib/isNode.js",
|
||||
"../../node_modules/fbjs/lib/getActiveElement.js"
|
||||
"../../node_modules/react-dom/lib/ChangeEventPlugin.js",
|
||||
"../../node_modules/react-dom/lib/DOMChildrenOperations.js",
|
||||
"../../node_modules/react-dom/lib/DOMLazyTree.js",
|
||||
"../../node_modules/react-dom/lib/DOMNamespaces.js",
|
||||
"../../node_modules/react-dom/lib/DOMProperty.js",
|
||||
"../../node_modules/react-dom/lib/DOMPropertyOperations.js"
|
||||
],
|
||||
"hash": "b9d30d332886e3897e04ddeadec79c0c",
|
||||
"size": 47979,
|
||||
"hash": "511009f3a8f06b7c54cbbcccac9d6dfb",
|
||||
"id": 4
|
||||
},
|
||||
{
|
||||
"modules": [
|
||||
"../../node_modules/react-dom/lib/DOMProperty.js",
|
||||
"../../node_modules/react-dom/lib/ChangeEventPlugin.js",
|
||||
"../../node_modules/react-dom/lib/DefaultEventPluginOrder.js",
|
||||
"../../node_modules/react-dom/lib/ReactComponentBrowserEnvironment.js",
|
||||
"../../node_modules/react-dom/lib/DOMChildrenOperations.js",
|
||||
"../../node_modules/react-dom/lib/DOMLazyTree.js",
|
||||
"../../node_modules/react-dom/lib/DOMNamespaces.js",
|
||||
"../../node_modules/react-dom/lib/Danger.js",
|
||||
"../../node_modules/react-dom/lib/CSSPropertyOperations.js",
|
||||
"../../node_modules/react-dom/lib/DOMPropertyOperations.js",
|
||||
"../../node_modules/react-dom/lib/KeyEscapeUtils.js"
|
||||
"../../node_modules/prop-types/factoryWithTypeCheckers.js",
|
||||
"../../node_modules/prop-types/lib/ReactPropTypesSecret.js",
|
||||
"../../node_modules/react/lib/KeyEscapeUtils.js",
|
||||
"../../node_modules/react/lib/PooledClass.js",
|
||||
"../../node_modules/react/lib/React.js",
|
||||
"../../node_modules/react/lib/ReactBaseClasses.js",
|
||||
"../../node_modules/react/lib/ReactChildren.js",
|
||||
"../../node_modules/react/lib/ReactCurrentOwner.js",
|
||||
"../../node_modules/react/lib/ReactDOMFactories.js"
|
||||
],
|
||||
"hash": "091d7e57346e564d3d09367243e71f29",
|
||||
"size": 46762,
|
||||
"hash": "2a784b823ab0da1e02933326e6e3f80f",
|
||||
"id": 5
|
||||
},
|
||||
{
|
||||
"modules": [
|
||||
"../../node_modules/react-dom/lib/ReactDOMComponentFlags.js",
|
||||
"../../node_modules/react-dom/lib/EventPropagators.js",
|
||||
"../../node_modules/react-dom/lib/Danger.js",
|
||||
"../../node_modules/react-dom/lib/DefaultEventPluginOrder.js",
|
||||
"../../node_modules/react-dom/lib/EnterLeaveEventPlugin.js",
|
||||
"../../node_modules/react-dom/lib/EventPluginHub.js",
|
||||
"../../node_modules/react-dom/lib/EventPluginRegistry.js",
|
||||
"../../node_modules/react-dom/lib/EventPluginUtils.js",
|
||||
"../../node_modules/react-dom/lib/EventPropagators.js",
|
||||
"../../node_modules/react-dom/lib/FallbackCompositionState.js",
|
||||
"../../node_modules/react-dom/lib/EnterLeaveEventPlugin.js",
|
||||
"../../node_modules/react-dom/lib/HTMLDOMPropertyConfig.js",
|
||||
"../../node_modules/react-dom/lib/LinkedValueUtils.js",
|
||||
"../../node_modules/react-dom/lib/ReactComponentEnvironment.js"
|
||||
"../../node_modules/react-dom/lib/KeyEscapeUtils.js"
|
||||
],
|
||||
"hash": "525a050e7b27998ce47bd47dc8a70b3d",
|
||||
"size": 47455,
|
||||
"hash": "0abfd767d2250ac9265a7fa790d9e9f5",
|
||||
"id": 6
|
||||
},
|
||||
{
|
||||
"modules": [
|
||||
"../../node_modules/react-dom/lib/ReactDOM.js",
|
||||
"../../node_modules/react-dom/lib/ReactDOMComponentTree.js",
|
||||
"../../node_modules/react-dom/lib/LinkedValueUtils.js",
|
||||
"../../node_modules/react-dom/lib/PooledClass.js",
|
||||
"../../node_modules/react-dom/lib/ReactDOMIDOperations.js",
|
||||
"../../node_modules/react-dom/lib/ReactBrowserEventEmitter.js",
|
||||
"../../node_modules/react-dom/lib/ReactDOMInput.js",
|
||||
"../../node_modules/react-dom/lib/ReactPropTypesSecret.js",
|
||||
"../../node_modules/react-dom/lib/ReactChildReconciler.js",
|
||||
"../../node_modules/react-dom/lib/ReactDOMEmptyComponent.js",
|
||||
"../../node_modules/react-dom/lib/ReactDOMContainerInfo.js",
|
||||
"../../node_modules/react-dom/lib/ReactDOMFeatureFlags.js"
|
||||
"../../node_modules/react-dom/lib/ReactComponentBrowserEnvironment.js",
|
||||
"../../node_modules/react-dom/lib/ReactComponentEnvironment.js",
|
||||
"../../node_modules/react-dom/lib/ReactCompositeComponent.js"
|
||||
],
|
||||
"hash": "1d1f50c6f480a313a28328a53aef55ca",
|
||||
"size": 63814,
|
||||
"hash": "aae9c6dac629dd3f112ead84c645f3fa",
|
||||
"id": 7
|
||||
},
|
||||
{
|
||||
"modules": [
|
||||
"../../node_modules/react-dom/lib/ReactFeatureFlags.js",
|
||||
"../../node_modules/react-dom/lib/ReactDOMOption.js",
|
||||
"../../node_modules/react-dom/lib/ReactDOMSelect.js",
|
||||
"../../node_modules/react-dom/lib/ReactCompositeComponent.js",
|
||||
"../../node_modules/react-dom/lib/ReactElementSymbol.js",
|
||||
"../../node_modules/react-dom/lib/ReactDOMTreeTraversal.js"
|
||||
"../../node_modules/react-dom/lib/ReactDOM.js",
|
||||
"../../node_modules/react-dom/lib/ReactDOMComponent.js",
|
||||
"../../node_modules/react-dom/lib/ReactDOMComponentFlags.js"
|
||||
],
|
||||
"hash": "46af055d8fc77c1333fd0dc173e0e0d8",
|
||||
"size": 44366,
|
||||
"hash": "cd98376ec90f2e366b9425f7247176e1",
|
||||
"id": 8
|
||||
},
|
||||
{
|
||||
"modules": [
|
||||
"../../node_modules/react-dom/lib/ReactDOMComponent.js",
|
||||
"../../node_modules/react-dom/lib/ReactEventEmitterMixin.js",
|
||||
"../../node_modules/react-dom/lib/ReactEmptyComponent.js",
|
||||
"../../node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js",
|
||||
"../../node_modules/react-dom/lib/ReactInjection.js",
|
||||
"../../node_modules/react-dom/lib/ReactDOMSelection.js"
|
||||
"../../node_modules/react-dom/lib/ReactDOMComponentTree.js",
|
||||
"../../node_modules/react-dom/lib/ReactDOMContainerInfo.js",
|
||||
"../../node_modules/react-dom/lib/ReactDOMEmptyComponent.js",
|
||||
"../../node_modules/react-dom/lib/ReactDOMFeatureFlags.js",
|
||||
"../../node_modules/react-dom/lib/ReactDOMIDOperations.js",
|
||||
"../../node_modules/react-dom/lib/ReactDOMInput.js",
|
||||
"../../node_modules/react-dom/lib/ReactDOMOption.js",
|
||||
"../../node_modules/react-dom/lib/ReactDOMSelect.js",
|
||||
"../../node_modules/react-dom/lib/ReactDOMSelection.js",
|
||||
"../../node_modules/react-dom/lib/ReactDOMTextComponent.js"
|
||||
],
|
||||
"hash": "d5f1ea3a0710998c9d82be964c021396",
|
||||
"size": 45476,
|
||||
"hash": "a0f973cb054f411fba45bd946c5bf6e3",
|
||||
"id": 9
|
||||
},
|
||||
{
|
||||
"modules": [
|
||||
"../../node_modules/react-dom/lib/ReactDefaultInjection.js",
|
||||
"../../node_modules/react-dom/lib/ReactErrorUtils.js",
|
||||
"../../node_modules/react-dom/lib/ReactRef.js",
|
||||
"../../node_modules/react-dom/lib/ReactInstrumentation.js",
|
||||
"../../node_modules/react-dom/lib/ReactDOMTextarea.js",
|
||||
"../../node_modules/react-dom/lib/ReactMultiChild.js",
|
||||
"../../node_modules/react-dom/lib/ReactInstanceMap.js",
|
||||
"../../node_modules/react-dom/lib/ReactNodeTypes.js",
|
||||
"../../node_modules/react-dom/lib/ReactHostComponent.js",
|
||||
"../../node_modules/react-dom/lib/ReactDOMTextComponent.js",
|
||||
"../../node_modules/react-dom/lib/ReactDOMTreeTraversal.js",
|
||||
"../../node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js",
|
||||
"../../node_modules/react-dom/lib/ReactDefaultInjection.js",
|
||||
"../../node_modules/react-dom/lib/ReactElementSymbol.js",
|
||||
"../../node_modules/react-dom/lib/ReactEmptyComponent.js",
|
||||
"../../node_modules/react-dom/lib/ReactErrorUtils.js",
|
||||
"../../node_modules/react-dom/lib/ReactEventEmitterMixin.js",
|
||||
"../../node_modules/react-dom/lib/ReactEventListener.js",
|
||||
"../../node_modules/react-dom/lib/ReactFeatureFlags.js",
|
||||
"../../node_modules/react-dom/lib/ReactHostComponent.js",
|
||||
"../../node_modules/react-dom/lib/ReactInjection.js",
|
||||
"../../node_modules/react-dom/lib/ReactInputSelection.js",
|
||||
"../../node_modules/react-dom/lib/ReactMarkupChecksum.js",
|
||||
"../../node_modules/react-dom/lib/ReactVersion.js",
|
||||
"../../node_modules/react-dom/lib/renderSubtreeIntoContainer.js"
|
||||
"../../node_modules/react-dom/lib/ReactInstanceMap.js",
|
||||
"../../node_modules/react-dom/lib/ReactInstrumentation.js",
|
||||
"../../node_modules/react-dom/lib/ReactMarkupChecksum.js"
|
||||
],
|
||||
"hash": "d12e724ddfa623596d6a24f7035e30be",
|
||||
"size": 34770,
|
||||
"hash": "ee6461bbec846ab2c7626a8d8fd1fb21",
|
||||
"id": 10
|
||||
},
|
||||
{
|
||||
"modules": [
|
||||
"../../node_modules/react-dom/lib/SyntheticCompositionEvent.js",
|
||||
"../../node_modules/react-dom/lib/ReactReconciler.js",
|
||||
"../../node_modules/react-dom/lib/ReactMount.js",
|
||||
"../../node_modules/react-dom/lib/ReactMultiChild.js",
|
||||
"../../node_modules/react-dom/lib/ReactNodeTypes.js",
|
||||
"../../node_modules/react-dom/lib/ReactOwner.js",
|
||||
"../../node_modules/react-dom/lib/ReactServerRenderingTransaction.js",
|
||||
"../../node_modules/react-dom/lib/ReactServerUpdateQueue.js",
|
||||
"../../node_modules/react-dom/lib/ReactReconcileTransaction.js",
|
||||
"../../node_modules/react-dom/lib/SyntheticAnimationEvent.js",
|
||||
"../../node_modules/react-dom/lib/SyntheticClipboardEvent.js",
|
||||
"../../node_modules/react-dom/lib/ReactMount.js"
|
||||
"../../node_modules/react-dom/lib/ReactPropTypesSecret.js",
|
||||
"../../node_modules/react-dom/lib/ReactReconcileTransaction.js"
|
||||
],
|
||||
"hash": "6cbad41d6996fe8e07a5537ce7e33865",
|
||||
"size": 49575,
|
||||
"hash": "74249374b007623d16bffa559688d7d5",
|
||||
"id": 11
|
||||
},
|
||||
{
|
||||
"modules": [
|
||||
"../../node_modules/react-dom/lib/SyntheticEvent.js",
|
||||
"../../node_modules/react-dom/lib/ReactUpdates.js",
|
||||
"../../node_modules/react-dom/lib/ReactReconciler.js",
|
||||
"../../node_modules/react-dom/lib/ReactRef.js",
|
||||
"../../node_modules/react-dom/lib/ReactServerRenderingTransaction.js",
|
||||
"../../node_modules/react-dom/lib/ReactServerUpdateQueue.js",
|
||||
"../../node_modules/react-dom/lib/ReactUpdateQueue.js",
|
||||
"../../node_modules/react-dom/lib/ReactUpdates.js",
|
||||
"../../node_modules/react-dom/lib/ReactVersion.js",
|
||||
"../../node_modules/react-dom/lib/SVGDOMPropertyConfig.js",
|
||||
"../../node_modules/react-dom/lib/SelectEventPlugin.js",
|
||||
"../../node_modules/react-dom/lib/SimpleEventPlugin.js",
|
||||
"../../node_modules/react-dom/lib/SyntheticDragEvent.js"
|
||||
"../../node_modules/react-dom/lib/SelectEventPlugin.js"
|
||||
],
|
||||
"hash": "0bb84ee671fc256e158ebb155797950a",
|
||||
"size": 47320,
|
||||
"hash": "0a6d10836900825087ce02acffa0b1c0",
|
||||
"id": 12
|
||||
},
|
||||
{
|
||||
"modules": [
|
||||
"../../node_modules/react-dom/lib/accumulateInto.js",
|
||||
"../../node_modules/react-dom/lib/forEachAccumulated.js",
|
||||
"../../node_modules/react-dom/lib/getTextContentAccessor.js",
|
||||
"../../node_modules/react-dom/lib/SyntheticInputEvent.js",
|
||||
"../../node_modules/react-dom/lib/Transaction.js",
|
||||
"../../node_modules/react-dom/lib/getEventTarget.js",
|
||||
"../../node_modules/react-dom/lib/isEventSupported.js",
|
||||
"../../node_modules/react-dom/lib/SyntheticMouseEvent.js",
|
||||
"../../node_modules/react-dom/lib/SyntheticUIEvent.js",
|
||||
"../../node_modules/react-dom/lib/ViewportMetrics.js",
|
||||
"../../node_modules/react-dom/lib/getEventModifierState.js",
|
||||
"../../node_modules/react-dom/lib/createMicrosoftUnsafeLocalFunction.js",
|
||||
"../../node_modules/react-dom/lib/escapeTextContentForBrowser.js",
|
||||
"../../node_modules/react-dom/lib/dangerousStyleValue.js",
|
||||
"../../node_modules/react-dom/lib/quoteAttributeValueForBrowser.js",
|
||||
"../../node_modules/react-dom/lib/getIteratorFn.js",
|
||||
"../../node_modules/react-dom/lib/flattenChildren.js",
|
||||
"../../node_modules/react-dom/lib/getNodeForCharacterOffset.js",
|
||||
"../../node_modules/react-dom/lib/SimpleEventPlugin.js",
|
||||
"../../node_modules/react-dom/lib/SyntheticAnimationEvent.js",
|
||||
"../../node_modules/react-dom/lib/SyntheticClipboardEvent.js",
|
||||
"../../node_modules/react-dom/lib/SyntheticCompositionEvent.js",
|
||||
"../../node_modules/react-dom/lib/SyntheticDragEvent.js",
|
||||
"../../node_modules/react-dom/lib/SyntheticEvent.js",
|
||||
"../../node_modules/react-dom/lib/SyntheticFocusEvent.js",
|
||||
"../../node_modules/react-dom/lib/SyntheticInputEvent.js",
|
||||
"../../node_modules/react-dom/lib/SyntheticKeyboardEvent.js",
|
||||
"../../node_modules/react-dom/lib/getEventCharCode.js",
|
||||
"../../node_modules/react-dom/lib/getEventKey.js",
|
||||
"../../node_modules/react-dom/lib/SyntheticMouseEvent.js",
|
||||
"../../node_modules/react-dom/lib/SyntheticTouchEvent.js",
|
||||
"../../node_modules/react-dom/lib/SyntheticTransitionEvent.js",
|
||||
"../../node_modules/react-dom/lib/SyntheticUIEvent.js",
|
||||
"../../node_modules/react-dom/lib/SyntheticWheelEvent.js",
|
||||
"../../node_modules/react-dom/lib/Transaction.js",
|
||||
"../../node_modules/react-dom/lib/ViewportMetrics.js",
|
||||
"../../node_modules/react-dom/lib/accumulateInto.js",
|
||||
"../../node_modules/react-dom/lib/adler32.js",
|
||||
"../../node_modules/react-dom/lib/findDOMNode.js",
|
||||
"../../node_modules/react-dom/lib/getHostComponentFromComposite.js"
|
||||
"../../node_modules/react-dom/lib/createMicrosoftUnsafeLocalFunction.js",
|
||||
"../../node_modules/react-dom/lib/dangerousStyleValue.js"
|
||||
],
|
||||
"hash": "c8536008639de2173e512fbe0763df49",
|
||||
"size": 49350,
|
||||
"hash": "5ec04d5529f6b78241e25db6f0254a6f",
|
||||
"id": 13
|
||||
},
|
||||
{
|
||||
"modules": [
|
||||
"../../node_modules/react-dom/lib/escapeTextContentForBrowser.js",
|
||||
"../../node_modules/react-dom/lib/findDOMNode.js",
|
||||
"../../node_modules/react-dom/lib/flattenChildren.js",
|
||||
"../../node_modules/react-dom/lib/forEachAccumulated.js",
|
||||
"../../node_modules/react-dom/lib/getEventCharCode.js",
|
||||
"../../node_modules/react-dom/lib/getEventKey.js",
|
||||
"../../node_modules/react-dom/lib/getEventModifierState.js",
|
||||
"../../node_modules/react-dom/lib/getEventTarget.js",
|
||||
"../../node_modules/react-dom/lib/getHostComponentFromComposite.js",
|
||||
"../../node_modules/react-dom/lib/getIteratorFn.js",
|
||||
"../../node_modules/react-dom/lib/getNodeForCharacterOffset.js",
|
||||
"../../node_modules/react-dom/lib/getTextContentAccessor.js",
|
||||
"../../node_modules/react-dom/lib/getVendorPrefixedEventName.js",
|
||||
"../../node_modules/react-dom/lib/inputValueTracking.js",
|
||||
"../../node_modules/react-dom/lib/instantiateReactComponent.js",
|
||||
"../../node_modules/react-dom/lib/isEventSupported.js",
|
||||
"../../node_modules/react-dom/lib/isTextInputElement.js",
|
||||
"../../node_modules/react-dom/lib/quoteAttributeValueForBrowser.js",
|
||||
"../../node_modules/react-dom/lib/reactProdInvariant.js",
|
||||
"../../node_modules/react-dom/lib/renderSubtreeIntoContainer.js",
|
||||
"../../node_modules/react-dom/lib/setInnerHTML.js",
|
||||
"../../node_modules/react-dom/lib/setTextContent.js",
|
||||
"../../node_modules/react-dom/lib/shouldUpdateReactComponent.js",
|
||||
"../../node_modules/react-dom/lib/traverseAllChildren.js"
|
||||
],
|
||||
"size": 47718,
|
||||
"hash": "38a6975540caa0156886a92323a43231",
|
||||
"id": 14
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,33 +2,27 @@
|
|||
|
||||
``` javascript
|
||||
var path = require("path");
|
||||
var CommonsChunkPlugin = require("../../lib/optimize/CommonsChunkPlugin");
|
||||
module.exports = {
|
||||
// mode: "development || "production",
|
||||
entry: {
|
||||
// The entry points for the pages
|
||||
pageA: "./aEntry",
|
||||
pageB: "./bEntry",
|
||||
|
||||
// This file contains common modules but also the router entry
|
||||
"commons": "./router"
|
||||
// They also contains router
|
||||
pageA: ["./aEntry", "./router"],
|
||||
pageB: ["./bEntry", "./router"],
|
||||
},
|
||||
output: {
|
||||
path: path.join(__dirname, "dist"),
|
||||
publicPath: "js/",
|
||||
filename: "[name].bundle.js",
|
||||
chunkFilename: "[id].chunk.js"
|
||||
chunkFilename: "[name].chunk.js"
|
||||
},
|
||||
plugins: [
|
||||
// Extract common modules from the entries to the commons.js file
|
||||
// This is optional, but good for performance.
|
||||
new CommonsChunkPlugin({
|
||||
name: "commons",
|
||||
filename: "commons.js"
|
||||
})
|
||||
// The pages cannot run without the commons.js file now.
|
||||
],
|
||||
optimization: {
|
||||
// Extract common modules from initial chunks too
|
||||
// This is optional, but good for performance.
|
||||
splitChunks: {
|
||||
chunks: "all",
|
||||
minSize: 0 // This example is too small
|
||||
},
|
||||
occurrenceOrder: true // To keep filename consistent between different modes (for example building only)
|
||||
}
|
||||
};
|
||||
|
|
@ -70,15 +64,9 @@ window.onLinkToPage = function onLinkToPage(name) { // name is "a" or "b"
|
|||
// overwriting the RegExp with the ContextReplacementPlugin, or
|
||||
// using the require.context method.
|
||||
|
||||
// The bundle-loader is used to create a chunk from the page
|
||||
// -> Pages are only loaded on demand
|
||||
|
||||
// This line may throw a exception on runtime if the page wasn't found.
|
||||
var pageBundle = require("bundle-loader!./" + name + "Page");
|
||||
|
||||
// Wait until the chunk is loaded
|
||||
pageBundle(function(page) {
|
||||
render(page);
|
||||
import(/* webpackChunkName: "[request]" */`./${name}Page`).then(page => {;
|
||||
render(page.default);
|
||||
});
|
||||
}
|
||||
```
|
||||
|
|
@ -89,13 +77,103 @@ window.onLinkToPage = function onLinkToPage(name) { // name is "a" or "b"
|
|||
<html>
|
||||
<head></head>
|
||||
<body>
|
||||
<script src="js/commons.js" charset="utf-8"></script>
|
||||
<script src="js/pageA.bundle.js" charset="utf-8"></script>
|
||||
<script async src="dist/pageA~pageB.chunk.js" charset="utf-8"></script>
|
||||
<script async src="dist/aPage.chunk.js" charset="utf-8"></script>
|
||||
<script async src="dist/pageA.bundle.js" charset="utf-8"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# dist/commons.js
|
||||
# dist/pageA~pageB.chunk.js
|
||||
|
||||
``` javascript
|
||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],[
|
||||
/* 0 */
|
||||
/*!*******************!*\
|
||||
!*** ./render.js ***!
|
||||
\*******************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports = function(page) {
|
||||
console.log(page());
|
||||
};
|
||||
|
||||
/***/ }),
|
||||
/* 1 */
|
||||
/*!*******************!*\
|
||||
!*** ./router.js ***!
|
||||
\*******************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
var render = __webpack_require__(/*! ./render */ 0);
|
||||
|
||||
// Event when another page should be opened
|
||||
// Maybe hook click on links, hashchange or popstate
|
||||
window.onLinkToPage = function onLinkToPage(name) { // name is "a" or "b"
|
||||
// require the page with a dynamic require
|
||||
|
||||
// It's important that this require only matches the pages
|
||||
// elsewise there is blood in the bundle. Here this is done with a
|
||||
// specific file prefix. It's also possible to use a directory,
|
||||
// overwriting the RegExp with the ContextReplacementPlugin, or
|
||||
// using the require.context method.
|
||||
|
||||
// This line may throw a exception on runtime if the page wasn't found.
|
||||
__webpack_require__(6)(`./${name}Page`).then(page => {;
|
||||
render(page.default);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/***/ }),
|
||||
/* 2 */,
|
||||
/* 3 */,
|
||||
/* 4 */,
|
||||
/* 5 */,
|
||||
/* 6 */
|
||||
/*!********************************************!*\
|
||||
!*** . lazy ^\.\/.*Page$ namespace object ***!
|
||||
\********************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
var map = {
|
||||
"./aPage": [
|
||||
3,
|
||||
1
|
||||
],
|
||||
"./bPage": [
|
||||
2,
|
||||
0
|
||||
]
|
||||
};
|
||||
function webpackAsyncContext(req) {
|
||||
var ids = map[req];
|
||||
if(!ids) {
|
||||
return Promise.resolve().then(function() {
|
||||
var e = new Error('Cannot find module "' + req + '".');
|
||||
e.code = 'MODULE_NOT_FOUND';
|
||||
throw e;
|
||||
});
|
||||
}
|
||||
return __webpack_require__.e(ids[1]).then(function() {
|
||||
var module = __webpack_require__(ids[0]);
|
||||
return (typeof module === "object" && module && module.__esModule ? module : /* fake namespace object */ { "default": module });
|
||||
});
|
||||
}
|
||||
webpackAsyncContext.keys = function webpackAsyncContextKeys() {
|
||||
return Object.keys(map);
|
||||
};
|
||||
webpackAsyncContext.id = 6;
|
||||
module.exports = webpackAsyncContext;
|
||||
|
||||
/***/ })
|
||||
]]);
|
||||
```
|
||||
|
||||
# dist/pageA.bundle.js
|
||||
|
||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||
|
||||
|
|
@ -103,10 +181,12 @@ window.onLinkToPage = function onLinkToPage(name) { // name is "a" or "b"
|
|||
/******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // install a JSONP callback for chunk loading
|
||||
/******/ function webpackJsonpCallback(data) {
|
||||
/******/ var chunkIds = data[0], moreModules = data[1], executeModules = data[2];
|
||||
/******/ var chunkIds = data[0];
|
||||
/******/ var moreModules = data[1]
|
||||
/******/ var executeModules = data[2];
|
||||
/******/ // add "moreModules" to the modules object,
|
||||
/******/ // then flag all "chunkIds" as loaded and fire callback
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [], result;
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [];
|
||||
/******/ for(;i < chunkIds.length; i++) {
|
||||
/******/ chunkId = chunkIds[i];
|
||||
/******/ if(installedChunks[chunkId]) {
|
||||
|
|
@ -123,22 +203,29 @@ window.onLinkToPage = function onLinkToPage(name) { // name is "a" or "b"
|
|||
/******/ while(resolves.length) {
|
||||
/******/ resolves.shift()();
|
||||
/******/ }
|
||||
/******/ scheduledModules.push.apply(scheduledModules, executeModules || []);
|
||||
/******/
|
||||
/******/ for(i = 0; i < scheduledModules.length; i++) {
|
||||
/******/ var scheduledModule = scheduledModules[i];
|
||||
/******/ // add entry modules from loaded chunk to deferred list
|
||||
/******/ deferredModules.push.apply(deferredModules, executeModules || []);
|
||||
/******/
|
||||
/******/ // run deferred modules when all chunks ready
|
||||
/******/ return checkDeferredModules();
|
||||
/******/ };
|
||||
/******/ function checkDeferredModules() {
|
||||
/******/ var result;
|
||||
/******/ for(var i = 0; i < deferredModules.length; i++) {
|
||||
/******/ var deferredModule = deferredModules[i];
|
||||
/******/ var fullfilled = true;
|
||||
/******/ for(var j = 1; j < scheduledModule.length; j++) {
|
||||
/******/ var depId = scheduledModule[j];
|
||||
/******/ for(var j = 1; j < deferredModule.length; j++) {
|
||||
/******/ var depId = deferredModule[j];
|
||||
/******/ if(installedChunks[depId] !== 0) fullfilled = false;
|
||||
/******/ }
|
||||
/******/ if(fullfilled) {
|
||||
/******/ scheduledModules.splice(i--, 1);
|
||||
/******/ result = __webpack_require__(__webpack_require__.s = scheduledModule[0]);
|
||||
/******/ deferredModules.splice(i--, 1);
|
||||
/******/ result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ return result;
|
||||
/******/ };
|
||||
/******/ }
|
||||
/******/
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
|
|
@ -148,7 +235,7 @@ window.onLinkToPage = function onLinkToPage(name) { // name is "a" or "b"
|
|||
/******/ 4: 0
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ var scheduledModules = [];
|
||||
/******/ var deferredModules = [];
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
|
|
@ -205,7 +292,7 @@ window.onLinkToPage = function onLinkToPage(name) { // name is "a" or "b"
|
|||
/******/ if (__webpack_require__.nc) {
|
||||
/******/ script.setAttribute("nonce", __webpack_require__.nc);
|
||||
/******/ }
|
||||
/******/ script.src = __webpack_require__.p + "" + chunkId + ".chunk.js";
|
||||
/******/ script.src = __webpack_require__.p + "" + ({"0":"bPage"}[chunkId]||chunkId) + ".chunk.js";
|
||||
/******/ var timeout = setTimeout(function(){
|
||||
/******/ onScriptComplete({ type: 'timeout', target: script });
|
||||
/******/ }, 120000);
|
||||
|
|
@ -274,13 +361,17 @@ window.onLinkToPage = function onLinkToPage(name) { // name is "a" or "b"
|
|||
/******/ __webpack_require__.oe = function(err) { console.error(err); throw err; };
|
||||
/******/
|
||||
/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
|
||||
/******/ var parentJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ jsonpArray.push = webpackJsonpCallback;
|
||||
/******/ jsonpArray = jsonpArray.slice();
|
||||
/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
|
||||
/******/ var parentJsonpFunction = oldJsonpFunction;
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 6);
|
||||
/******/
|
||||
/******/ // add entry module to deferred list
|
||||
/******/ deferredModules.push([8,1,2]);
|
||||
/******/ // run deferred modules when ready
|
||||
/******/ return checkDeferredModules();
|
||||
/******/ })
|
||||
/************************************************************************/
|
||||
```
|
||||
|
|
@ -288,145 +379,43 @@ window.onLinkToPage = function onLinkToPage(name) { // name is "a" or "b"
|
|||
</details>
|
||||
|
||||
``` javascript
|
||||
/******/ ([
|
||||
/* 0 */
|
||||
/******/ ({
|
||||
|
||||
/***/ 7:
|
||||
/*!*******************!*\
|
||||
!*** ./render.js ***!
|
||||
\*******************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports = function(page) {
|
||||
console.log(page());
|
||||
};
|
||||
|
||||
/***/ }),
|
||||
/* 1 */,
|
||||
/* 2 */,
|
||||
/* 3 */
|
||||
/*!*******************************************************!*\
|
||||
!*** (webpack)/node_modules/bundle-loader!./bPage.js ***!
|
||||
\*******************************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
var cbs = [],
|
||||
data;
|
||||
module.exports = function(cb) {
|
||||
if(cbs) cbs.push(cb);
|
||||
else cb(data);
|
||||
}
|
||||
__webpack_require__.e(/*! require.ensure */ 1).then((function(require) {
|
||||
data = __webpack_require__(/*! !./bPage.js */ 1);
|
||||
var callbacks = cbs;
|
||||
cbs = null;
|
||||
for(var i = 0, l = callbacks.length; i < l; i++) {
|
||||
callbacks[i](data);
|
||||
}
|
||||
}).bind(null, __webpack_require__)).catch(__webpack_require__.oe);
|
||||
|
||||
/***/ }),
|
||||
/* 4 */
|
||||
/*!*******************************************************!*\
|
||||
!*** (webpack)/node_modules/bundle-loader!./aPage.js ***!
|
||||
\*******************************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
var cbs = [],
|
||||
data;
|
||||
module.exports = function(cb) {
|
||||
if(cbs) cbs.push(cb);
|
||||
else cb(data);
|
||||
}
|
||||
__webpack_require__.e(/*! require.ensure */ 0).then((function(require) {
|
||||
data = __webpack_require__(/*! !./aPage.js */ 2);
|
||||
var callbacks = cbs;
|
||||
cbs = null;
|
||||
for(var i = 0, l = callbacks.length; i < l; i++) {
|
||||
callbacks[i](data);
|
||||
}
|
||||
}).bind(null, __webpack_require__)).catch(__webpack_require__.oe);
|
||||
|
||||
/***/ }),
|
||||
/* 5 */
|
||||
/*!****************************************************************!*\
|
||||
!*** . sync (webpack)/node_modules/bundle-loader ^\.\/.*Page$ ***!
|
||||
\****************************************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
var map = {
|
||||
"./aPage": 4,
|
||||
"./bPage": 3
|
||||
};
|
||||
|
||||
|
||||
function webpackContext(req) {
|
||||
var id = webpackContextResolve(req);
|
||||
var module = __webpack_require__(id);
|
||||
return module;
|
||||
}
|
||||
function webpackContextResolve(req) {
|
||||
var id = map[req];
|
||||
if(!(id + 1)) { // check for number or string
|
||||
var e = new Error('Cannot find module "' + req + '".');
|
||||
e.code = 'MODULE_NOT_FOUND';
|
||||
throw e;
|
||||
}
|
||||
return id;
|
||||
}
|
||||
webpackContext.keys = function webpackContextKeys() {
|
||||
return Object.keys(map);
|
||||
};
|
||||
webpackContext.resolve = webpackContextResolve;
|
||||
module.exports = webpackContext;
|
||||
webpackContext.id = 5;
|
||||
|
||||
/***/ }),
|
||||
/* 6 */
|
||||
/*!*******************!*\
|
||||
!*** ./router.js ***!
|
||||
!*** ./aEntry.js ***!
|
||||
\*******************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
// Just show the page "a"
|
||||
var render = __webpack_require__(/*! ./render */ 0);
|
||||
render(__webpack_require__(/*! ./aPage */ 3));
|
||||
|
||||
// Event when another page should be opened
|
||||
// Maybe hook click on links, hashchange or popstate
|
||||
window.onLinkToPage = function onLinkToPage(name) { // name is "a" or "b"
|
||||
// require the page with a dynamic require
|
||||
/***/ }),
|
||||
|
||||
// It's important that this require only matches the pages
|
||||
// elsewise there is blood in the bundle. Here this is done with a
|
||||
// specific file prefix. It's also possible to use a directory,
|
||||
// overwriting the RegExp with the ContextReplacementPlugin, or
|
||||
// using the require.context method.
|
||||
/***/ 8:
|
||||
/*!*******************************!*\
|
||||
!*** multi ./aEntry ./router ***!
|
||||
\*******************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
// The bundle-loader is used to create a chunk from the page
|
||||
// -> Pages are only loaded on demand
|
||||
|
||||
// This line may throw a exception on runtime if the page wasn't found.
|
||||
var pageBundle = __webpack_require__(5)("./" + name + "Page");
|
||||
|
||||
// Wait until the chunk is loaded
|
||||
pageBundle(function(page) {
|
||||
render(page);
|
||||
});
|
||||
}
|
||||
__webpack_require__(/*! ./aEntry */7);
|
||||
module.exports = __webpack_require__(/*! ./router */1);
|
||||
|
||||
|
||||
/***/ })
|
||||
/******/ ]);
|
||||
|
||||
/******/ });
|
||||
```
|
||||
|
||||
# dist/pageA.bundle.js
|
||||
# dist/aPage.chunk.js
|
||||
|
||||
``` javascript
|
||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[3],{
|
||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],{
|
||||
|
||||
/***/ 2:
|
||||
/***/ 3:
|
||||
/*!******************!*\
|
||||
!*** ./aPage.js ***!
|
||||
\******************/
|
||||
|
|
@ -437,42 +426,9 @@ module.exports = function() {
|
|||
return "This is page A.";
|
||||
};
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ 8:
|
||||
/*!*******************!*\
|
||||
!*** ./aEntry.js ***!
|
||||
\*******************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
// Just show the page "a"
|
||||
var render = __webpack_require__(/*! ./render */ 0);
|
||||
render(__webpack_require__(/*! ./aPage */ 2));
|
||||
|
||||
/***/ })
|
||||
|
||||
},[[8,4,3]]]);
|
||||
```
|
||||
|
||||
# dist/1.chunk.js
|
||||
|
||||
``` javascript
|
||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
|
||||
/* 0 */,
|
||||
/* 1 */
|
||||
/*!******************!*\
|
||||
!*** ./bPage.js ***!
|
||||
\******************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports = function() {
|
||||
return "This is page B.";
|
||||
};
|
||||
|
||||
/***/ })
|
||||
]]);
|
||||
}]);
|
||||
```
|
||||
|
||||
# Info
|
||||
|
|
@ -482,53 +438,52 @@ module.exports = function() {
|
|||
```
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
0.chunk.js 293 bytes 0 [emitted]
|
||||
1.chunk.js 299 bytes 1 [emitted]
|
||||
pageB.bundle.js 614 bytes 2 [emitted] pageB
|
||||
pageA.bundle.js 614 bytes 3 [emitted] pageA
|
||||
commons.js 10.7 KiB 4 [emitted] commons
|
||||
Entrypoint pageA = commons.js pageA.bundle.js
|
||||
Entrypoint pageB = commons.js pageB.bundle.js
|
||||
Entrypoint commons = commons.js
|
||||
chunk {0} 0.chunk.js 61 bytes {4} [rendered]
|
||||
> [4] (webpack)/node_modules/bundle-loader!./aPage.js 7:0-14:2
|
||||
[2] ./aPage.js 61 bytes {0} {3} [built]
|
||||
cjs require !!./aPage.js [4] (webpack)/node_modules/bundle-loader!./aPage.js 8:8-31
|
||||
cjs require ./aPage [8] ./aEntry.js 3:7-25
|
||||
chunk {1} 1.chunk.js 61 bytes {4} [rendered]
|
||||
> [3] (webpack)/node_modules/bundle-loader!./bPage.js 7:0-14:2
|
||||
[1] ./bPage.js 61 bytes {1} {2} [built]
|
||||
cjs require !!./bPage.js [3] (webpack)/node_modules/bundle-loader!./bPage.js 8:8-31
|
||||
cjs require ./bPage [7] ./bEntry.js 3:7-25
|
||||
chunk {2} pageB.bundle.js (pageB) 150 bytes {4} [initial] [rendered]
|
||||
> pageB [7] ./bEntry.js
|
||||
[1] ./bPage.js 61 bytes {1} {2} [built]
|
||||
cjs require !!./bPage.js [3] (webpack)/node_modules/bundle-loader!./bPage.js 8:8-31
|
||||
cjs require ./bPage [7] ./bEntry.js 3:7-25
|
||||
[7] ./bEntry.js 89 bytes {2} [built]
|
||||
single entry ./bEntry pageB
|
||||
chunk {3} pageA.bundle.js (pageA) 150 bytes {4} [initial] [rendered]
|
||||
> pageA [8] ./aEntry.js
|
||||
[2] ./aPage.js 61 bytes {0} {3} [built]
|
||||
cjs require !!./aPage.js [4] (webpack)/node_modules/bundle-loader!./aPage.js 8:8-31
|
||||
cjs require ./aPage [8] ./aEntry.js 3:7-25
|
||||
[8] ./aEntry.js 89 bytes {3} [built]
|
||||
single entry ./aEntry pageA
|
||||
chunk {4} commons.js (commons) 1.67 KiB [entry] [rendered]
|
||||
> commons [6] ./router.js
|
||||
[0] ./render.js 60 bytes {4} [built]
|
||||
cjs require ./render [6] ./router.js 1:13-32
|
||||
cjs require ./render [7] ./bEntry.js 2:13-32
|
||||
cjs require ./render [8] ./aEntry.js 2:13-32
|
||||
[3] (webpack)/node_modules/bundle-loader!./bPage.js 282 bytes {4} [optional] [built]
|
||||
context element ./bPage [5] . sync (webpack)/node_modules/bundle-loader ^\.\/.*Page$ ./bPage
|
||||
[4] (webpack)/node_modules/bundle-loader!./aPage.js 282 bytes {4} [optional] [built]
|
||||
context element ./aPage [5] . sync (webpack)/node_modules/bundle-loader ^\.\/.*Page$ ./aPage
|
||||
[5] . sync (webpack)/node_modules/bundle-loader ^\.\/.*Page$ 184 bytes {4} [built]
|
||||
cjs require context bundle-loader!. [6] ./router.js 18:18-61
|
||||
[6] ./router.js 903 bytes {4} [built]
|
||||
single entry ./router commons
|
||||
Asset Size Chunks Chunk Names
|
||||
bPage.chunk.js 293 bytes 0 [emitted] bPage
|
||||
aPage.chunk.js 293 bytes 1 [emitted] aPage
|
||||
pageA~pageB.chunk.js 2.16 KiB 2 [emitted] pageA~pageB
|
||||
pageB.bundle.js 8.2 KiB 3 [emitted] pageB
|
||||
pageA.bundle.js 8.2 KiB 4 [emitted] pageA
|
||||
Entrypoint pageA = aPage.chunk.js pageA~pageB.chunk.js pageA.bundle.js
|
||||
Entrypoint pageB = bPage.chunk.js pageA~pageB.chunk.js pageB.bundle.js
|
||||
chunk {0} bPage.chunk.js (bPage) 61 bytes <{1}> <{2}> <{4}> ={2}= ={3}= >{1}< [rendered] reused as split chunk
|
||||
> ./bPage [6] . lazy ^\.\/.*Page$ namespace object ./bPage
|
||||
> ./bPage [6] . lazy ^\.\/.*Page$ namespace object ./bPage
|
||||
> pageB
|
||||
[2] ./bPage.js 61 bytes {0} [built]
|
||||
cjs require ./bPage [4] ./bEntry.js 3:7-25
|
||||
context element ./bPage [6] . lazy ^\.\/.*Page$ namespace object ./bPage
|
||||
chunk {1} aPage.chunk.js (aPage) 61 bytes <{0}> <{2}> <{3}> ={2}= ={4}= >{0}< [rendered] reused as split chunk
|
||||
> ./aPage [6] . lazy ^\.\/.*Page$ namespace object ./aPage
|
||||
> ./aPage [6] . lazy ^\.\/.*Page$ namespace object ./aPage
|
||||
> pageA
|
||||
[3] ./aPage.js 61 bytes {1} [built]
|
||||
context element ./aPage [6] . lazy ^\.\/.*Page$ namespace object ./aPage
|
||||
cjs require ./aPage [7] ./aEntry.js 3:7-25
|
||||
chunk {2} pageA~pageB.chunk.js (pageA~pageB) 970 bytes ={0}= ={3}= ={1}= ={4}= >{1}< >{0}< [initial] [rendered] split chunk (name: pageA~pageB)
|
||||
> pageB
|
||||
> pageA
|
||||
[0] ./render.js 60 bytes {2} [built]
|
||||
cjs require ./render [1] ./router.js 1:13-32
|
||||
cjs require ./render [4] ./bEntry.js 2:13-32
|
||||
cjs require ./render [7] ./aEntry.js 2:13-32
|
||||
[1] ./router.js 750 bytes {2} [built]
|
||||
single entry ./router [5] multi ./bEntry ./router pageB:100001
|
||||
single entry ./router [8] multi ./aEntry ./router pageA:100001
|
||||
[6] . lazy ^\.\/.*Page$ namespace object 160 bytes {2} [built]
|
||||
import() context lazy . [1] ./router.js 15:1-59
|
||||
chunk {3} pageB.bundle.js (pageB) 129 bytes ={0}= ={2}= >{1}< [entry] [rendered]
|
||||
> pageB
|
||||
[4] ./bEntry.js 89 bytes {3} [built]
|
||||
single entry ./bEntry [5] multi ./bEntry ./router pageB:100000
|
||||
[5] multi ./bEntry ./router 40 bytes {3} [built]
|
||||
multi entry
|
||||
chunk {4} pageA.bundle.js (pageA) 129 bytes ={1}= ={2}= >{0}< [entry] [rendered]
|
||||
> pageA
|
||||
[7] ./aEntry.js 89 bytes {4} [built]
|
||||
single entry ./aEntry [8] multi ./aEntry ./router pageA:100000
|
||||
[8] multi ./aEntry ./router 40 bytes {4} [built]
|
||||
multi entry
|
||||
```
|
||||
|
||||
## Production mode
|
||||
|
|
@ -536,51 +491,50 @@ chunk {4} commons.js (commons) 1.67 KiB [entry] [rendered]
|
|||
```
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
0.chunk.js 123 bytes 0 [emitted]
|
||||
1.chunk.js 122 bytes 1 [emitted]
|
||||
pageB.bundle.js 165 bytes 2, 1 [emitted] pageB
|
||||
pageA.bundle.js 165 bytes 3, 0 [emitted] pageA
|
||||
commons.js 2.5 KiB 4 [emitted] commons
|
||||
Entrypoint pageA = commons.js pageA.bundle.js
|
||||
Entrypoint pageB = commons.js pageB.bundle.js
|
||||
Entrypoint commons = commons.js
|
||||
chunk {0} 0.chunk.js 61 bytes {4} [rendered]
|
||||
> [4] (webpack)/node_modules/bundle-loader!./aPage.js 7:0-14:2
|
||||
[2] ./aPage.js 61 bytes {0} {3} [built]
|
||||
cjs require !!./aPage.js [4] (webpack)/node_modules/bundle-loader!./aPage.js 8:8-31
|
||||
cjs require ./aPage [8] ./aEntry.js 3:7-25
|
||||
chunk {1} 1.chunk.js 61 bytes {4} [rendered]
|
||||
> [3] (webpack)/node_modules/bundle-loader!./bPage.js 7:0-14:2
|
||||
[1] ./bPage.js 61 bytes {1} {2} [built]
|
||||
cjs require !!./bPage.js [3] (webpack)/node_modules/bundle-loader!./bPage.js 8:8-31
|
||||
cjs require ./bPage [7] ./bEntry.js 3:7-25
|
||||
chunk {2} pageB.bundle.js (pageB) 150 bytes {4} [initial] [rendered]
|
||||
> pageB [7] ./bEntry.js
|
||||
[1] ./bPage.js 61 bytes {1} {2} [built]
|
||||
cjs require !!./bPage.js [3] (webpack)/node_modules/bundle-loader!./bPage.js 8:8-31
|
||||
cjs require ./bPage [7] ./bEntry.js 3:7-25
|
||||
[7] ./bEntry.js 89 bytes {2} [built]
|
||||
single entry ./bEntry pageB
|
||||
chunk {3} pageA.bundle.js (pageA) 150 bytes {4} [initial] [rendered]
|
||||
> pageA [8] ./aEntry.js
|
||||
[2] ./aPage.js 61 bytes {0} {3} [built]
|
||||
cjs require !!./aPage.js [4] (webpack)/node_modules/bundle-loader!./aPage.js 8:8-31
|
||||
cjs require ./aPage [8] ./aEntry.js 3:7-25
|
||||
[8] ./aEntry.js 89 bytes {3} [built]
|
||||
single entry ./aEntry pageA
|
||||
chunk {4} commons.js (commons) 1.67 KiB [entry] [rendered]
|
||||
> commons [6] ./router.js
|
||||
[0] ./render.js 60 bytes {4} [built]
|
||||
cjs require ./render [6] ./router.js 1:13-32
|
||||
cjs require ./render [7] ./bEntry.js 2:13-32
|
||||
cjs require ./render [8] ./aEntry.js 2:13-32
|
||||
[3] (webpack)/node_modules/bundle-loader!./bPage.js 282 bytes {4} [optional] [built]
|
||||
context element ./bPage [5] . sync (webpack)/node_modules/bundle-loader ^\.\/.*Page$ ./bPage
|
||||
[4] (webpack)/node_modules/bundle-loader!./aPage.js 282 bytes {4} [optional] [built]
|
||||
context element ./aPage [5] . sync (webpack)/node_modules/bundle-loader ^\.\/.*Page$ ./aPage
|
||||
[5] . sync (webpack)/node_modules/bundle-loader ^\.\/.*Page$ 184 bytes {4} [built]
|
||||
cjs require context bundle-loader!. [6] ./router.js 18:18-61
|
||||
[6] ./router.js 903 bytes {4} [built]
|
||||
single entry ./router commons
|
||||
Asset Size Chunks Chunk Names
|
||||
bPage.chunk.js 123 bytes 0 [emitted] bPage
|
||||
aPage.chunk.js 123 bytes 1 [emitted] aPage
|
||||
pageA~pageB.chunk.js 589 bytes 2 [emitted] pageA~pageB
|
||||
pageB.bundle.js 1.85 KiB 3 [emitted] pageB
|
||||
pageA.bundle.js 1.85 KiB 4 [emitted] pageA
|
||||
Entrypoint pageA = aPage.chunk.js pageA~pageB.chunk.js pageA.bundle.js
|
||||
Entrypoint pageB = bPage.chunk.js pageA~pageB.chunk.js pageB.bundle.js
|
||||
chunk {0} bPage.chunk.js (bPage) 61 bytes <{1}> <{2}> <{4}> ={2}= ={3}= >{1}< [rendered] reused as split chunk
|
||||
> ./bPage [6] . lazy ^\.\/.*Page$ namespace object ./bPage
|
||||
> ./bPage [6] . lazy ^\.\/.*Page$ namespace object ./bPage
|
||||
> pageB
|
||||
[2] ./bPage.js 61 bytes {0} [built]
|
||||
cjs require ./bPage [4] ./bEntry.js 3:7-25
|
||||
context element ./bPage [6] . lazy ^\.\/.*Page$ namespace object ./bPage
|
||||
chunk {1} aPage.chunk.js (aPage) 61 bytes <{0}> <{2}> <{3}> ={2}= ={4}= >{0}< [rendered] reused as split chunk
|
||||
> ./aPage [6] . lazy ^\.\/.*Page$ namespace object ./aPage
|
||||
> ./aPage [6] . lazy ^\.\/.*Page$ namespace object ./aPage
|
||||
> pageA
|
||||
[3] ./aPage.js 61 bytes {1} [built]
|
||||
context element ./aPage [6] . lazy ^\.\/.*Page$ namespace object ./aPage
|
||||
cjs require ./aPage [7] ./aEntry.js 3:7-25
|
||||
chunk {2} pageA~pageB.chunk.js (pageA~pageB) 970 bytes ={0}= ={3}= ={1}= ={4}= >{1}< >{0}< [initial] [rendered] split chunk (name: pageA~pageB)
|
||||
> pageB
|
||||
> pageA
|
||||
[0] ./render.js 60 bytes {2} [built]
|
||||
cjs require ./render [1] ./router.js 1:13-32
|
||||
cjs require ./render [4] ./bEntry.js 2:13-32
|
||||
cjs require ./render [7] ./aEntry.js 2:13-32
|
||||
[1] ./router.js 750 bytes {2} [built]
|
||||
single entry ./router [5] multi ./bEntry ./router pageB:100001
|
||||
single entry ./router [8] multi ./aEntry ./router pageA:100001
|
||||
[6] . lazy ^\.\/.*Page$ namespace object 160 bytes {2} [built]
|
||||
import() context lazy . [1] ./router.js 15:1-59
|
||||
chunk {3} pageB.bundle.js (pageB) 129 bytes ={0}= ={2}= >{1}< [entry] [rendered]
|
||||
> pageB
|
||||
[4] ./bEntry.js 89 bytes {3} [built]
|
||||
single entry ./bEntry [5] multi ./bEntry ./router pageB:100000
|
||||
[5] multi ./bEntry ./router 40 bytes {3} [built]
|
||||
multi entry
|
||||
chunk {4} pageA.bundle.js (pageA) 129 bytes ={1}= ={2}= >{0}< [entry] [rendered]
|
||||
> pageA
|
||||
[7] ./aEntry.js 89 bytes {4} [built]
|
||||
single entry ./aEntry [8] multi ./aEntry ./router pageA:100000
|
||||
[8] multi ./aEntry ./router 40 bytes {4} [built]
|
||||
multi entry
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
<html>
|
||||
<head></head>
|
||||
<body>
|
||||
<script src="js/commons.js" charset="utf-8"></script>
|
||||
<script src="js/pageA.bundle.js" charset="utf-8"></script>
|
||||
<script async src="dist/pageA~pageB.chunk.js" charset="utf-8"></script>
|
||||
<script async src="dist/aPage.chunk.js" charset="utf-8"></script>
|
||||
<script async src="dist/pageA.bundle.js" charset="utf-8"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
<html>
|
||||
<head></head>
|
||||
<body>
|
||||
<script src="js/commons.js" charset="utf-8"></script>
|
||||
<script src="js/pageB.bundle.js" charset="utf-8"></script>
|
||||
<script async src="dist/pageA~pageB.chunk.js" charset="utf-8"></script>
|
||||
<script async src="dist/bPage.chunk.js" charset="utf-8"></script>
|
||||
<script async src="dist/pageB.bundle.js" charset="utf-8"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -11,14 +11,8 @@ window.onLinkToPage = function onLinkToPage(name) { // name is "a" or "b"
|
|||
// overwriting the RegExp with the ContextReplacementPlugin, or
|
||||
// using the require.context method.
|
||||
|
||||
// The bundle-loader is used to create a chunk from the page
|
||||
// -> Pages are only loaded on demand
|
||||
|
||||
// This line may throw a exception on runtime if the page wasn't found.
|
||||
var pageBundle = require("bundle-loader!./" + name + "Page");
|
||||
|
||||
// Wait until the chunk is loaded
|
||||
pageBundle(function(page) {
|
||||
render(page);
|
||||
import(/* webpackChunkName: "[request]" */`./${name}Page`).then(page => {;
|
||||
render(page.default);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,10 +32,10 @@
|
|||
{{pageA.html}}
|
||||
```
|
||||
|
||||
# dist/commons.js
|
||||
# dist/pageA~pageB.chunk.js
|
||||
|
||||
``` javascript
|
||||
{{dist/commons.js}}
|
||||
{{dist/pageA~pageB.chunk.js}}
|
||||
```
|
||||
|
||||
# dist/pageA.bundle.js
|
||||
|
|
@ -44,10 +44,10 @@
|
|||
{{dist/pageA.bundle.js}}
|
||||
```
|
||||
|
||||
# dist/1.chunk.js
|
||||
# dist/aPage.chunk.js
|
||||
|
||||
``` javascript
|
||||
{{dist/1.chunk.js}}
|
||||
{{dist/aPage.chunk.js}}
|
||||
```
|
||||
|
||||
# Info
|
||||
|
|
|
|||
|
|
@ -1,31 +1,25 @@
|
|||
var path = require("path");
|
||||
var CommonsChunkPlugin = require("../../lib/optimize/CommonsChunkPlugin");
|
||||
module.exports = {
|
||||
// mode: "development || "production",
|
||||
entry: {
|
||||
// The entry points for the pages
|
||||
pageA: "./aEntry",
|
||||
pageB: "./bEntry",
|
||||
|
||||
// This file contains common modules but also the router entry
|
||||
"commons": "./router"
|
||||
// They also contains router
|
||||
pageA: ["./aEntry", "./router"],
|
||||
pageB: ["./bEntry", "./router"],
|
||||
},
|
||||
output: {
|
||||
path: path.join(__dirname, "dist"),
|
||||
publicPath: "js/",
|
||||
filename: "[name].bundle.js",
|
||||
chunkFilename: "[id].chunk.js"
|
||||
chunkFilename: "[name].chunk.js"
|
||||
},
|
||||
plugins: [
|
||||
// Extract common modules from the entries to the commons.js file
|
||||
// This is optional, but good for performance.
|
||||
new CommonsChunkPlugin({
|
||||
name: "commons",
|
||||
filename: "commons.js"
|
||||
})
|
||||
// The pages cannot run without the commons.js file now.
|
||||
],
|
||||
optimization: {
|
||||
// Extract common modules from initial chunks too
|
||||
// This is optional, but good for performance.
|
||||
splitChunks: {
|
||||
chunks: "all",
|
||||
minSize: 0 // This example is too small
|
||||
},
|
||||
occurrenceOrder: true // To keep filename consistent between different modes (for example building only)
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -118,6 +118,7 @@ module.exports = Object.keys(languages).map(function(language) {
|
|||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "dist/";
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 0);
|
||||
/******/ })
|
||||
|
|
@ -211,6 +212,7 @@ console.log("Missing Text");
|
|||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "dist/";
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 0);
|
||||
/******/ })
|
||||
|
|
@ -239,20 +241,20 @@ Hash: 0a1b2c3d4e5f6a7b8c9d
|
|||
Version: webpack next
|
||||
Child en:
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Asset Size Chunks Chunk Names
|
||||
en.output.js 2.79 KiB 0 [emitted] main
|
||||
Asset Size Chunks Chunk Names
|
||||
en.output.js 2.8 KiB 0 [emitted] main
|
||||
Entrypoint main = en.output.js
|
||||
chunk {0} en.output.js (main) 65 bytes [entry] [rendered]
|
||||
> main [0] ./example.js
|
||||
> ./example main
|
||||
[0] ./example.js 65 bytes {0} [built]
|
||||
single entry ./example main
|
||||
Child de:
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Asset Size Chunks Chunk Names
|
||||
de.output.js 2.79 KiB 0 [emitted] main
|
||||
Asset Size Chunks Chunk Names
|
||||
de.output.js 2.8 KiB 0 [emitted] main
|
||||
Entrypoint main = de.output.js
|
||||
chunk {0} de.output.js (main) 65 bytes [entry] [rendered]
|
||||
> main [0] ./example.js
|
||||
> ./example main
|
||||
[0] ./example.js 65 bytes {0} [built] [1 warning]
|
||||
single entry ./example main
|
||||
|
||||
|
|
@ -271,7 +273,7 @@ Child en:
|
|||
en.output.js 606 bytes 0 [emitted] main
|
||||
Entrypoint main = en.output.js
|
||||
chunk {0} en.output.js (main) 65 bytes [entry] [rendered]
|
||||
> main [0] ./example.js
|
||||
> ./example main
|
||||
[0] ./example.js 65 bytes {0} [built]
|
||||
single entry ./example main
|
||||
Child de:
|
||||
|
|
@ -280,7 +282,7 @@ Child de:
|
|||
de.output.js 605 bytes 0 [emitted] main
|
||||
Entrypoint main = de.output.js
|
||||
chunk {0} de.output.js (main) 65 bytes [entry] [rendered]
|
||||
> main [0] ./example.js
|
||||
> ./example main
|
||||
[0] ./example.js 65 bytes {0} [built] [1 warning]
|
||||
single entry ./example main
|
||||
|
||||
|
|
|
|||
|
|
@ -102,6 +102,7 @@ module.exports = function(content) {
|
|||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "dist/";
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 0);
|
||||
/******/ })
|
||||
|
|
@ -263,11 +264,11 @@ Prints in node.js (`enhanced-require example.js`) and in browser:
|
|||
```
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
output.js 6.19 KiB 0 [emitted] main
|
||||
Asset Size Chunks Chunk Names
|
||||
output.js 6.2 KiB 0 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} output.js (main) 2.66 KiB [entry] [rendered]
|
||||
> main [0] ./example.js
|
||||
> .\example.js main
|
||||
[0] ./example.js 210 bytes {0} [built]
|
||||
single entry .\example.js main
|
||||
[1] ./loader.js!./file.js 41 bytes {0} [built]
|
||||
|
|
@ -287,7 +288,7 @@ Version: webpack next
|
|||
output.js 1.53 KiB 0 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} output.js (main) 2.66 KiB [entry] [rendered]
|
||||
> main [3] ./example.js
|
||||
> .\example.js main
|
||||
[0] (webpack)/node_modules/css-loader!./test.css 209 bytes {0} [built]
|
||||
cjs require !css-loader!./test.css [3] ./example.js 6:12-45
|
||||
cjs require ./test.css [3] ./example.js 5:12-33
|
||||
|
|
|
|||
|
|
@ -62,10 +62,12 @@ require(
|
|||
/******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // install a JSONP callback for chunk loading
|
||||
/******/ function webpackJsonpCallback(data) {
|
||||
/******/ var chunkIds = data[0], moreModules = data[1], executeModules = data[2];
|
||||
/******/ var chunkIds = data[0];
|
||||
/******/ var moreModules = data[1]
|
||||
/******/
|
||||
/******/ // add "moreModules" to the modules object,
|
||||
/******/ // then flag all "chunkIds" as loaded and fire callback
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [], result;
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [];
|
||||
/******/ for(;i < chunkIds.length; i++) {
|
||||
/******/ chunkId = chunkIds[i];
|
||||
/******/ if(installedChunks[chunkId]) {
|
||||
|
|
@ -85,6 +87,7 @@ require(
|
|||
/******/
|
||||
/******/ };
|
||||
/******/
|
||||
/******/
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
|
|
@ -93,7 +96,7 @@ require(
|
|||
/******/ 1: 0
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ var scheduledModules = [];
|
||||
/******/
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
|
|
@ -219,10 +222,12 @@ require(
|
|||
/******/ __webpack_require__.oe = function(err) { console.error(err); throw err; };
|
||||
/******/
|
||||
/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
|
||||
/******/ var parentJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ jsonpArray.push = webpackJsonpCallback;
|
||||
/******/ jsonpArray = jsonpArray.slice();
|
||||
/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
|
||||
/******/ var parentJsonpFunction = oldJsonpFunction;
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 3);
|
||||
|
|
@ -407,9 +412,9 @@ Hash: 0a1b2c3d4e5f6a7b8c9d
|
|||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
0.output.js 1.87 KiB 0 [emitted]
|
||||
output.js 9.73 KiB 1 [emitted] main
|
||||
output.js 9.76 KiB 1 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} 0.output.js 439 bytes {1} [rendered]
|
||||
chunk {0} 0.output.js 439 bytes <{1}> [rendered]
|
||||
> [3] ./example.js 7:0-14:1
|
||||
[4] ../require.context/templates sync ^\.\/.*\.js$ 193 bytes {0} [built]
|
||||
amd require context ../require.context/templates [3] ./example.js 7:0-14:1
|
||||
|
|
@ -419,8 +424,8 @@ chunk {0} 0.output.js 439 bytes {1} [rendered]
|
|||
context element ./b.js [4] ../require.context/templates sync ^\.\/.*\.js$ ./b.js
|
||||
[7] ../require.context/templates/a.js 82 bytes {0} [optional] [built]
|
||||
context element ./a.js [4] ../require.context/templates sync ^\.\/.*\.js$ ./a.js
|
||||
chunk {1} output.js (main) 1.03 KiB [entry] [rendered]
|
||||
> main [3] ./example.js
|
||||
chunk {1} output.js (main) 1.03 KiB >{0}< [entry] [rendered]
|
||||
> .\example.js main
|
||||
[0] ./amd.js 309 bytes {1} [built]
|
||||
amd require ./amd [1] ./commonjs.js 5:0-11:1
|
||||
cjs require ./amd [1] ./commonjs.js 8:13-29
|
||||
|
|
@ -455,7 +460,7 @@ Version: webpack next
|
|||
0.output.js 606 bytes 0 [emitted]
|
||||
output.js 2.04 KiB 1 [emitted] main
|
||||
Entrypoint main = output.js
|
||||
chunk {0} 0.output.js 439 bytes {1} [rendered]
|
||||
chunk {0} 0.output.js 439 bytes <{1}> [rendered]
|
||||
> [3] ./example.js 7:0-14:1
|
||||
[4] ../require.context/templates sync ^\.\/.*\.js$ 193 bytes {0} [built]
|
||||
amd require context ../require.context/templates [3] ./example.js 7:0-14:1
|
||||
|
|
@ -465,8 +470,8 @@ chunk {0} 0.output.js 439 bytes {1} [rendered]
|
|||
context element ./b.js [4] ../require.context/templates sync ^\.\/.*\.js$ ./b.js
|
||||
[7] ../require.context/templates/a.js 82 bytes {0} [optional] [built]
|
||||
context element ./a.js [4] ../require.context/templates sync ^\.\/.*\.js$ ./a.js
|
||||
chunk {1} output.js (main) 1.03 KiB [entry] [rendered]
|
||||
> main [3] ./example.js
|
||||
chunk {1} output.js (main) 1.03 KiB >{0}< [entry] [rendered]
|
||||
> .\example.js main
|
||||
[0] ./amd.js 309 bytes {1} [built]
|
||||
amd require ./amd [1] ./commonjs.js 5:0-11:1
|
||||
cjs require ./amd [1] ./commonjs.js 8:13-29
|
||||
|
|
|
|||
|
|
@ -1,313 +0,0 @@
|
|||
This example shows example of using the CommonsChunkPlugin for moving modules from child-chunks to the parent chunk.
|
||||
|
||||
The `CommonsChunkPlugin` is used with `selectedChunks = false` argument to check for common modules in the child-chunks.
|
||||
|
||||
Without the plugin the pages would have this chunks:
|
||||
|
||||
* page
|
||||
* chunk: a
|
||||
* chunk: a, b
|
||||
* chunk: a, b, c
|
||||
* chunk: a, b, c, d
|
||||
|
||||
Using the `CommonsChunkPlugin` without `minChunks` argument only moves modules which are shared by all children (here only module `a`):
|
||||
|
||||
* pageA: a
|
||||
* chunk: b
|
||||
* chunk: b, c
|
||||
* chunk: b, c, d
|
||||
|
||||
With `minChunks = 3`:
|
||||
|
||||
* pageB: a, b
|
||||
* chunk: c
|
||||
* chunk: c, d
|
||||
|
||||
It's also possible to provide a function instead of a number for `minChunks`. The function is called for each module to decide if the module should be moved or not (see pageC and pageD):
|
||||
|
||||
* pageC: a, c, d
|
||||
* chunk: b
|
||||
|
||||
# page.js
|
||||
|
||||
``` javascript
|
||||
require(["./a"]);
|
||||
require(["./a", "./b"]);
|
||||
require(["./a", "./b", "./c"]);
|
||||
require(["./a", "./b", "./c", "./d"]);
|
||||
```
|
||||
|
||||
# webpack.config.js
|
||||
|
||||
``` javascript
|
||||
var path = require("path");
|
||||
var CommonsChunkPlugin = require("../../lib/optimize/CommonsChunkPlugin");
|
||||
var outputOptions = {
|
||||
path: path.join(__dirname, "dist"),
|
||||
filename: "[name].bundle.js",
|
||||
chunkFilename: "[id].chunk.js"
|
||||
};
|
||||
module.exports = [{
|
||||
name: "page",
|
||||
// mode: "development || "production",
|
||||
entry: {
|
||||
page: "./page"
|
||||
},
|
||||
output: outputOptions,
|
||||
optimization: {
|
||||
occurrenceOrder: true // To keep filename consistent between different modes (for example building only)
|
||||
}
|
||||
}, {
|
||||
name: "pageA",
|
||||
// mode: "development || "production",
|
||||
entry: {
|
||||
pageA: "./page"
|
||||
},
|
||||
output: outputOptions,
|
||||
plugins: [
|
||||
//check for common modules in children of pageA and move them to the parent
|
||||
new CommonsChunkPlugin({
|
||||
name: "pageA",
|
||||
children: true
|
||||
}),
|
||||
],
|
||||
optimization: {
|
||||
occurrenceOrder: true // To keep filename consistent between different modes (for example building only)
|
||||
}
|
||||
}, {
|
||||
name: "pageB",
|
||||
// mode: "development || "production",
|
||||
entry: {
|
||||
pageB: "./page"
|
||||
},
|
||||
output: outputOptions,
|
||||
plugins: [
|
||||
// the same for pageB but move them if at least 3 children share the module
|
||||
new CommonsChunkPlugin({
|
||||
name: "pageB",
|
||||
children: true,
|
||||
minChunks: 3
|
||||
}),
|
||||
],
|
||||
optimization: {
|
||||
occurrenceOrder: true // To keep filename consistent between different modes (for example building only)
|
||||
}
|
||||
}, {
|
||||
name: "pageC",
|
||||
// mode: "development || "production",
|
||||
entry: {
|
||||
pageC: "./page"
|
||||
},
|
||||
output: outputOptions,
|
||||
plugins: [
|
||||
// the same for pageC and pageD but with a custom logic for moving
|
||||
new CommonsChunkPlugin({
|
||||
name: "pageC",
|
||||
children: true,
|
||||
minChunks: function(module, count) {
|
||||
// move only module "b"
|
||||
return !/b\.js/.test(module.identifier());
|
||||
}
|
||||
})
|
||||
],
|
||||
optimization: {
|
||||
occurrenceOrder: true // To keep filename consistent between different modes (for example building only)
|
||||
}
|
||||
}];
|
||||
```
|
||||
|
||||
# Info
|
||||
|
||||
## Unoptimized
|
||||
|
||||
```
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Child page:
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Asset Size Chunks Chunk Names
|
||||
0.chunk.js 748 bytes 0 [emitted]
|
||||
1.chunk.js 572 bytes 1 [emitted]
|
||||
2.chunk.js 405 bytes 2 [emitted]
|
||||
3.chunk.js 238 bytes 3 [emitted]
|
||||
page.bundle.js 7.46 KiB 4 [emitted] page
|
||||
Entrypoint page = page.bundle.js
|
||||
chunk {0} 0.chunk.js 84 bytes {4} [rendered]
|
||||
> [3] ./page.js 4:0-37
|
||||
[0] ./a.js 21 bytes {0} {1} {2} {3} [built]
|
||||
[1] ./b.js 21 bytes {0} {1} {2} [built]
|
||||
[2] ./c.js 21 bytes {0} {1} [built]
|
||||
[4] ./d.js 21 bytes {0} [built]
|
||||
chunk {1} 1.chunk.js 63 bytes {4} [rendered]
|
||||
> [3] ./page.js 3:0-30
|
||||
[0] ./a.js 21 bytes {0} {1} {2} {3} [built]
|
||||
[1] ./b.js 21 bytes {0} {1} {2} [built]
|
||||
[2] ./c.js 21 bytes {0} {1} [built]
|
||||
chunk {2} 2.chunk.js 42 bytes {4} [rendered]
|
||||
> [3] ./page.js 2:0-23
|
||||
[0] ./a.js 21 bytes {0} {1} {2} {3} [built]
|
||||
[1] ./b.js 21 bytes {0} {1} {2} [built]
|
||||
chunk {3} 3.chunk.js 21 bytes {4} [rendered]
|
||||
> [3] ./page.js 1:0-16
|
||||
[0] ./a.js 21 bytes {0} {1} {2} {3} [built]
|
||||
chunk {4} page.bundle.js (page) 118 bytes [entry] [rendered]
|
||||
> page [3] ./page.js
|
||||
[3] ./page.js 118 bytes {4} [built]
|
||||
Child pageA:
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Asset Size Chunks Chunk Names
|
||||
0.chunk.js 590 bytes 0 [emitted]
|
||||
1.chunk.js 414 bytes 1 [emitted]
|
||||
2.chunk.js 247 bytes 2 [emitted]
|
||||
pageA.bundle.js 7.63 KiB 3 [emitted] pageA
|
||||
Entrypoint pageA = pageA.bundle.js
|
||||
chunk {0} 0.chunk.js 63 bytes {3} [rendered]
|
||||
> [3] ./page.js 4:0-37
|
||||
[1] ./b.js 21 bytes {0} {1} {2} [built]
|
||||
[2] ./c.js 21 bytes {0} {1} [built]
|
||||
[4] ./d.js 21 bytes {0} [built]
|
||||
chunk {1} 1.chunk.js 42 bytes {3} [rendered]
|
||||
> [3] ./page.js 3:0-30
|
||||
[1] ./b.js 21 bytes {0} {1} {2} [built]
|
||||
[2] ./c.js 21 bytes {0} {1} [built]
|
||||
chunk {2} 2.chunk.js 21 bytes {3} [rendered]
|
||||
> [3] ./page.js 2:0-23
|
||||
[1] ./b.js 21 bytes {0} {1} {2} [built]
|
||||
chunk {3} pageA.bundle.js (pageA) 139 bytes [entry] [rendered]
|
||||
> pageA [3] ./page.js
|
||||
[0] ./a.js 21 bytes {3} [built]
|
||||
[3] ./page.js 118 bytes {3} [built]
|
||||
Child pageB:
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Asset Size Chunks Chunk Names
|
||||
0.chunk.js 432 bytes 0 [emitted]
|
||||
1.chunk.js 241 bytes 1 [emitted]
|
||||
pageB.bundle.js 7.78 KiB 2 [emitted] pageB
|
||||
Entrypoint pageB = pageB.bundle.js
|
||||
chunk {0} 0.chunk.js 42 bytes {2} [rendered]
|
||||
> [3] ./page.js 4:0-37
|
||||
[2] ./c.js 21 bytes {0} {1} [built]
|
||||
[4] ./d.js 21 bytes {0} [built]
|
||||
chunk {1} 1.chunk.js 21 bytes {2} [rendered]
|
||||
> [3] ./page.js 3:0-30
|
||||
[2] ./c.js 21 bytes {0} {1} [built]
|
||||
chunk {2} pageB.bundle.js (pageB) 160 bytes [entry] [rendered]
|
||||
> pageB [3] ./page.js
|
||||
[0] ./a.js 21 bytes {2} [built]
|
||||
[1] ./b.js 21 bytes {2} [built]
|
||||
[3] ./page.js 118 bytes {2} [built]
|
||||
Child pageC:
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Asset Size Chunks Chunk Names
|
||||
0.chunk.js 247 bytes 0 [emitted]
|
||||
pageC.bundle.js 7.99 KiB 1 [emitted] pageC
|
||||
Entrypoint pageC = pageC.bundle.js
|
||||
chunk {0} 0.chunk.js 21 bytes {1} [rendered]
|
||||
> duplicate [4] ./page.js 2:0-23
|
||||
> duplicate [4] ./page.js 3:0-30
|
||||
> duplicate [4] ./page.js 4:0-37
|
||||
[1] ./b.js 21 bytes {0} [built]
|
||||
chunk {1} pageC.bundle.js (pageC) 181 bytes [entry] [rendered]
|
||||
> pageC [4] ./page.js
|
||||
[0] ./a.js 21 bytes {1} [built]
|
||||
[2] ./c.js 21 bytes {1} [built]
|
||||
[3] ./d.js 21 bytes {1} [built]
|
||||
[4] ./page.js 118 bytes {1} [built]
|
||||
```
|
||||
|
||||
## Production mode
|
||||
|
||||
```
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Child page:
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Asset Size Chunks Chunk Names
|
||||
0.chunk.js 183 bytes 0, 1, 2, 3 [emitted]
|
||||
1.chunk.js 151 bytes 1, 2, 3 [emitted]
|
||||
2.chunk.js 120 bytes 2, 3 [emitted]
|
||||
3.chunk.js 89 bytes 3 [emitted]
|
||||
page.bundle.js 1.77 KiB 4 [emitted] page
|
||||
Entrypoint page = page.bundle.js
|
||||
chunk {0} 0.chunk.js 84 bytes {4} [rendered]
|
||||
> [3] ./page.js 4:0-37
|
||||
[0] ./a.js 21 bytes {0} {1} {2} {3} [built]
|
||||
[1] ./b.js 21 bytes {0} {1} {2} [built]
|
||||
[2] ./c.js 21 bytes {0} {1} [built]
|
||||
[4] ./d.js 21 bytes {0} [built]
|
||||
chunk {1} 1.chunk.js 63 bytes {4} [rendered]
|
||||
> [3] ./page.js 3:0-30
|
||||
[0] ./a.js 21 bytes {0} {1} {2} {3} [built]
|
||||
[1] ./b.js 21 bytes {0} {1} {2} [built]
|
||||
[2] ./c.js 21 bytes {0} {1} [built]
|
||||
chunk {2} 2.chunk.js 42 bytes {4} [rendered]
|
||||
> [3] ./page.js 2:0-23
|
||||
[0] ./a.js 21 bytes {0} {1} {2} {3} [built]
|
||||
[1] ./b.js 21 bytes {0} {1} {2} [built]
|
||||
chunk {3} 3.chunk.js 21 bytes {4} [rendered]
|
||||
> [3] ./page.js 1:0-16
|
||||
[0] ./a.js 21 bytes {0} {1} {2} {3} [built]
|
||||
chunk {4} page.bundle.js (page) 118 bytes [entry] [rendered]
|
||||
> page [3] ./page.js
|
||||
[3] ./page.js 118 bytes {4} [built]
|
||||
Child pageA:
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Asset Size Chunks Chunk Names
|
||||
0.chunk.js 153 bytes 0, 1, 2 [emitted]
|
||||
1.chunk.js 121 bytes 1, 2 [emitted]
|
||||
2.chunk.js 90 bytes 2 [emitted]
|
||||
pageA.bundle.js 1.81 KiB 3 [emitted] pageA
|
||||
Entrypoint pageA = pageA.bundle.js
|
||||
chunk {0} 0.chunk.js 63 bytes {3} [rendered]
|
||||
> [3] ./page.js 4:0-37
|
||||
[1] ./b.js 21 bytes {0} {1} {2} [built]
|
||||
[2] ./c.js 21 bytes {0} {1} [built]
|
||||
[4] ./d.js 21 bytes {0} [built]
|
||||
chunk {1} 1.chunk.js 42 bytes {3} [rendered]
|
||||
> [3] ./page.js 3:0-30
|
||||
[1] ./b.js 21 bytes {0} {1} {2} [built]
|
||||
[2] ./c.js 21 bytes {0} {1} [built]
|
||||
chunk {2} 2.chunk.js 21 bytes {3} [rendered]
|
||||
> [3] ./page.js 2:0-23
|
||||
[1] ./b.js 21 bytes {0} {1} {2} [built]
|
||||
chunk {3} pageA.bundle.js (pageA) 139 bytes [entry] [rendered]
|
||||
> pageA [3] ./page.js
|
||||
[0] ./a.js 21 bytes {3} [built]
|
||||
[3] ./page.js 118 bytes {3} [built]
|
||||
Child pageB:
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Asset Size Chunks Chunk Names
|
||||
0.chunk.js 123 bytes 0, 1 [emitted]
|
||||
1.chunk.js 91 bytes 1 [emitted]
|
||||
pageB.bundle.js 1.85 KiB 2 [emitted] pageB
|
||||
Entrypoint pageB = pageB.bundle.js
|
||||
chunk {0} 0.chunk.js 42 bytes {2} [rendered]
|
||||
> [3] ./page.js 4:0-37
|
||||
[2] ./c.js 21 bytes {0} {1} [built]
|
||||
[4] ./d.js 21 bytes {0} [built]
|
||||
chunk {1} 1.chunk.js 21 bytes {2} [rendered]
|
||||
> [3] ./page.js 3:0-30
|
||||
[2] ./c.js 21 bytes {0} {1} [built]
|
||||
chunk {2} pageB.bundle.js (pageB) 160 bytes [entry] [rendered]
|
||||
> pageB [3] ./page.js
|
||||
[0] ./a.js 21 bytes {2} [built]
|
||||
[1] ./b.js 21 bytes {2} [built]
|
||||
[3] ./page.js 118 bytes {2} [built]
|
||||
Child pageC:
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Asset Size Chunks Chunk Names
|
||||
0.chunk.js 90 bytes 0 [emitted]
|
||||
pageC.bundle.js 1.87 KiB 1 [emitted] pageC
|
||||
Entrypoint pageC = pageC.bundle.js
|
||||
chunk {0} 0.chunk.js 21 bytes {1} [rendered]
|
||||
> duplicate [4] ./page.js 2:0-23
|
||||
> duplicate [4] ./page.js 3:0-30
|
||||
> duplicate [4] ./page.js 4:0-37
|
||||
[1] ./b.js 21 bytes {0} [built]
|
||||
chunk {1} pageC.bundle.js (pageC) 181 bytes [entry] [rendered]
|
||||
> pageC [4] ./page.js
|
||||
[0] ./a.js 21 bytes {1} [built]
|
||||
[2] ./c.js 21 bytes {1} [built]
|
||||
[3] ./d.js 21 bytes {1} [built]
|
||||
[4] ./page.js 118 bytes {1} [built]
|
||||
```
|
||||
|
|
@ -1 +0,0 @@
|
|||
module.exports = "a";
|
||||
|
|
@ -1 +0,0 @@
|
|||
module.exports = "b";
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
global.NO_TARGET_ARGS = true;
|
||||
global.NO_REASONS = true;
|
||||
require("../build-common");
|
||||
|
|
@ -1 +0,0 @@
|
|||
module.exports = "c";
|
||||
|
|
@ -1 +0,0 @@
|
|||
module.exports = "d";
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
require(["./a"]);
|
||||
require(["./a", "./b"]);
|
||||
require(["./a", "./b", "./c"]);
|
||||
require(["./a", "./b", "./c", "./d"]);
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
This example shows example of using the CommonsChunkPlugin for moving modules from child-chunks to the parent chunk.
|
||||
|
||||
The `CommonsChunkPlugin` is used with `selectedChunks = false` argument to check for common modules in the child-chunks.
|
||||
|
||||
Without the plugin the pages would have this chunks:
|
||||
|
||||
* page
|
||||
* chunk: a
|
||||
* chunk: a, b
|
||||
* chunk: a, b, c
|
||||
* chunk: a, b, c, d
|
||||
|
||||
Using the `CommonsChunkPlugin` without `minChunks` argument only moves modules which are shared by all children (here only module `a`):
|
||||
|
||||
* pageA: a
|
||||
* chunk: b
|
||||
* chunk: b, c
|
||||
* chunk: b, c, d
|
||||
|
||||
With `minChunks = 3`:
|
||||
|
||||
* pageB: a, b
|
||||
* chunk: c
|
||||
* chunk: c, d
|
||||
|
||||
It's also possible to provide a function instead of a number for `minChunks`. The function is called for each module to decide if the module should be moved or not (see pageC and pageD):
|
||||
|
||||
* pageC: a, c, d
|
||||
* chunk: b
|
||||
|
||||
# page.js
|
||||
|
||||
``` javascript
|
||||
{{page.js}}
|
||||
```
|
||||
|
||||
# webpack.config.js
|
||||
|
||||
``` javascript
|
||||
{{webpack.config.js}}
|
||||
```
|
||||
|
||||
# Info
|
||||
|
||||
## Unoptimized
|
||||
|
||||
```
|
||||
{{stdout}}
|
||||
```
|
||||
|
||||
## Production mode
|
||||
|
||||
```
|
||||
{{production:stdout}}
|
||||
```
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
var path = require("path");
|
||||
var CommonsChunkPlugin = require("../../lib/optimize/CommonsChunkPlugin");
|
||||
var outputOptions = {
|
||||
path: path.join(__dirname, "dist"),
|
||||
filename: "[name].bundle.js",
|
||||
chunkFilename: "[id].chunk.js"
|
||||
};
|
||||
module.exports = [{
|
||||
name: "page",
|
||||
// mode: "development || "production",
|
||||
entry: {
|
||||
page: "./page"
|
||||
},
|
||||
output: outputOptions,
|
||||
optimization: {
|
||||
occurrenceOrder: true // To keep filename consistent between different modes (for example building only)
|
||||
}
|
||||
}, {
|
||||
name: "pageA",
|
||||
// mode: "development || "production",
|
||||
entry: {
|
||||
pageA: "./page"
|
||||
},
|
||||
output: outputOptions,
|
||||
plugins: [
|
||||
//check for common modules in children of pageA and move them to the parent
|
||||
new CommonsChunkPlugin({
|
||||
name: "pageA",
|
||||
children: true
|
||||
}),
|
||||
],
|
||||
optimization: {
|
||||
occurrenceOrder: true // To keep filename consistent between different modes (for example building only)
|
||||
}
|
||||
}, {
|
||||
name: "pageB",
|
||||
// mode: "development || "production",
|
||||
entry: {
|
||||
pageB: "./page"
|
||||
},
|
||||
output: outputOptions,
|
||||
plugins: [
|
||||
// the same for pageB but move them if at least 3 children share the module
|
||||
new CommonsChunkPlugin({
|
||||
name: "pageB",
|
||||
children: true,
|
||||
minChunks: 3
|
||||
}),
|
||||
],
|
||||
optimization: {
|
||||
occurrenceOrder: true // To keep filename consistent between different modes (for example building only)
|
||||
}
|
||||
}, {
|
||||
name: "pageC",
|
||||
// mode: "development || "production",
|
||||
entry: {
|
||||
pageC: "./page"
|
||||
},
|
||||
output: outputOptions,
|
||||
plugins: [
|
||||
// the same for pageC and pageD but with a custom logic for moving
|
||||
new CommonsChunkPlugin({
|
||||
name: "pageC",
|
||||
children: true,
|
||||
minChunks: function(module, count) {
|
||||
// move only module "b"
|
||||
return !/b\.js/.test(module.identifier());
|
||||
}
|
||||
})
|
||||
],
|
||||
optimization: {
|
||||
occurrenceOrder: true // To keep filename consistent between different modes (for example building only)
|
||||
}
|
||||
}];
|
||||
|
|
@ -116,6 +116,7 @@ module.exports = [
|
|||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "dist/";
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 0);
|
||||
/******/ })
|
||||
|
|
@ -133,9 +134,7 @@ module.exports = [
|
|||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
if(false) {
|
||||
require("./mobile-stuff");
|
||||
}
|
||||
if(false) {}
|
||||
console.log("Running " + "desktop" + " build");
|
||||
|
||||
/***/ })
|
||||
|
|
@ -211,6 +210,7 @@ console.log("Running " + "desktop" + " build");
|
|||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "dist/";
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 0);
|
||||
/******/ })
|
||||
|
|
@ -252,21 +252,21 @@ Version: webpack next
|
|||
Child mobile:
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Asset Size Chunks Chunk Names
|
||||
mobile.js 3.03 KiB 0 [emitted] main
|
||||
mobile.js 3.04 KiB 0 [emitted] main
|
||||
Entrypoint main = mobile.js
|
||||
chunk {0} mobile.js (main) 117 bytes [entry] [rendered]
|
||||
> main [0] ./example.js
|
||||
> ./example main
|
||||
[0] ./example.js 97 bytes {0} [built]
|
||||
single entry ./example main
|
||||
[1] ./mobile-stuff.js 20 bytes {0} [built]
|
||||
cjs require ./mobile-stuff [0] ./example.js 2:1-26
|
||||
Child desktop:
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Asset Size Chunks Chunk Names
|
||||
desktop.js 2.82 KiB 0 [emitted] main
|
||||
Asset Size Chunks Chunk Names
|
||||
desktop.js 2.8 KiB 0 [emitted] main
|
||||
Entrypoint main = desktop.js
|
||||
chunk {0} desktop.js (main) 97 bytes [entry] [rendered]
|
||||
> main [0] ./example.js
|
||||
> ./example main
|
||||
[0] ./example.js 97 bytes {0} [built]
|
||||
single entry ./example main
|
||||
```
|
||||
|
|
@ -282,7 +282,7 @@ Child mobile:
|
|||
mobile.js 608 bytes 0 [emitted] main
|
||||
Entrypoint main = mobile.js
|
||||
chunk {0} mobile.js (main) 117 bytes [entry] [rendered]
|
||||
> main [1] ./example.js
|
||||
> ./example main
|
||||
[0] ./mobile-stuff.js 20 bytes {0} [built]
|
||||
cjs require ./mobile-stuff [1] ./example.js 2:1-26
|
||||
[1] ./example.js 97 bytes {0} [built]
|
||||
|
|
@ -293,7 +293,7 @@ Child desktop:
|
|||
desktop.js 588 bytes 0 [emitted] main
|
||||
Entrypoint main = desktop.js
|
||||
chunk {0} desktop.js (main) 97 bytes [entry] [rendered]
|
||||
> main [0] ./example.js
|
||||
> ./example main
|
||||
[0] ./example.js 97 bytes {0} [built]
|
||||
single entry ./example main
|
||||
```
|
||||
|
|
@ -114,6 +114,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "dist/";
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 0);
|
||||
/******/ })
|
||||
|
|
@ -217,6 +218,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "dist/";
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 1);
|
||||
/******/ })
|
||||
|
|
@ -245,16 +247,16 @@ module.exports = "beta";
|
|||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
MyLibrary.alpha.js 3.15 KiB 0 [emitted] alpha
|
||||
MyLibrary.beta.js 3.15 KiB 1 [emitted] beta
|
||||
MyLibrary.alpha.js 3.16 KiB 0 [emitted] alpha
|
||||
MyLibrary.beta.js 3.16 KiB 1 [emitted] beta
|
||||
Entrypoint alpha = MyLibrary.alpha.js
|
||||
Entrypoint beta = MyLibrary.beta.js
|
||||
chunk {0} MyLibrary.alpha.js (alpha) 25 bytes [entry] [rendered]
|
||||
> alpha [0] ./alpha.js
|
||||
> ./alpha alpha
|
||||
[0] ./alpha.js 25 bytes {0} [built]
|
||||
single entry ./alpha alpha
|
||||
chunk {1} MyLibrary.beta.js (beta) 24 bytes [entry] [rendered]
|
||||
> beta [1] ./beta.js
|
||||
> ./beta beta
|
||||
[1] ./beta.js 24 bytes {1} [built]
|
||||
single entry ./beta beta
|
||||
```
|
||||
|
|
@ -270,11 +272,11 @@ MyLibrary.alpha.js 832 bytes 1 [emitted] alpha
|
|||
Entrypoint alpha = MyLibrary.alpha.js
|
||||
Entrypoint beta = MyLibrary.beta.js
|
||||
chunk {0} MyLibrary.beta.js (beta) 24 bytes [entry] [rendered]
|
||||
> beta [0] ./beta.js
|
||||
> ./beta beta
|
||||
[0] ./beta.js 24 bytes {0} [built]
|
||||
single entry ./beta beta
|
||||
chunk {1} MyLibrary.alpha.js (alpha) 25 bytes [entry] [rendered]
|
||||
> alpha [1] ./alpha.js
|
||||
> ./alpha alpha
|
||||
[1] ./alpha.js 25 bytes {1} [built]
|
||||
single entry ./alpha alpha
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,480 +0,0 @@
|
|||
# pageA.js
|
||||
|
||||
``` javascript
|
||||
require("./modules/a-b-c");
|
||||
require("./modules/a-b");
|
||||
require("./modules/a-c");
|
||||
```
|
||||
|
||||
# adminPageA.js
|
||||
|
||||
``` javascript
|
||||
require("./modules/a-b-c");
|
||||
require("./modules/admin");
|
||||
```
|
||||
|
||||
# webpack.config.js
|
||||
|
||||
``` javascript
|
||||
var path = require("path");
|
||||
var CommonsChunkPlugin = require("../../lib/optimize/CommonsChunkPlugin");
|
||||
module.exports = {
|
||||
// mode: "development || "production",
|
||||
entry: {
|
||||
pageA: "./pageA",
|
||||
pageB: "./pageB",
|
||||
pageC: "./pageC",
|
||||
adminPageA: "./adminPageA",
|
||||
adminPageB: "./adminPageB",
|
||||
adminPageC: "./adminPageC",
|
||||
},
|
||||
output: {
|
||||
path: path.join(__dirname, "dist"),
|
||||
filename: "[name].js"
|
||||
},
|
||||
plugins: [
|
||||
new CommonsChunkPlugin({
|
||||
name: "admin-commons",
|
||||
chunks: ["adminPageA", "adminPageB"]
|
||||
}),
|
||||
new CommonsChunkPlugin({
|
||||
name: "commons",
|
||||
chunks: ["pageA", "pageB", "admin-commons"],
|
||||
minChunks: 2
|
||||
}),
|
||||
new CommonsChunkPlugin({
|
||||
name: "c-commons",
|
||||
chunks: ["pageC", "adminPageC"]
|
||||
}),
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
# pageA.html
|
||||
|
||||
``` html
|
||||
<html>
|
||||
<head></head>
|
||||
<body>
|
||||
<script src="js/commons.js" charset="utf-8"></script>
|
||||
<script src="js/pageA.js" charset="utf-8"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# adminPageA.html
|
||||
|
||||
``` html
|
||||
<html>
|
||||
<head></head>
|
||||
<body>
|
||||
<script src="js/commons.js" charset="utf-8"></script>
|
||||
<script src="js/admin-commons.js" charset="utf-8"></script>
|
||||
<script src="js/adminPageA.js" charset="utf-8"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# dist/commons.js
|
||||
|
||||
<details><summary><code>/******/ (function(modules) { /* webpackBootstrap */ })</code></summary>
|
||||
|
||||
``` javascript
|
||||
/******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // install a JSONP callback for chunk loading
|
||||
/******/ function webpackJsonpCallback(data) {
|
||||
/******/ var chunkIds = data[0], moreModules = data[1], executeModules = data[2];
|
||||
/******/ // add "moreModules" to the modules object,
|
||||
/******/ // then flag all "chunkIds" as loaded and fire callback
|
||||
/******/ var moduleId, chunkId, i = 0, resolves = [], result;
|
||||
/******/ for(;i < chunkIds.length; i++) {
|
||||
/******/ chunkId = chunkIds[i];
|
||||
/******/ if(installedChunks[chunkId]) {
|
||||
/******/ resolves.push(installedChunks[chunkId][0]);
|
||||
/******/ }
|
||||
/******/ installedChunks[chunkId] = 0;
|
||||
/******/ }
|
||||
/******/ for(moduleId in moreModules) {
|
||||
/******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
|
||||
/******/ modules[moduleId] = moreModules[moduleId];
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ if(parentJsonpFunction) parentJsonpFunction(data);
|
||||
/******/ while(resolves.length) {
|
||||
/******/ resolves.shift()();
|
||||
/******/ }
|
||||
/******/ scheduledModules.push.apply(scheduledModules, executeModules || []);
|
||||
/******/
|
||||
/******/ for(i = 0; i < scheduledModules.length; i++) {
|
||||
/******/ var scheduledModule = scheduledModules[i];
|
||||
/******/ var fullfilled = true;
|
||||
/******/ for(var j = 1; j < scheduledModule.length; j++) {
|
||||
/******/ var depId = scheduledModule[j];
|
||||
/******/ if(installedChunks[depId] !== 0) fullfilled = false;
|
||||
/******/ }
|
||||
/******/ if(fullfilled) {
|
||||
/******/ scheduledModules.splice(i--, 1);
|
||||
/******/ result = __webpack_require__(__webpack_require__.s = scheduledModule[0]);
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ return result;
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
/******/ // object to store loaded and loading chunks
|
||||
/******/ var installedChunks = {
|
||||
/******/ 7: 0
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ var scheduledModules = [];
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
/******/
|
||||
/******/ // Check if module is in cache
|
||||
/******/ if(installedModules[moduleId]) {
|
||||
/******/ return installedModules[moduleId].exports;
|
||||
/******/ }
|
||||
/******/ // Create a new module (and put it into the cache)
|
||||
/******/ var module = installedModules[moduleId] = {
|
||||
/******/ i: moduleId,
|
||||
/******/ l: false,
|
||||
/******/ exports: {}
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Execute the module function
|
||||
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
||||
/******/
|
||||
/******/ // Flag the module as loaded
|
||||
/******/ module.l = true;
|
||||
/******/
|
||||
/******/ // Return the exports of the module
|
||||
/******/ return module.exports;
|
||||
/******/ }
|
||||
/******/
|
||||
/******/
|
||||
/******/ // expose the modules object (__webpack_modules__)
|
||||
/******/ __webpack_require__.m = modules;
|
||||
/******/
|
||||
/******/ // expose the module cache
|
||||
/******/ __webpack_require__.c = installedModules;
|
||||
/******/
|
||||
/******/ // define getter function for harmony exports
|
||||
/******/ __webpack_require__.d = function(exports, name, getter) {
|
||||
/******/ if(!__webpack_require__.o(exports, name)) {
|
||||
/******/ Object.defineProperty(exports, name, {
|
||||
/******/ configurable: false,
|
||||
/******/ enumerable: true,
|
||||
/******/ get: getter
|
||||
/******/ });
|
||||
/******/ }
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // define __esModule on exports
|
||||
/******/ __webpack_require__.r = function(exports) {
|
||||
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
||||
/******/ __webpack_require__.n = function(module) {
|
||||
/******/ var getter = module && module.__esModule ?
|
||||
/******/ function getDefault() { return module['default']; } :
|
||||
/******/ function getModuleExports() { return module; };
|
||||
/******/ __webpack_require__.d(getter, 'a', getter);
|
||||
/******/ return getter;
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Object.prototype.hasOwnProperty.call
|
||||
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
||||
/******/
|
||||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "dist/";
|
||||
/******/
|
||||
/******/ // on error function for async loading
|
||||
/******/ __webpack_require__.oe = function(err) { console.error(err); throw err; };
|
||||
/******/
|
||||
/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
|
||||
/******/ var parentJsonpFunction = jsonpArray.push.bind(jsonpArray);
|
||||
/******/ jsonpArray.push = webpackJsonpCallback;
|
||||
/******/ jsonpArray = jsonpArray.slice();
|
||||
/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
|
||||
/******/ })
|
||||
/************************************************************************/
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
``` javascript
|
||||
/******/ ([
|
||||
/* 0 */,
|
||||
/* 1 */
|
||||
/*!**************************!*\
|
||||
!*** ./modules/a-b-c.js ***!
|
||||
\**************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
|
||||
|
||||
/***/ }),
|
||||
/* 2 */
|
||||
/*!************************!*\
|
||||
!*** ./modules/a-b.js ***!
|
||||
\************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
|
||||
|
||||
/***/ })
|
||||
/******/ ]);
|
||||
```
|
||||
|
||||
# dist/pageA.js
|
||||
|
||||
``` javascript
|
||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],[
|
||||
/* 0 */
|
||||
/*!******************!*\
|
||||
!*** ./pageA.js ***!
|
||||
\******************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
__webpack_require__(/*! ./modules/a-b-c */ 1);
|
||||
__webpack_require__(/*! ./modules/a-b */ 2);
|
||||
__webpack_require__(/*! ./modules/a-c */ 3);
|
||||
|
||||
|
||||
/***/ }),
|
||||
/* 1 */,
|
||||
/* 2 */,
|
||||
/* 3 */
|
||||
/*!************************!*\
|
||||
!*** ./modules/a-c.js ***!
|
||||
\************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
|
||||
|
||||
/***/ })
|
||||
],[[0,7,0]]]);
|
||||
```
|
||||
|
||||
# dist/admin-commons.js
|
||||
|
||||
``` javascript
|
||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[6],{
|
||||
|
||||
/***/ 8:
|
||||
/*!**************************!*\
|
||||
!*** ./modules/admin.js ***!
|
||||
\**************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
|
||||
|
||||
/***/ })
|
||||
|
||||
}]);
|
||||
```
|
||||
|
||||
# dist/adminPageA.js
|
||||
|
||||
``` javascript
|
||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[3],{
|
||||
|
||||
/***/ 7:
|
||||
/*!***********************!*\
|
||||
!*** ./adminPageA.js ***!
|
||||
\***********************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
__webpack_require__(/*! ./modules/a-b-c */ 1);
|
||||
__webpack_require__(/*! ./modules/admin */ 8);
|
||||
|
||||
/***/ })
|
||||
|
||||
},[[7,7,6,3]]]);
|
||||
```
|
||||
|
||||
# Info
|
||||
|
||||
## Unoptimized
|
||||
|
||||
```
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
pageA.js 594 bytes 0 [emitted] pageA
|
||||
pageB.js 581 bytes 1 [emitted] pageB
|
||||
pageC.js 788 bytes 2 [emitted] pageC
|
||||
adminPageA.js 374 bytes 3 [emitted] adminPageA
|
||||
adminPageB.js 374 bytes 4 [emitted] adminPageB
|
||||
adminPageC.js 558 bytes 5 [emitted] adminPageC
|
||||
admin-commons.js 256 bytes 6 [emitted] admin-commons
|
||||
commons.js 5.03 KiB 7 [emitted] commons
|
||||
c-commons.js 4.85 KiB 8 [emitted] c-commons
|
||||
Entrypoint pageA = commons.js pageA.js
|
||||
Entrypoint pageB = commons.js pageB.js
|
||||
Entrypoint pageC = c-commons.js pageC.js
|
||||
Entrypoint adminPageA = commons.js admin-commons.js adminPageA.js
|
||||
Entrypoint adminPageB = commons.js admin-commons.js adminPageB.js
|
||||
Entrypoint adminPageC = c-commons.js adminPageC.js
|
||||
chunk {0} pageA.js (pageA) 83 bytes {7} [initial] [rendered]
|
||||
> pageA [0] ./pageA.js
|
||||
[0] ./pageA.js 83 bytes {0} [built]
|
||||
single entry ./pageA pageA
|
||||
[3] ./modules/a-c.js 0 bytes {0} {2} [built]
|
||||
cjs require ./modules/a-c [0] ./pageA.js 3:0-24
|
||||
cjs require ./modules/a-c [6] ./pageC.js 3:0-24
|
||||
chunk {1} pageB.js (pageB) 83 bytes {7} [initial] [rendered]
|
||||
> pageB [4] ./pageB.js
|
||||
[4] ./pageB.js 83 bytes {1} [built]
|
||||
single entry ./pageB pageB
|
||||
[5] ./modules/b-c.js 0 bytes {1} {2} [built]
|
||||
cjs require ./modules/b-c [4] ./pageB.js 3:0-24
|
||||
cjs require ./modules/b-c [6] ./pageC.js 2:0-24
|
||||
chunk {2} pageC.js (pageC) 83 bytes {8} [initial] [rendered]
|
||||
> pageC [6] ./pageC.js
|
||||
[3] ./modules/a-c.js 0 bytes {0} {2} [built]
|
||||
cjs require ./modules/a-c [0] ./pageA.js 3:0-24
|
||||
cjs require ./modules/a-c [6] ./pageC.js 3:0-24
|
||||
[5] ./modules/b-c.js 0 bytes {1} {2} [built]
|
||||
cjs require ./modules/b-c [4] ./pageB.js 3:0-24
|
||||
cjs require ./modules/b-c [6] ./pageC.js 2:0-24
|
||||
[6] ./pageC.js 83 bytes {2} [built]
|
||||
single entry ./pageC pageC
|
||||
chunk {3} adminPageA.js (adminPageA) 56 bytes {6} [initial] [rendered]
|
||||
> adminPageA [7] ./adminPageA.js
|
||||
[7] ./adminPageA.js 56 bytes {3} [built]
|
||||
single entry ./adminPageA adminPageA
|
||||
chunk {4} adminPageB.js (adminPageB) 56 bytes {6} [initial] [rendered]
|
||||
> adminPageB [9] ./adminPageB.js
|
||||
[9] ./adminPageB.js 56 bytes {4} [built]
|
||||
single entry ./adminPageB adminPageB
|
||||
chunk {5} adminPageC.js (adminPageC) 56 bytes {8} [initial] [rendered]
|
||||
> adminPageC [10] ./adminPageC.js
|
||||
[8] ./modules/admin.js 0 bytes {5} {6} [built]
|
||||
cjs require ./modules/admin [7] ./adminPageA.js 2:0-26
|
||||
cjs require ./modules/admin [9] ./adminPageB.js 2:0-26
|
||||
cjs require ./modules/admin [10] ./adminPageC.js 2:0-26
|
||||
[10] ./adminPageC.js 56 bytes {5} [built]
|
||||
single entry ./adminPageC adminPageC
|
||||
chunk {6} admin-commons.js (admin-commons) 0 bytes {7} [initial] [rendered]
|
||||
[8] ./modules/admin.js 0 bytes {5} {6} [built]
|
||||
cjs require ./modules/admin [7] ./adminPageA.js 2:0-26
|
||||
cjs require ./modules/admin [9] ./adminPageB.js 2:0-26
|
||||
cjs require ./modules/admin [10] ./adminPageC.js 2:0-26
|
||||
chunk {7} commons.js (commons) 0 bytes [entry] [rendered]
|
||||
[1] ./modules/a-b-c.js 0 bytes {7} {8} [built]
|
||||
cjs require ./modules/a-b-c [0] ./pageA.js 1:0-26
|
||||
cjs require ./modules/a-b-c [4] ./pageB.js 1:0-26
|
||||
cjs require ./modules/a-b-c [6] ./pageC.js 1:0-26
|
||||
cjs require ./modules/a-b-c [7] ./adminPageA.js 1:0-26
|
||||
cjs require ./modules/a-b-c [9] ./adminPageB.js 1:0-26
|
||||
cjs require ./modules/a-b-c [10] ./adminPageC.js 1:0-26
|
||||
[2] ./modules/a-b.js 0 bytes {7} [built]
|
||||
cjs require ./modules/a-b [0] ./pageA.js 2:0-24
|
||||
cjs require ./modules/a-b [4] ./pageB.js 2:0-24
|
||||
chunk {8} c-commons.js (c-commons) 0 bytes [entry] [rendered]
|
||||
[1] ./modules/a-b-c.js 0 bytes {7} {8} [built]
|
||||
cjs require ./modules/a-b-c [0] ./pageA.js 1:0-26
|
||||
cjs require ./modules/a-b-c [4] ./pageB.js 1:0-26
|
||||
cjs require ./modules/a-b-c [6] ./pageC.js 1:0-26
|
||||
cjs require ./modules/a-b-c [7] ./adminPageA.js 1:0-26
|
||||
cjs require ./modules/a-b-c [9] ./adminPageB.js 1:0-26
|
||||
cjs require ./modules/a-b-c [10] ./adminPageC.js 1:0-26
|
||||
```
|
||||
|
||||
## Production mode
|
||||
|
||||
```
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
admin-commons.js 77 bytes 0 [emitted] admin-commons
|
||||
adminPageC.js 119 bytes 1, 0 [emitted] adminPageC
|
||||
adminPageB.js 101 bytes 2 [emitted] adminPageB
|
||||
adminPageA.js 101 bytes 3 [emitted] adminPageA
|
||||
pageC.js 140 bytes 4 [emitted] pageC
|
||||
pageB.js 122 bytes 5 [emitted] pageB
|
||||
pageA.js 124 bytes 6 [emitted] pageA
|
||||
c-commons.js 1.06 KiB 7 [emitted] c-commons
|
||||
commons.js 1.08 KiB 8, 7 [emitted] commons
|
||||
Entrypoint pageA = commons.js pageA.js
|
||||
Entrypoint pageB = commons.js pageB.js
|
||||
Entrypoint pageC = c-commons.js pageC.js
|
||||
Entrypoint adminPageA = commons.js admin-commons.js adminPageA.js
|
||||
Entrypoint adminPageB = commons.js admin-commons.js adminPageB.js
|
||||
Entrypoint adminPageC = c-commons.js adminPageC.js
|
||||
chunk {0} admin-commons.js (admin-commons) 0 bytes {8} [initial] [rendered]
|
||||
[1] ./modules/admin.js 0 bytes {0} {1} [built]
|
||||
cjs require ./modules/admin [5] ./adminPageC.js 2:0-26
|
||||
cjs require ./modules/admin [6] ./adminPageB.js 2:0-26
|
||||
cjs require ./modules/admin [7] ./adminPageA.js 2:0-26
|
||||
chunk {1} adminPageC.js (adminPageC) 56 bytes {7} [initial] [rendered]
|
||||
> adminPageC [5] ./adminPageC.js
|
||||
[1] ./modules/admin.js 0 bytes {0} {1} [built]
|
||||
cjs require ./modules/admin [5] ./adminPageC.js 2:0-26
|
||||
cjs require ./modules/admin [6] ./adminPageB.js 2:0-26
|
||||
cjs require ./modules/admin [7] ./adminPageA.js 2:0-26
|
||||
[5] ./adminPageC.js 56 bytes {1} [built]
|
||||
single entry ./adminPageC adminPageC
|
||||
chunk {2} adminPageB.js (adminPageB) 56 bytes {0} [initial] [rendered]
|
||||
> adminPageB [6] ./adminPageB.js
|
||||
[6] ./adminPageB.js 56 bytes {2} [built]
|
||||
single entry ./adminPageB adminPageB
|
||||
chunk {3} adminPageA.js (adminPageA) 56 bytes {0} [initial] [rendered]
|
||||
> adminPageA [7] ./adminPageA.js
|
||||
[7] ./adminPageA.js 56 bytes {3} [built]
|
||||
single entry ./adminPageA adminPageA
|
||||
chunk {4} pageC.js (pageC) 83 bytes {7} [initial] [rendered]
|
||||
> pageC [8] ./pageC.js
|
||||
[2] ./modules/b-c.js 0 bytes {4} {5} [built]
|
||||
cjs require ./modules/b-c [8] ./pageC.js 2:0-24
|
||||
cjs require ./modules/b-c [9] ./pageB.js 3:0-24
|
||||
[3] ./modules/a-c.js 0 bytes {4} {6} [built]
|
||||
cjs require ./modules/a-c [8] ./pageC.js 3:0-24
|
||||
cjs require ./modules/a-c [10] ./pageA.js 3:0-24
|
||||
[8] ./pageC.js 83 bytes {4} [built]
|
||||
single entry ./pageC pageC
|
||||
chunk {5} pageB.js (pageB) 83 bytes {8} [initial] [rendered]
|
||||
> pageB [9] ./pageB.js
|
||||
[2] ./modules/b-c.js 0 bytes {4} {5} [built]
|
||||
cjs require ./modules/b-c [8] ./pageC.js 2:0-24
|
||||
cjs require ./modules/b-c [9] ./pageB.js 3:0-24
|
||||
[9] ./pageB.js 83 bytes {5} [built]
|
||||
single entry ./pageB pageB
|
||||
chunk {6} pageA.js (pageA) 83 bytes {8} [initial] [rendered]
|
||||
> pageA [10] ./pageA.js
|
||||
[3] ./modules/a-c.js 0 bytes {4} {6} [built]
|
||||
cjs require ./modules/a-c [8] ./pageC.js 3:0-24
|
||||
cjs require ./modules/a-c [10] ./pageA.js 3:0-24
|
||||
[10] ./pageA.js 83 bytes {6} [built]
|
||||
single entry ./pageA pageA
|
||||
chunk {7} c-commons.js (c-commons) 0 bytes [entry] [rendered]
|
||||
[0] ./modules/a-b-c.js 0 bytes {7} {8} [built]
|
||||
cjs require ./modules/a-b-c [5] ./adminPageC.js 1:0-26
|
||||
cjs require ./modules/a-b-c [6] ./adminPageB.js 1:0-26
|
||||
cjs require ./modules/a-b-c [7] ./adminPageA.js 1:0-26
|
||||
cjs require ./modules/a-b-c [8] ./pageC.js 1:0-26
|
||||
cjs require ./modules/a-b-c [9] ./pageB.js 1:0-26
|
||||
cjs require ./modules/a-b-c [10] ./pageA.js 1:0-26
|
||||
chunk {8} commons.js (commons) 0 bytes [entry] [rendered]
|
||||
[0] ./modules/a-b-c.js 0 bytes {7} {8} [built]
|
||||
cjs require ./modules/a-b-c [5] ./adminPageC.js 1:0-26
|
||||
cjs require ./modules/a-b-c [6] ./adminPageB.js 1:0-26
|
||||
cjs require ./modules/a-b-c [7] ./adminPageA.js 1:0-26
|
||||
cjs require ./modules/a-b-c [8] ./pageC.js 1:0-26
|
||||
cjs require ./modules/a-b-c [9] ./pageB.js 1:0-26
|
||||
cjs require ./modules/a-b-c [10] ./pageA.js 1:0-26
|
||||
[4] ./modules/a-b.js 0 bytes {8} [built]
|
||||
cjs require ./modules/a-b [9] ./pageB.js 2:0-24
|
||||
cjs require ./modules/a-b [10] ./pageA.js 2:0-24
|
||||
```
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
<html>
|
||||
<head></head>
|
||||
<body>
|
||||
<script src="js/commons.js" charset="utf-8"></script>
|
||||
<script src="js/admin-commons.js" charset="utf-8"></script>
|
||||
<script src="js/adminPageA.js" charset="utf-8"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
require("./modules/a-b-c");
|
||||
require("./modules/admin");
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
require("./modules/a-b-c");
|
||||
require("./modules/admin");
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
require("./modules/a-b-c");
|
||||
require("./modules/admin");
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
global.NO_TARGET_ARGS = true;
|
||||
require("../build-common");
|
||||
|
|
@ -1 +0,0 @@
|
|||
module.exports = "Common";
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<html>
|
||||
<head></head>
|
||||
<body>
|
||||
<script src="js/commons.js" charset="utf-8"></script>
|
||||
<script src="js/pageA.js" charset="utf-8"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
require("./modules/a-b-c");
|
||||
require("./modules/a-b");
|
||||
require("./modules/a-c");
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
require("./modules/a-b-c");
|
||||
require("./modules/a-b");
|
||||
require("./modules/b-c");
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
require("./modules/a-b-c");
|
||||
require("./modules/b-c");
|
||||
require("./modules/a-c");
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
# pageA.js
|
||||
|
||||
``` javascript
|
||||
{{pageA.js}}
|
||||
```
|
||||
|
||||
# adminPageA.js
|
||||
|
||||
``` javascript
|
||||
{{adminPageA.js}}
|
||||
```
|
||||
|
||||
# webpack.config.js
|
||||
|
||||
``` javascript
|
||||
{{webpack.config.js}}
|
||||
```
|
||||
|
||||
# pageA.html
|
||||
|
||||
``` html
|
||||
{{pageA.html}}
|
||||
```
|
||||
|
||||
# adminPageA.html
|
||||
|
||||
``` html
|
||||
{{adminPageA.html}}
|
||||
```
|
||||
|
||||
# dist/commons.js
|
||||
|
||||
``` javascript
|
||||
{{dist/commons.js}}
|
||||
```
|
||||
|
||||
# dist/pageA.js
|
||||
|
||||
``` javascript
|
||||
{{dist/pageA.js}}
|
||||
```
|
||||
|
||||
# dist/admin-commons.js
|
||||
|
||||
``` javascript
|
||||
{{dist/admin-commons.js}}
|
||||
```
|
||||
|
||||
# dist/adminPageA.js
|
||||
|
||||
``` javascript
|
||||
{{dist/adminPageA.js}}
|
||||
```
|
||||
|
||||
# Info
|
||||
|
||||
## Unoptimized
|
||||
|
||||
```
|
||||
{{stdout}}
|
||||
```
|
||||
|
||||
## Production mode
|
||||
|
||||
```
|
||||
{{production:stdout}}
|
||||
```
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
var path = require("path");
|
||||
var CommonsChunkPlugin = require("../../lib/optimize/CommonsChunkPlugin");
|
||||
module.exports = {
|
||||
// mode: "development || "production",
|
||||
entry: {
|
||||
pageA: "./pageA",
|
||||
pageB: "./pageB",
|
||||
pageC: "./pageC",
|
||||
adminPageA: "./adminPageA",
|
||||
adminPageB: "./adminPageB",
|
||||
adminPageC: "./adminPageC",
|
||||
},
|
||||
output: {
|
||||
path: path.join(__dirname, "dist"),
|
||||
filename: "[name].js"
|
||||
},
|
||||
plugins: [
|
||||
new CommonsChunkPlugin({
|
||||
name: "admin-commons",
|
||||
chunks: ["adminPageA", "adminPageB"]
|
||||
}),
|
||||
new CommonsChunkPlugin({
|
||||
name: "commons",
|
||||
chunks: ["pageA", "pageB", "admin-commons"],
|
||||
minChunks: 2
|
||||
}),
|
||||
new CommonsChunkPlugin({
|
||||
name: "c-commons",
|
||||
chunks: ["pageC", "adminPageC"]
|
||||
}),
|
||||
]
|
||||
};
|
||||
|
|
@ -1,356 +0,0 @@
|
|||
|
||||
# a.js
|
||||
|
||||
``` javascript
|
||||
require("./style.css");
|
||||
require("./styleA.css");
|
||||
```
|
||||
|
||||
# b.js
|
||||
|
||||
``` javascript
|
||||
require("./style.css");
|
||||
require("./styleB.css");
|
||||
```
|
||||
|
||||
# c.js
|
||||
|
||||
``` javascript
|
||||
require("./styleC.css");
|
||||
```
|
||||
|
||||
# style.css
|
||||
|
||||
``` css
|
||||
body {
|
||||
background: url(image.png);
|
||||
}
|
||||
```
|
||||
|
||||
# styleA.css
|
||||
|
||||
``` css
|
||||
.a {
|
||||
background: url(imageA.png);
|
||||
}
|
||||
```
|
||||
|
||||
# styleB.css
|
||||
|
||||
``` css
|
||||
.b {
|
||||
background: url(imageB.png);
|
||||
}
|
||||
```
|
||||
|
||||
# styleC.css
|
||||
|
||||
``` css
|
||||
@import "style.css";
|
||||
.c {
|
||||
background: url(imageC.png);
|
||||
}
|
||||
```
|
||||
|
||||
# webpack.config.js
|
||||
|
||||
``` javascript
|
||||
const path = require("path");
|
||||
const LoaderOptionsPlugin = require("../../lib/LoaderOptionsPlugin");
|
||||
const CommonsChunkPlugin = require("../../lib/optimize/CommonsChunkPlugin");
|
||||
const ExtractTextPlugin = require("extract-text-webpack-plugin");
|
||||
module.exports = {
|
||||
// mode: "development || "production",
|
||||
entry: {
|
||||
A: "./a",
|
||||
B: "./b",
|
||||
C: "./c",
|
||||
},
|
||||
output: {
|
||||
path: path.join(__dirname, "dist"),
|
||||
filename: "[name].js"
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
fallback: "style-loader",
|
||||
use: "css-loader"
|
||||
})
|
||||
},
|
||||
{ test: /\.png$/, loader: "file-loader" }
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new CommonsChunkPlugin({
|
||||
name: "commons",
|
||||
filename: "commons.js",
|
||||
chunks: ["A", "B"]
|
||||
}),
|
||||
new ExtractTextPlugin({
|
||||
filename: "[name].css"
|
||||
}),
|
||||
// Temporary workaround for the file-loader
|
||||
new LoaderOptionsPlugin({
|
||||
options: {}
|
||||
})
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
# dist/A.js
|
||||
|
||||
``` javascript
|
||||
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],{
|
||||
|
||||
/***/ 0:
|
||||
/*!**************!*\
|
||||
!*** ./a.js ***!
|
||||
\**************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
__webpack_require__(/*! ./style.css */ 1);
|
||||
__webpack_require__(/*! ./styleA.css */ 7);
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ 7:
|
||||
/*!********************!*\
|
||||
!*** ./styleA.css ***!
|
||||
\********************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
// removed by extract-text-webpack-plugin
|
||||
|
||||
/***/ })
|
||||
|
||||
},[[0,3,0]]]);
|
||||
```
|
||||
|
||||
# dist/commons.css
|
||||
|
||||
``` css
|
||||
body {
|
||||
background: url(dist/ce21cbdd9b894e6af794813eb3fdaf60.png);
|
||||
}
|
||||
```
|
||||
|
||||
# dist/A.css
|
||||
|
||||
``` css
|
||||
.a {
|
||||
background: url(dist/d090b6fba0f6d326d282a19146ff54a7.png);
|
||||
}
|
||||
```
|
||||
|
||||
# dist/B.css
|
||||
|
||||
``` css
|
||||
.b {
|
||||
background: url(dist/16155c689e517682064c99893cb832cc.png);
|
||||
}
|
||||
```
|
||||
|
||||
# dist/B.css (Minimized)
|
||||
|
||||
``` css
|
||||
.b {
|
||||
background: url(dist/16155c689e517682064c99893cb832cc.png);
|
||||
}
|
||||
```
|
||||
|
||||
# dist/C.css
|
||||
|
||||
``` css
|
||||
body {
|
||||
background: url(dist/ce21cbdd9b894e6af794813eb3fdaf60.png);
|
||||
}
|
||||
.c {
|
||||
background: url(dist/c2a2f62d69330b7d787782f5010f9d13.png);
|
||||
}
|
||||
```
|
||||
|
||||
# dist/C.css (Minimized)
|
||||
|
||||
``` css
|
||||
body {
|
||||
background: url(dist/ce21cbdd9b894e6af794813eb3fdaf60.png);
|
||||
}
|
||||
.c {
|
||||
background: url(dist/c2a2f62d69330b7d787782f5010f9d13.png);
|
||||
}
|
||||
```
|
||||
|
||||
# Info
|
||||
|
||||
## Unoptimized
|
||||
|
||||
```
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
C.js 2.97 KiB 2 [emitted] C
|
||||
d090b6fba0f6d326d282a19146ff54a7.png 120 bytes [emitted]
|
||||
ce21cbdd9b894e6af794813eb3fdaf60.png 119 bytes [emitted]
|
||||
c2a2f62d69330b7d787782f5010f9d13.png 120 bytes [emitted]
|
||||
A.js 547 bytes 0 [emitted] A
|
||||
B.js 551 bytes 1 [emitted] B
|
||||
16155c689e517682064c99893cb832cc.png 120 bytes [emitted]
|
||||
commons.js 4.87 KiB 3 [emitted] commons
|
||||
A.css 71 bytes 0 [emitted] A
|
||||
B.css 71 bytes 1 [emitted] B
|
||||
C.css 144 bytes 2 [emitted] C
|
||||
commons.css 73 bytes 3 [emitted] commons
|
||||
Entrypoint A = commons.js commons.css A.js A.css
|
||||
Entrypoint B = commons.js commons.css B.js B.css
|
||||
Entrypoint C = C.js C.css
|
||||
chunk {0} A.js, A.css (A) 92 bytes {3} [initial] [rendered]
|
||||
> A [0] ./a.js
|
||||
[0] ./a.js 51 bytes {0} [built]
|
||||
single entry ./a A
|
||||
[7] ./styleA.css 41 bytes [built]
|
||||
chunk {1} B.js, B.css (B) 92 bytes {3} [initial] [rendered]
|
||||
> B [10] ./b.js
|
||||
[10] ./b.js 51 bytes {1} [built]
|
||||
single entry ./b B
|
||||
[11] ./styleB.css 41 bytes [built]
|
||||
chunk {2} C.js, C.css (C) 67 bytes [entry] [rendered]
|
||||
> C [14] ./c.js
|
||||
[14] ./c.js 26 bytes {2} [built]
|
||||
single entry ./c C
|
||||
[15] ./styleC.css 41 bytes [built]
|
||||
chunk {3} commons.js, commons.css (commons) 41 bytes [entry] [rendered]
|
||||
[1] ./style.css 41 bytes [built]
|
||||
Child extract-text-webpack-plugin ../../node_modules/extract-text-webpack-plugin/dist ../../node_modules/css-loader/index.js!styleA.css:
|
||||
1 asset
|
||||
Entrypoint undefined = extract-text-webpack-plugin-output-filename
|
||||
chunk {0} extract-text-webpack-plugin-output-filename 2.52 KiB [entry] [rendered]
|
||||
> [0] (webpack)/node_modules/css-loader!./styleA.css
|
||||
[0] (webpack)/node_modules/css-loader!./styleA.css 234 bytes {0} [built]
|
||||
single entry !!(webpack)\node_modules\css-loader\index.js!.\styleA.css
|
||||
[2] ./imageA.png 82 bytes {0} [built]
|
||||
cjs require ./imageA.png [0] (webpack)/node_modules/css-loader!./styleA.css 6:56-79
|
||||
+ 1 hidden module
|
||||
Child extract-text-webpack-plugin ../../node_modules/extract-text-webpack-plugin/dist ../../node_modules/css-loader/index.js!styleB.css:
|
||||
1 asset
|
||||
Entrypoint undefined = extract-text-webpack-plugin-output-filename
|
||||
chunk {0} extract-text-webpack-plugin-output-filename 2.52 KiB [entry] [rendered]
|
||||
> [0] (webpack)/node_modules/css-loader!./styleB.css
|
||||
[0] (webpack)/node_modules/css-loader!./styleB.css 234 bytes {0} [built]
|
||||
single entry !!(webpack)\node_modules\css-loader\index.js!.\styleB.css
|
||||
[2] ./imageB.png 82 bytes {0} [built]
|
||||
cjs require ./imageB.png [0] (webpack)/node_modules/css-loader!./styleB.css 6:56-79
|
||||
+ 1 hidden module
|
||||
Child extract-text-webpack-plugin ../../node_modules/extract-text-webpack-plugin/dist ../../node_modules/css-loader/index.js!style.css:
|
||||
1 asset
|
||||
Entrypoint undefined = extract-text-webpack-plugin-output-filename
|
||||
chunk {0} extract-text-webpack-plugin-output-filename 2.52 KiB [entry] [rendered]
|
||||
> [0] (webpack)/node_modules/css-loader!./style.css
|
||||
[0] (webpack)/node_modules/css-loader!./style.css 235 bytes {0} [built]
|
||||
single entry !!(webpack)\node_modules\css-loader\index.js!.\style.css
|
||||
[2] ./image.png 82 bytes {0} [built]
|
||||
cjs require ./image.png [0] (webpack)/node_modules/css-loader!./style.css 6:58-80
|
||||
+ 1 hidden module
|
||||
Child extract-text-webpack-plugin ../../node_modules/extract-text-webpack-plugin/dist ../../node_modules/css-loader/index.js!styleC.css:
|
||||
2 assets
|
||||
Entrypoint undefined = extract-text-webpack-plugin-output-filename
|
||||
chunk {0} extract-text-webpack-plugin-output-filename 2.9 KiB [entry] [rendered]
|
||||
> [0] (webpack)/node_modules/css-loader!./styleC.css
|
||||
[0] (webpack)/node_modules/css-loader!./styleC.css 313 bytes {0} [built]
|
||||
single entry !!(webpack)\node_modules\css-loader\index.js!.\styleC.css
|
||||
[2] (webpack)/node_modules/css-loader!./style.css 235 bytes {0} [built]
|
||||
cjs require -!../../node_modules/css-loader/index.js!./style.css [0] (webpack)/node_modules/css-loader!./styleC.css 3:10-73
|
||||
[3] ./image.png 82 bytes {0} [built]
|
||||
cjs require ./image.png [2] (webpack)/node_modules/css-loader!./style.css 6:58-80
|
||||
[4] ./imageC.png 82 bytes {0} [built]
|
||||
cjs require ./imageC.png [0] (webpack)/node_modules/css-loader!./styleC.css 6:56-79
|
||||
+ 1 hidden module
|
||||
```
|
||||
|
||||
## Production mode
|
||||
|
||||
```
|
||||
Hash: 0a1b2c3d4e5f6a7b8c9d
|
||||
Version: webpack next
|
||||
Asset Size Chunks Chunk Names
|
||||
commons.js 1.06 KiB 2 [emitted] commons
|
||||
d090b6fba0f6d326d282a19146ff54a7.png 120 bytes [emitted]
|
||||
ce21cbdd9b894e6af794813eb3fdaf60.png 119 bytes [emitted]
|
||||
c2a2f62d69330b7d787782f5010f9d13.png 120 bytes [emitted]
|
||||
B.js 118 bytes 0 [emitted] B
|
||||
A.js 120 bytes 1 [emitted] A
|
||||
16155c689e517682064c99893cb832cc.png 120 bytes [emitted]
|
||||
C.js 576 bytes 3 [emitted] C
|
||||
A.css 71 bytes 1 [emitted] A
|
||||
B.css 71 bytes 0 [emitted] B
|
||||
C.css 144 bytes 3 [emitted] C
|
||||
commons.css 73 bytes 2 [emitted] commons
|
||||
Entrypoint A = commons.js commons.css A.js A.css
|
||||
Entrypoint B = commons.js commons.css B.js B.css
|
||||
Entrypoint C = C.js C.css
|
||||
chunk {0} B.js, B.css (B) 92 bytes {2} [initial] [rendered]
|
||||
> B [1] ./b.js
|
||||
[1] ./b.js 51 bytes {0} [built]
|
||||
single entry ./b B
|
||||
[8] ./styleB.css 41 bytes [built]
|
||||
chunk {1} A.js, A.css (A) 92 bytes {2} [initial] [rendered]
|
||||
> A [2] ./a.js
|
||||
[2] ./a.js 51 bytes {1} [built]
|
||||
single entry ./a A
|
||||
[11] ./styleA.css 41 bytes [built]
|
||||
chunk {2} commons.js, commons.css (commons) 41 bytes [entry] [rendered]
|
||||
[17] ./style.css 41 bytes [built]
|
||||
chunk {3} C.js, C.css (C) 67 bytes [entry] [rendered]
|
||||
> C [0] ./c.js
|
||||
[0] ./c.js 26 bytes {3} [built]
|
||||
single entry ./c C
|
||||
[5] ./styleC.css 41 bytes [built]
|
||||
Child extract-text-webpack-plugin ../../node_modules/extract-text-webpack-plugin/dist ../../node_modules/css-loader/index.js!styleA.css:
|
||||
1 asset
|
||||
Entrypoint undefined = extract-text-webpack-plugin-output-filename
|
||||
chunk {0} extract-text-webpack-plugin-output-filename 2.52 KiB [entry] [rendered]
|
||||
> [2] (webpack)/node_modules/css-loader!./styleA.css
|
||||
[0] ./imageA.png 82 bytes {0} [built]
|
||||
cjs require ./imageA.png [2] (webpack)/node_modules/css-loader!./styleA.css 6:56-79
|
||||
[2] (webpack)/node_modules/css-loader!./styleA.css 234 bytes {0} [built]
|
||||
single entry !!(webpack)\node_modules\css-loader\index.js!.\styleA.css
|
||||
+ 1 hidden module
|
||||
Child extract-text-webpack-plugin ../../node_modules/extract-text-webpack-plugin/dist ../../node_modules/css-loader/index.js!styleB.css:
|
||||
1 asset
|
||||
Entrypoint undefined = extract-text-webpack-plugin-output-filename
|
||||
chunk {0} extract-text-webpack-plugin-output-filename 2.52 KiB [entry] [rendered]
|
||||
> [2] (webpack)/node_modules/css-loader!./styleB.css
|
||||
[0] ./imageB.png 82 bytes {0} [built]
|
||||
cjs require ./imageB.png [2] (webpack)/node_modules/css-loader!./styleB.css 6:56-79
|
||||
[2] (webpack)/node_modules/css-loader!./styleB.css 234 bytes {0} [built]
|
||||
single entry !!(webpack)\node_modules\css-loader\index.js!.\styleB.css
|
||||
+ 1 hidden module
|
||||
Child extract-text-webpack-plugin ../../node_modules/extract-text-webpack-plugin/dist ../../node_modules/css-loader/index.js!style.css:
|
||||
1 asset
|
||||
Entrypoint undefined = extract-text-webpack-plugin-output-filename
|
||||
chunk {0} extract-text-webpack-plugin-output-filename 2.52 KiB [entry] [rendered]
|
||||
> [2] (webpack)/node_modules/css-loader!./style.css
|
||||
[0] ./image.png 82 bytes {0} [built]
|
||||
cjs require ./image.png [2] (webpack)/node_modules/css-loader!./style.css 6:58-80
|
||||
[2] (webpack)/node_modules/css-loader!./style.css 235 bytes {0} [built]
|
||||
single entry !!(webpack)\node_modules\css-loader\index.js!.\style.css
|
||||
+ 1 hidden module
|
||||
Child extract-text-webpack-plugin ../../node_modules/extract-text-webpack-plugin/dist ../../node_modules/css-loader/index.js!styleC.css:
|
||||
2 assets
|
||||
Entrypoint undefined = extract-text-webpack-plugin-output-filename
|
||||
chunk {0} extract-text-webpack-plugin-output-filename 2.9 KiB [entry] [rendered]
|
||||
> [4] (webpack)/node_modules/css-loader!./styleC.css
|
||||
[1] ./imageC.png 82 bytes {0} [built]
|
||||
cjs require ./imageC.png [4] (webpack)/node_modules/css-loader!./styleC.css 6:56-79
|
||||
[2] ./image.png 82 bytes {0} [built]
|
||||
cjs require ./image.png [3] (webpack)/node_modules/css-loader!./style.css 6:58-80
|
||||
[3] (webpack)/node_modules/css-loader!./style.css 235 bytes {0} [built]
|
||||
cjs require -!../../node_modules/css-loader/index.js!./style.css [4] (webpack)/node_modules/css-loader!./styleC.css 3:10-73
|
||||
[4] (webpack)/node_modules/css-loader!./styleC.css 313 bytes {0} [built]
|
||||
single entry !!(webpack)\node_modules\css-loader\index.js!.\styleC.css
|
||||
+ 1 hidden module
|
||||
```
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
require("./style.css");
|
||||
require("./styleA.css");
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
require("./style.css");
|
||||
require("./styleB.css");
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
global.NO_TARGET_ARGS = true;
|
||||
require("../build-common");
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue