1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
This example shows how to create an explicit vendor chunk as well as a common chunk for code shared among entry points. In this example, we have 3 entry points: `pageA`, `pageB`, and `pageC`. Those entry points share some of the same utility modules, but not others. This configuration will pull out any modules common to at least 2 bundles and place it in the `common` bundle instead, all while keeping the specified vendor libraries in their own bundle by themselves.
To better understand, here are the entry points and which utility modules they depend on:
- `pageA`
- `utility1`
- `utility2`
- `pageB`
- `utility2`
- `utility3`
- `pageC`
- `utility2`
- `utility3`
Given this configuration, webpack will produce the following bundles:
- `vendor`
- webpack runtime
- `vendor1`
- `vendor2`
- `common`
- `utility2`
- `utility3`
- `pageA`
- `pageA`
- `utility1`
- `pageB`
- `pageB`
- `pageC`
- `pageC`
With this bundle configuration, you would load your third party libraries, then your common application code, then your page-specific application code.
# webpack.config.js
```javascript
_{{webpack.config.js}}_
```
# dist/vendor.js
```javascript
_{{dist/vendor.js}}_
```
# dist/commons-utility2_js.js
``` javascript
_{{dist/commons-utility2_js.js}}_
```
# dist/commons-utility3_js.js
``` javascript
_{{dist/commons-utility3_js.js}}_
```
# dist/pageA.js
```javascript
_{{dist/pageA.js}}_
```
# dist/pageB.js
```javascript
_{{dist/pageB.js}}_
```
# dist/pageC.js
```javascript
_{{dist/pageC.js}}_
```
# Info
## Unoptimized
```
_{{stdout}}_
```
## Production mode
```
_{{production:stdout}}_
```
|
