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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
This example demonstrates Scope Hoisting in combination with Code Splitting.
This is the dependency graph for the example: (solid lines express sync imports, dashed lines async imports)
All modules except `cjs` are EcmaScript modules. `cjs` is a CommonJs module.
The interesting thing here is that putting all modules in single scope won't work, because of multiple reasons:
- Modules `lazy`, `c`, `d` and `cjs` need to be in a separate chunk
- Module `shared` is accessed by two chunks (different scopes)
- Module `cjs` is a CommonJs module
webpack therefore uses a approach called **"Partial Scope Hoisting"** or "Module concatenation", which chooses the largest possible subsets of ES modules which can be scope hoisted and combines them with the default webpack primitives.
While module concatenation identifiers in modules are renamed to avoid conflicts and internal imports are simplified. External imports and exports from the root module use the existing ESM constructs.
# example.js
```javascript
_{{example.js}}_
```
# lazy.js
```javascript
_{{lazy.js}}_
```
# a.js
```javascript
_{{node_modules/a.js}}_
```
# b.js
```javascript
_{{node_modules/b.js}}_
```
# c.js
```javascript
_{{node_modules/c.js}}_
```
# d.js
```javascript
_{{node_modules/d.js}}_
```
# cjs.js
```javascript
_{{node_modules/cjs.js}}_
```
# shared.js
```javascript
_{{node_modules/shared.js}}_
```
# shared2.js
```javascript
_{{node_modules/shared2.js}}_
```
# webpack.config.js
```javascript
_{{webpack.config.js}}_
```
# dist/output.js
```javascript
_{{dist/output.js}}_
```
# dist/872.output.js
```javascript
_{{dist/872.output.js}}_
```
Minimized
```javascript
_{{production:dist/872.output.js}}_
```
# Info
## Unoptimized
```
_{{stdout}}_
```
## Production mode
```
_{{production:stdout}}_
```
|
