2020-02-28 00:46:33 +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.
2015-11-21 04:36:43 +08:00
2020-02-28 00:46:33 +08:00
A very simple solution to this problem is to create another chunk that contains only the webpack runtime (including chunkhash map). This can be achieved with `optimization.runtimeChunk` options. 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:
2019-04-05 05:04:47 +08:00
- use `[chunkhash]` in `output.filename` (Note that this example doesn't do this because of the example generator infrastructure, but you should)
- use `[chunkhash]` in `output.chunkFilename` (Note that this example doesn't do this because of the example generator infrastructure, but you should)
2015-11-21 04:36:43 +08:00
# example.js
2019-04-05 05:04:47 +08:00
```javascript
_{{example.js}}_
2015-11-21 04:36:43 +08:00
```
# webpack.config.js
2019-04-05 05:04:47 +08:00
```javascript
_{{webpack.config.js}}_
2015-11-21 04:36:43 +08:00
```
# index.html
2019-04-05 05:04:47 +08:00
```html
2015-11-21 04:36:43 +08:00
< html >
2019-04-05 05:04:47 +08:00
< head > < / head >
< body >
<!-- inlined minimized file "runtime~main.[chunkhash].js" -->
< script >
_{{production:dist/runtime~main.chunkhash.js}}_
< / script >
< script src = "dist/main.[chunkhash].js" > < / script >
< / body >
2015-11-21 04:36:43 +08:00
< / html >
```
2018-02-10 22:04:45 +08:00
# dist/runtime~main.[chunkhash].js
2015-11-21 04:36:43 +08:00
2019-04-05 05:04:47 +08:00
```javascript
_{{dist/runtime~main.chunkhash.js}}_
2015-11-21 04:36:43 +08:00
```
2018-01-05 04:39:29 +08:00
# dist/main.[chunkhash].js
2015-11-21 04:36:43 +08:00
2019-04-05 05:04:47 +08:00
```javascript
_{{dist/main.chunkhash.js}}_
2015-11-21 04:36:43 +08:00
```
# Info
2017-12-14 17:09:09 +08:00
## Unoptimized
2015-11-21 04:36:43 +08:00
```
2019-04-05 05:04:47 +08:00
_{{stdout}}_
2015-11-21 04:36:43 +08:00
```
2017-12-14 17:09:09 +08:00
## Production mode
2015-11-21 04:36:43 +08:00
```
2019-04-05 05:04:47 +08:00
_{{production:stdout}}_
2017-12-14 17:09:09 +08:00
```
