root
/
webpack
mirror of https://github.com/webpack/webpack.git
1
0
Fork 0
Code Issues Actions 1 Packages Projects Releases Wiki Activity
webpack/examples/chunkhash/README.md

216 lines
9.0 KiB
Markdown
Raw Normal View History

added chunkhash example
2015-11-21 04:36:43 +08:00
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.
archieved —> achieved
2017-05-16 20:56:48 +08:00
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.
added chunkhash example
2015-11-21 04:36:43 +08:00
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`
# example.js
``` javascript
import vendor from "./vendor";
// some module
Regenerate examples
2017-02-13 15:49:35 +08:00
import("./async1");
import("./async2");
added chunkhash example
2015-11-21 04:36:43 +08:00
```
# vendor.js
``` javascript
// some vendor lib (should be in common chunk)
export default 123;
```
# webpack.config.js
``` javascript
var path = require("path");
var webpack = require("../../");
module.exports = {
update examples
2017-11-24 15:40:39 +08:00
mode: "production",
added chunkhash example
2015-11-21 04:36:43 +08:00
entry: {
main: "./example",
common: ["./vendor"] // optional
},
output: {
path: path.join(__dirname, "js"),
generate correct chunkhash configuration in example fixes #4396
2017-04-04 16:48:59 +08:00
filename: "[name].[chunkhash].js",
added chunkhash example
2015-11-21 04:36:43 +08:00
chunkFilename: "[chunkhash].js"
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ["common", "manifest"]
})
/* without the "common" chunk:
new webpack.optimize.CommonsChunkPlugin({
name: "manifest"
})
*/
]
};
```
# index.html
correct formating
2015-11-21 05:30:53 +08:00
``` html
added chunkhash example
2015-11-21 04:36:43 +08:00
<html>
<head>
</head>
<body>
<!-- inlined minimized file "manifest.[chunkhash].js" -->
<script>
update examples
2017-11-24 15:40:39 +08:00
!function(e){function r(r){for(var n,c,i,f=r[0],s=r[1],l=r[2],p=0,d=[];p<f.length;p++)c=f[p],o[c]&&d.push(o[c][0]),o[c]=0;for(n in s)Object.prototype.hasOwnProperty.call(s,n)&&(e[n]=s[n]);for(u&&u(r);d.length;)d.shift()();for(a.push.apply(a,l||[]),p=0;p<a.length;p++){for(var h=a[p],b=!0,v=1;v<h.length;v++){var g=h[v];0!==o[g]&&(b=!1)}b&&(a.splice(p--,1),i=t(t.s=h[0]))}return i}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},a=[];t.e=function(e){function r(r){i.onerror=i.onload=null,clearTimeout(f);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),a=r&&r.target&&r.target.src,c=new Error("Loading chunk "+e+" failed.\n("+n+": "+a+")");c.type=n,c.request=a,t[1](c)}o[e]=void 0}}var n=[],a=o[e];if(0!==a)if(a)n.push(a[2]);else{var c=new Promise(function(r,t){a=o[e]=[r,t]});n.push(a[2]=c);var u=document.getElementsByTagName("head")[0],i=document.createElement("script");i.charset="utf-8",i.timeout=12e4,t.nc&&i.setAttribute("nonce",t.nc),i.src=t.p+""+{0:"d384ba1bbf385fcafc99",1:"13604ac9ffd7d870f88b",2:"21bb96c534a4f1d84e54",3:"e5aa9efd1b127c0b8617"}[e]+".js";var f=setTimeout(function(){r({type:"timeout",target:i})},12e4);i.onerror=i.onload=r,u.appendChild(i)}return Promise.all(n)},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="js/",t.oe=function(e){throw console.error(e),e};var c=window.webpackJsonp=window.webpackJsonp||[],u=c.push.bind(c);c.push=r,c=c.slice();for(var i=0;i<c.length;i++)r(c[i])}([]);
added chunkhash example
2015-11-21 04:36:43 +08:00
</script>
<!-- optional when using the CommonChunkPlugin for vendor modules -->
<script src="js/common.[chunkhash].js"></script>
<script src="js/main.[chunkhash].js"></script>
</body>
</html>
```
# js/common.[chunkhash].js
``` javascript
Update examples
2017-11-23 16:47:19 +08:00
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],[
added chunkhash example
2015-11-21 04:36:43 +08:00
/* 0 */
/*!*******************!*\
!*** ./vendor.js ***!
\*******************/
update examples
2017-06-05 22:12:12 +08:00
/*! exports provided: default */
/*! all exports used */
update examples
2017-11-24 15:40:39 +08:00
/*! ModuleConcatenation bailout: Module is referenced from these modules with unsupported syntax: multi ./vendor (referenced with single entry) */
Regenerate examples
2017-02-13 15:49:35 +08:00
/***/ (function(module, __webpack_exports__, __webpack_require__) {
added chunkhash example
2015-11-21 04:36:43 +08:00
updated examples
2016-09-07 18:28:56 +08:00
"use strict";
update examples
2017-11-24 15:40:39 +08:00
__webpack_require__.r(__webpack_exports__);
updated examples
2016-09-07 18:28:56 +08:00
// some vendor lib (should be in common chunk)
Regenerate examples
2017-02-13 15:49:35 +08:00
/* harmony default export */ __webpack_exports__["default"] = (123);
added chunkhash example
2015-11-21 04:36:43 +08:00
Regenerate examples
2017-02-13 15:49:35 +08:00
/***/ }),
added chunkhash example
2015-11-21 04:36:43 +08:00
/* 1 */,
update examples
2017-06-05 22:12:12 +08:00
/* 2 */
Regenerate examples
2017-02-13 15:49:35 +08:00
/*!**********************!*\
!*** multi ./vendor ***!
\**********************/
update examples
2017-06-05 22:12:12 +08:00
/*! no static exports found */
/*! all exports used */
update examples
2017-11-24 15:40:39 +08:00
/*! ModuleConcatenation bailout: Module is not an ECMAScript module */
Regenerate examples
2017-02-13 15:49:35 +08:00
/***/ (function(module, exports, __webpack_require__) {
added chunkhash example
2015-11-21 04:36:43 +08:00
updated examples
2016-09-07 18:28:56 +08:00
module.exports = __webpack_require__(/*! ./vendor */0);
added chunkhash example
2015-11-21 04:36:43 +08:00
Regenerate examples
2017-02-13 15:49:35 +08:00
/***/ })
Update examples
2017-11-23 16:47:19 +08:00
],[[2,4,2]]]);
added chunkhash example
2015-11-21 04:36:43 +08:00
```
# js/main.[chunkhash].js
``` javascript
Update examples
2017-11-23 16:47:19 +08:00
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[3],[
update examples
2017-06-05 22:12:12 +08:00
/* 0 */,
/* 1 */
added chunkhash example
2015-11-21 04:36:43 +08:00
/*!********************!*\
!*** ./example.js ***!
\********************/
Update examples
2017-11-23 16:47:19 +08:00
/*! no exports provided */
update examples
2017-06-05 22:12:12 +08:00
/*! all exports used */
update examples
2017-11-24 15:40:39 +08:00
/*! ModuleConcatenation bailout: Module is an entry point */
Regenerate examples
2017-02-13 15:49:35 +08:00
/***/ (function(module, __webpack_exports__, __webpack_require__) {
added chunkhash example
2015-11-21 04:36:43 +08:00
updated examples
2016-09-07 18:28:56 +08:00
"use strict";
update examples
2017-11-24 15:40:39 +08:00
__webpack_require__.r(__webpack_exports__);
Update examples
2017-11-23 16:47:19 +08:00
/* harmony import */ var _vendor__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./vendor */0);
added chunkhash example
2015-11-21 04:36:43 +08:00
updated examples
2016-09-07 18:28:56 +08:00
// some module
update examples
2017-12-05 03:36:19 +08:00
__webpack_require__.e/* import() */(1).then(function() { var module = __webpack_require__(/*! ./async1 */3); return typeof module === "object" && module && module.__esModule ? module : /* fake namespace object */ { "default": module }; });
__webpack_require__.e/* import() */(0).then(function() { var module = __webpack_require__(/*! ./async2 */4); return typeof module === "object" && module && module.__esModule ? module : /* fake namespace object */ { "default": module }; });
added chunkhash example
2015-11-21 04:36:43 +08:00
Regenerate examples
2017-02-13 15:49:35 +08:00
/***/ })
Update examples
2017-11-23 16:47:19 +08:00
],[[1,4,2,3]]]);
added chunkhash example
2015-11-21 04:36:43 +08:00
```
# Info
## Uncompressed
```
Update examples
2017-11-23 16:47:19 +08:00
Hash: 19d389fe665472aada46
Version: webpack next
added chunkhash example
2015-11-21 04:36:43 +08:00
Asset Size Chunks Chunk Names
update examples
2017-11-24 15:40:39 +08:00
d384ba1bbf385fcafc99.js 359 bytes 0 [emitted]
13604ac9ffd7d870f88b.js 359 bytes 1 [emitted]
common.[chunkhash].js 975 bytes 2 [emitted] common
update examples
2017-12-05 03:36:19 +08:00
main.[chunkhash].js 1.01 KiB 3 [emitted] main
update examples
2017-11-24 15:40:39 +08:00
manifest.[chunkhash].js 7.14 KiB 4 [emitted] manifest
generate correct chunkhash configuration in example fixes #4396
2017-04-04 16:48:59 +08:00
Entrypoint main = manifest.[chunkhash].js common.[chunkhash].js main.[chunkhash].js
Entrypoint common = manifest.[chunkhash].js common.[chunkhash].js
Update examples
2017-11-23 16:47:19 +08:00
chunk {0} d384ba1bbf385fcafc99.js 29 bytes {3} [rendered]
update examples
2017-06-05 22:12:12 +08:00
> [1] ./example.js 4:0-18
[4] ./async2.js 29 bytes {0} [built]
import() ./async2 [1] ./example.js 4:0-18
Update examples
2017-11-23 16:47:19 +08:00
chunk {1} 13604ac9ffd7d870f88b.js 29 bytes {3} [rendered]
update examples
2017-06-05 22:12:12 +08:00
> [1] ./example.js 3:0-18
[3] ./async1.js 29 bytes {1} [built]
import() ./async1 [1] ./example.js 3:0-18
generate correct chunkhash configuration in example fixes #4396
2017-04-04 16:48:59 +08:00
chunk {2} common.[chunkhash].js (common) 97 bytes {4} [initial] [rendered]
update examples
2017-06-05 22:12:12 +08:00
> common [2] multi ./vendor
updated examples
2017-03-31 02:25:01 +08:00
[0] ./vendor.js 69 bytes {2} [built]
docs(example): update examples template (#3074) * docs(example): update examples template * docs(example): add npm script to build examples
2016-09-30 06:01:24 +08:00
[exports: default]
Update examples
2017-11-23 16:47:19 +08:00
harmony side effect evaluation ./vendor [1] ./example.js 1:0-30
update examples
2017-06-05 22:12:12 +08:00
single entry ./vendor [2] multi ./vendor common:100000
[2] multi ./vendor 28 bytes {2} [built]
Update examples
2017-11-23 16:47:19 +08:00
multi entry
generate correct chunkhash configuration in example fixes #4396
2017-04-04 16:48:59 +08:00
chunk {3} main.[chunkhash].js (main) 90 bytes {2} [initial] [rendered]
update examples
2017-06-05 22:12:12 +08:00
> main [1] ./example.js
[1] ./example.js 90 bytes {3} [built]
update examples
2017-08-08 20:00:06 +08:00
[no exports]
Update examples
2017-11-23 16:47:19 +08:00
single entry ./example main
generate correct chunkhash configuration in example fixes #4396
2017-04-04 16:48:59 +08:00
chunk {4} manifest.[chunkhash].js (manifest) 0 bytes [entry] [rendered]
added chunkhash example
2015-11-21 04:36:43 +08:00
```
## Minimized (uglify-js, no zip)
```
Update examples
2017-11-23 16:47:19 +08:00
Hash: 19d389fe665472aada46
Version: webpack next
added chunkhash example
2015-11-21 04:36:43 +08:00
Asset Size Chunks Chunk Names
Update examples
2017-11-23 16:47:19 +08:00
d384ba1bbf385fcafc99.js 78 bytes 0 [emitted]
13604ac9ffd7d870f88b.js 78 bytes 1 [emitted]
update examples
2017-11-24 15:40:39 +08:00
common.[chunkhash].js 154 bytes 2 [emitted] common
update examples
2017-12-05 03:36:19 +08:00
main.[chunkhash].js 299 bytes 3 [emitted] main
update examples
2017-11-24 15:40:39 +08:00
manifest.[chunkhash].js 1.81 KiB 4 [emitted] manifest
generate correct chunkhash configuration in example fixes #4396
2017-04-04 16:48:59 +08:00
Entrypoint main = manifest.[chunkhash].js common.[chunkhash].js main.[chunkhash].js
Entrypoint common = manifest.[chunkhash].js common.[chunkhash].js
Update examples
2017-11-23 16:47:19 +08:00
chunk {0} d384ba1bbf385fcafc99.js 29 bytes {3} [rendered]
update examples
2017-06-05 22:12:12 +08:00
> [1] ./example.js 4:0-18
[4] ./async2.js 29 bytes {0} [built]
import() ./async2 [1] ./example.js 4:0-18
Update examples
2017-11-23 16:47:19 +08:00
chunk {1} 13604ac9ffd7d870f88b.js 29 bytes {3} [rendered]
update examples
2017-06-05 22:12:12 +08:00
> [1] ./example.js 3:0-18
[3] ./async1.js 29 bytes {1} [built]
import() ./async1 [1] ./example.js 3:0-18
generate correct chunkhash configuration in example fixes #4396
2017-04-04 16:48:59 +08:00
chunk {2} common.[chunkhash].js (common) 97 bytes {4} [initial] [rendered]
update examples
2017-06-05 22:12:12 +08:00
> common [2] multi ./vendor
updated examples
2017-03-31 02:25:01 +08:00
[0] ./vendor.js 69 bytes {2} [built]
docs(example): update examples template (#3074) * docs(example): update examples template * docs(example): add npm script to build examples
2016-09-30 06:01:24 +08:00
[exports: default]
Update examples
2017-11-23 16:47:19 +08:00
harmony side effect evaluation ./vendor [1] ./example.js 1:0-30
update examples
2017-06-05 22:12:12 +08:00
single entry ./vendor [2] multi ./vendor common:100000
[2] multi ./vendor 28 bytes {2} [built]
Update examples
2017-11-23 16:47:19 +08:00
multi entry
generate correct chunkhash configuration in example fixes #4396
2017-04-04 16:48:59 +08:00
chunk {3} main.[chunkhash].js (main) 90 bytes {2} [initial] [rendered]
update examples
2017-06-05 22:12:12 +08:00
> main [1] ./example.js
[1] ./example.js 90 bytes {3} [built]
update examples
2017-08-08 20:00:06 +08:00
[no exports]
Update examples
2017-11-23 16:47:19 +08:00
single entry ./example main
generate correct chunkhash configuration in example fixes #4396
2017-04-04 16:48:59 +08:00
chunk {4} manifest.[chunkhash].js (manifest) 0 bytes [entry] [rendered]
added chunkhash example
2015-11-21 04:36:43 +08:00
```