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 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.

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
{{example.js}}
```

# vendor.js

``` javascript
{{vendor.js}}
```

# webpack.config.js

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

# index.html

``` html
<html>
<head>
</head>
<body>

<!-- inlined minimized file "manifest.[chunkhash].js" -->
<script>
{{production:js/manifest.chunkhash.js}}
</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
{{js/common.chunkhash.js}}
```

# js/main.[chunkhash].js

``` javascript
{{js/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.

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
			`{{example.js}}`
			```

			`# vendor.js`

			``` javascript
			`{{vendor.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>`

			`<!-- inlined minimized file "manifest.[chunkhash].js" -->`
			`<script>`
update example configurations for latest mode changes 2017-12-14 17:09:09 +08:00			`{{production:js/manifest.chunkhash.js}}`
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
			`{{js/common.chunkhash.js}}`
			```

			`# js/main.[chunkhash].js`

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

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