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.
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.
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
2017-02-13 15:49:35 +08:00
import("./async1");
import("./async2");
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 = {
2017-12-14 17:58:03 +08:00
// mode: "development || "production",
2015-11-21 04:36:43 +08:00
entry: {
main: "./example",
common: ["./vendor"] // optional
},
output: {
path: path.join(__dirname, "js"),
2017-04-04 16:48:59 +08:00
filename: "[name].[chunkhash].js",
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
2015-11-21 05:30:53 +08:00
``` html
2015-11-21 04:36:43 +08:00
< html >
< head >
< / head >
< body >
<!-- inlined minimized file "manifest.[chunkhash].js" -->
< script >
2018-01-03 18:03:20 +08:00
!function(e){function r(r){for(var n,u,i,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 ( c && c ( r ); d . length ;) d . shift ()(); for ( a . push . apply ( a , p ||[]), f = 0;f<a.length;f++){for(var h = a[f],v=!0,g=1;g<h.length;g++){var m = h[g];0!==o[m]&&(v=!1)}v&&(a.splice(f--,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){var r = [],n=o[e];if(0!==n)if(n)r.push(n[2]);else{var a = new Promise ( function ( r , t ){ n = o[e]=[r,t]});r.push(n[2]=a);var u = document.getElementsByTagName("head")[0],c=document.createElement("script");c.charset="utf-8",c.timeout=12e4,t.nc&&c.setAttribute("nonce",t.nc),c.src=t.p+""+{0:"19a84e789378731c8460",1:"4f0e85908244254bb448",2:"b94c93d31c5a9a6a8fe7",3:"59214344cd83683ae9d1"}[e]+".js";var i = setTimeout(function(){s({type:"timeout",target:c})},12e4);c.onerror=c.onload=s;function s ( r ){ c . onerror = c.onload=null,clearTimeout(i);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,u=new Error (" Loading chunk "+ e +" failed . \n("+ n +" : "+ a +")"); u . type = n,u.request=a,t[1](u)}o[e]=void 0 }} u . appendChild ( c )} 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 = "js/" , t . oe = function(e){throw console . error ( e ), e }; var u = window.webpackJsonp=window.webpackJsonp||[],c=u.push.bind(u);u.push=r,u=u.slice();for(var i = 0;i<u.length;i++)r(u[i])}([]);
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
2017-12-14 17:58:03 +08:00
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
/* 0 */,
/* 1 */
2015-11-21 04:36:43 +08:00
/*!*******************!*\
!*** ./vendor.js ** *!
\*******************/
2017-06-05 22:12:12 +08:00
/*! exports provided: default */
2017-02-13 15:49:35 +08:00
/***/ (function(module, __webpack_exports__ , __webpack_require__ ) {
2015-11-21 04:36:43 +08:00
2016-09-07 18:28:56 +08:00
"use strict";
2017-11-24 15:40:39 +08:00
__webpack_require__.r(__webpack_exports__);
2016-09-07 18:28:56 +08:00
// some vendor lib (should be in common chunk)
2017-02-13 15:49:35 +08:00
/* harmony default export */ __webpack_exports__ ["default"] = (123);
2015-11-21 04:36:43 +08:00
2017-02-13 15:49:35 +08:00
/***/ }),
2017-12-14 17:58:03 +08:00
/* 2 */,
/* 3 */,
/* 4 */
2017-02-13 15:49:35 +08:00
/*!**********************!*\
!*** multi ./vendor ** *!
\**********************/
2017-06-05 22:12:12 +08:00
/*! no static exports found */
2017-02-13 15:49:35 +08:00
/***/ (function(module, exports, __webpack_require__ ) {
2015-11-21 04:36:43 +08:00
2017-12-14 17:58:03 +08:00
module.exports = __webpack_require__ (/*! ./vendor */1);
2015-11-21 04:36:43 +08:00
2017-02-13 15:49:35 +08:00
/***/ })
2017-12-14 17:58:03 +08:00
],[[4,4,1]]]);
2015-11-21 04:36:43 +08:00
```
# js/main.[chunkhash].js
``` javascript
2017-12-14 17:58:03 +08:00
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],[
/* 0 */
2015-11-21 04:36:43 +08:00
/*!********************!*\
!*** ./example.js ** *!
\********************/
2017-11-23 16:47:19 +08:00
/*! no exports provided */
2017-02-13 15:49:35 +08:00
/***/ (function(module, __webpack_exports__ , __webpack_require__ ) {
2015-11-21 04:36:43 +08:00
2016-09-07 18:28:56 +08:00
"use strict";
2017-11-24 15:40:39 +08:00
__webpack_require__.r(__webpack_exports__);
2018-01-03 18:03:20 +08:00
/* harmony import */ var _vendor__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/* ! ./vendor */ 1);
2015-11-21 04:36:43 +08:00
2016-09-07 18:28:56 +08:00
// some module
2018-01-03 18:03:20 +08:00
__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 }; });
2015-11-21 04:36:43 +08:00
2017-02-13 15:49:35 +08:00
/***/ })
2017-12-14 17:58:03 +08:00
],[[0,4,1,0]]]);
2015-11-21 04:36:43 +08:00
```
# Info
2017-12-14 17:58:03 +08:00
## Unoptimized
2015-11-21 04:36:43 +08:00
```
2017-12-14 17:58:03 +08:00
Hash: 0a1b2c3d4e5f6a7b8c9d
2017-11-23 16:47:19 +08:00
Version: webpack next
2015-11-21 04:36:43 +08:00
Asset Size Chunks Chunk Names
2018-01-03 18:03:20 +08:00
main.[chunkhash].js 944 bytes 0 [emitted] main
2017-12-14 17:58:03 +08:00
common.[chunkhash].js 727 bytes 1 [emitted] common
2018-01-03 18:03:20 +08:00
b71c088662b7b530c545.js 264 bytes 2 [emitted]
f6eb6a4d15b19e593a54.js 264 bytes 3 [emitted]
2018-01-05 04:14:02 +08:00
manifest.[chunkhash].js 7.15 KiB 4 [emitted] manifest
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
2017-12-14 17:58:03 +08:00
chunk {0} main.[chunkhash].js (main) 90 bytes {1} [initial] [rendered]
> main [0] ./example.js
[0] ./example.js 90 bytes {0} [built]
2017-08-08 20:00:06 +08:00
[no exports]
2017-11-23 16:47:19 +08:00
single entry ./example main
2017-12-14 17:58:03 +08:00
chunk {1} common.[chunkhash].js (common) 97 bytes {4} [initial] [rendered]
> common [4] multi ./vendor
[1] ./vendor.js 69 bytes {1} [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
2018-01-03 18:03:20 +08:00
chunk {2} b71c088662b7b530c545.js 29 bytes {0} [rendered]
2017-12-14 17:58:03 +08:00
> [0] ./example.js 3:0-18
[2] ./async1.js 29 bytes {2} [built]
import() ./async1 [0] ./example.js 3:0-18
2018-01-03 18:03:20 +08:00
chunk {3} f6eb6a4d15b19e593a54.js 29 bytes {0} [rendered]
2017-12-14 17:58:03 +08:00
> [0] ./example.js 4:0-18
[3] ./async2.js 29 bytes {3} [built]
import() ./async2 [0] ./example.js 4:0-18
2017-04-04 16:48:59 +08:00
chunk {4} manifest.[chunkhash].js (manifest) 0 bytes [entry] [rendered]
2015-11-21 04:36:43 +08:00
```
2017-12-14 17:58:03 +08:00
## Production mode
2015-11-21 04:36:43 +08:00
```
2017-12-14 17:58:03 +08:00
Hash: 0a1b2c3d4e5f6a7b8c9d
2017-11-23 16:47:19 +08:00
Version: webpack next
2015-11-21 04:36:43 +08:00
Asset Size Chunks Chunk Names
2018-01-03 18:03:20 +08:00
19a84e789378731c8460.js 78 bytes 0 [emitted]
4f0e85908244254bb448.js 78 bytes 1 [emitted]
2017-12-21 18:19:53 +08:00
common.[chunkhash].js 153 bytes 2 [emitted] common
main.[chunkhash].js 300 bytes 3 [emitted] main
2017-11-24 15:40:39 +08:00
manifest.[chunkhash].js 1.81 KiB 4 [emitted] manifest
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
2018-01-03 18:03:20 +08:00
chunk {0} 19a84e789378731c8460.js 29 bytes {3} [rendered]
2017-12-21 18:19:53 +08:00
> [2] ./example.js 4:0-18
[3] ./async2.js 29 bytes {0} [built]
import() ./async2 [2] ./example.js 4:0-18
2018-01-03 18:03:20 +08:00
chunk {1} 4f0e85908244254bb448.js 29 bytes {3} [rendered]
2017-12-21 18:19:53 +08:00
> [2] ./example.js 3:0-18
[4] ./async1.js 29 bytes {1} [built]
import() ./async1 [2] ./example.js 3:0-18
2017-04-04 16:48:59 +08:00
chunk {2} common.[chunkhash].js (common) 97 bytes {4} [initial] [rendered]
2017-12-21 18:19:53 +08:00
> common [1] multi ./vendor
2017-03-31 02:25:01 +08:00
[0] ./vendor.js 69 bytes {2} [built]
2016-09-30 06:01:24 +08:00
[exports: default]
2017-12-21 18:19:53 +08:00
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]
2017-11-23 16:47:19 +08:00
multi entry
2017-04-04 16:48:59 +08:00
chunk {3} main.[chunkhash].js (main) 90 bytes {2} [initial] [rendered]
2017-12-21 18:19:53 +08:00
> main [2] ./example.js
[2] ./example.js 90 bytes {3} [built]
2017-08-08 20:00:06 +08:00
[no exports]
2017-11-23 16:47:19 +08:00
single entry ./example main
2017-04-04 16:48:59 +08:00
chunk {4} manifest.[chunkhash].js (manifest) 0 bytes [entry] [rendered]
2017-12-14 17:58:03 +08:00
```
