Skip to content

Commit 78c61a0

Browse files
committed
WIP14
1 parent 7bd207f commit 78c61a0

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

69 files changed

+1577
-3077
lines changed

examples/chunkhash/README.md

Lines changed: 272 additions & 105 deletions
Large diffs are not rendered by default.

examples/chunkhash/template.md

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
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.
22

3-
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.
3+
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.
44

55
The configuration required for this is:
66

77
* use `[chunkhash]` in `output.filename` (Note that this example doesn't do this because of the example generator infrastructure, but you should)
8-
* use `[chunkhash]` in `output.chunkFilename`
9-
* `CommonsChunkPlugin`
8+
* use `[chunkhash]` in `output.chunkFilename` (Note that this example doesn't do this because of the example generator infrastructure, but you should)
109

1110
# example.js
1211

@@ -36,22 +35,22 @@ The configuration required for this is:
3635

3736
<!-- inlined minimized file "manifest.[chunkhash].js" -->
3837
<script>
39-
{{production:dist/manifest.chunkhash.js}}
38+
{{production:dist/main-runtime.chunkhash.js}}
4039
</script>
4140

4241
<!-- optional when using the CommonChunkPlugin for vendor modules -->
43-
<script src="dist/common.[chunkhash].js"></script>
42+
<script src="dist/main-runtime.[chunkhash].js"></script>
4443

4544
<script src="dist/main.[chunkhash].js"></script>
4645

4746
</body>
4847
</html>
4948
```
5049

51-
# dist/common.[chunkhash].js
50+
# dist/main-runtime.[chunkhash].js
5251

5352
``` javascript
54-
{{dist/common.chunkhash.js}}
53+
{{dist/main-runtime.chunkhash.js}}
5554
```
5655

5756
# dist/main.[chunkhash].js

examples/chunkhash/webpack.config.js

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,15 @@
11
var path = require("path");
2-
var webpack = require("../../");
32
module.exports = {
43
// mode: "development || "production",
54
entry: {
6-
main: "./example",
7-
common: ["./vendor"] // optional
5+
main: "./example"
6+
},
7+
optimization: {
8+
runtimeChunk: true
89
},
910
output: {
1011
path: path.join(__dirname, "dist"),
1112
filename: "[name].chunkhash.js",
12-
chunkFilename: "[chunkhash].js"
13-
},
14-
plugins: [
15-
new webpack.optimize.CommonsChunkPlugin({
16-
names: ["common", "manifest"]
17-
})
18-
/* without the "common" chunk:
19-
new webpack.optimize.CommonsChunkPlugin({
20-
name: "manifest"
21-
})
22-
*/
23-
]
13+
chunkFilename: "[name].chunkhash.js"
14+
}
2415
};

0 commit comments

Comments
 (0)