@@ -37,40 +37,28 @@ The CSS is merged using the `optimization.splitChunks.cacheGroups` rule:
37
37
```
38
38
// Merge all the CSS into one file
39
39
styles: {
40
- name: 'styles',
41
- test: /\.s?css$/,
42
- chunks: 'all',
43
- minChunks: 1,
44
- reuseExistingChunk: true,
40
+ name: 'styles',
41
+ test: /\.s?css$/,
42
+ chunks: 'all',
43
+ minChunks: 1,
44
+ reuseExistingChunk: true,
45
+ enforce: true,
45
46
},
46
47
```
47
48
48
49
This outputs the following assets:
49
50
50
51
```
51
- Asset Size Chunks Chunk Names
52
- critical.css 68 bytes 0 [emitted] critical
53
- critical.js 101 bytes 0 [emitted] critical
54
- MyComponent.css 50 bytes 1 [emitted] MyComponent
55
- MyComponent.js 436 bytes 1 [emitted] MyComponent
56
- vendors.js 96.8 KiB 2 [emitted] vendors
57
- main.css 31 bytes 3 [emitted] main
58
- main.js 3.74 KiB 3 [emitted] main
59
- index.html 399 bytes [emitted]
60
- Entrypoint main = vendors.js critical.css critical.js main.css main.js
61
- ```
62
-
63
- Both ` main.css ` and ` critical.css ` should be loaded as ` link ` in the page. ` main.css ` could
64
- however be deferred, as illustrated below.
65
-
66
- ```
67
- <link href="critical.css" rel="stylesheet">
68
- <link
69
- rel="stylesheet"
70
- href="main.css"
71
- media="none"
72
- onload="if(media!='screen')media='screen'">
73
- <noscript>
74
- <link rel="stylesheet" href="main.css">
75
- </noscript>
52
+ Hash: 58324b488358ee191231
53
+ Version: webpack 4.2.0
54
+ Time: 806ms
55
+ Built at: 2018-3-23 14:12:41
56
+ Asset Size Chunks Chunk Names
57
+ styles.css 93 bytes 0 [emitted] styles
58
+ styles.js 121 bytes 0 [emitted] styles
59
+ MyComponent.js 409 bytes 1 [emitted] MyComponent
60
+ vendors.js 96.8 KiB 2 [emitted] vendors
61
+ bundle.js 3.45 KiB 3 [emitted] bundle
62
+ index.html 358 bytes [emitted]
63
+ Entrypoint bundle = vendors.js styles.css styles.js bundle.js
76
64
```
0 commit comments