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)

![](graph.png)

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

![](graph2.png)

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.

![](graph3.png)

While module concatentation 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}}
```




# js/output.js

``` javascript
{{js/output.js}}
```

# js/0.output.js

``` javascript
{{js/0.output.js}}
```

Minimized

``` javascript
{{min:js/0.output.js}}
```

# Info

## Uncompressed

```
{{stdout}}
```

## Minimized (uglify-js, no zip)

```
{{min:stdout}}
```
