webpack/examples/chunkhash/template.md

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 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` (Note that this example doesn't do this because of the example generator infrastructure, but you should)

# example.js

``` javascript
{{example.js}}
```

# webpack.config.js

``` javascript
{{webpack.config.js}}
```

# index.html

``` html
<html>
<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>
</html>
```

# dist/runtime~main.[chunkhash].js

``` javascript
{{dist/runtime~main.chunkhash.js}}
```

# dist/main.[chunkhash].js

``` javascript
{{dist/main.chunkhash.js}}
```

# Info

## Unoptimized

```
{{stdout}}
```

## Production mode

```
{{production:stdout}}
```
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.

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 2018-01-20 00:06:59 +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 with the `optimization.runtimeChunk` options. 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)
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 2018-01-20 00:06:59 +08:00			* use `[chunkhash]` in `output.chunkFilename` (Note that this example doesn't do this because of the example generator infrastructure, but you should)
added chunkhash example 2015-11-21 04:36:43 +08:00
			`# example.js`

			``` javascript
			`{{example.js}}`
			```

			`# webpack.config.js`

			``` javascript
			`{{webpack.config.js}}`
			```

			`# 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>`

fix chunkhash example 2018-02-10 22:04:45 +08:00			`<!-- inlined minimized file "runtime~main.[chunkhash].js" -->`
added chunkhash example 2015-11-21 04:36:43 +08:00			`<script>`
fix chunkhash example 2018-02-10 22:04:45 +08:00			`{{production:dist/runtime~main.chunkhash.js}}`
added chunkhash example 2015-11-21 04:36:43 +08:00			`</script>`

change output from examples for js/ to dist/ 2018-01-05 04:39:29 +08:00			`<script src="dist/main.[chunkhash].js"></script>`
added chunkhash example 2015-11-21 04:36:43 +08:00
			`</body>`
			`</html>`
			```

fix chunkhash example 2018-02-10 22:04:45 +08:00			`# dist/runtime~main.[chunkhash].js`
added chunkhash example 2015-11-21 04:36:43 +08:00
			``` javascript
fix chunkhash example 2018-02-10 22:04:45 +08:00			`{{dist/runtime~main.chunkhash.js}}`
added chunkhash example 2015-11-21 04:36:43 +08:00			```

change output from examples for js/ to dist/ 2018-01-05 04:39:29 +08:00			`# dist/main.[chunkhash].js`
added chunkhash example 2015-11-21 04:36:43 +08:00
			``` javascript
change output from examples for js/ to dist/ 2018-01-05 04:39:29 +08:00			`{{dist/main.chunkhash.js}}`
added chunkhash example 2015-11-21 04:36:43 +08:00			```

			`# Info`

update example configurations for latest mode changes 2017-12-14 17:09:09 +08:00			`## Unoptimized`
added chunkhash example 2015-11-21 04:36:43 +08:00
			```
			`{{stdout}}`
			```

update example configurations for latest mode changes 2017-12-14 17:09:09 +08:00			`## Production mode`
added chunkhash example 2015-11-21 04:36:43 +08:00
			```
update example configurations for latest mode changes 2017-12-14 17:09:09 +08:00			`{{production:stdout}}`
			```