webpack/examples/scope-hoisting/template.md

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

{{example.js}}

lazy.js

{{lazy.js}}

a.js

{{node_modules/a.js}}

b.js

{{node_modules/b.js}}

c.js

{{node_modules/c.js}}

d.js

{{node_modules/d.js}}

cjs.js

{{node_modules/cjs.js}}

shared.js

{{node_modules/shared.js}}

shared2.js

{{node_modules/shared2.js}}

webpack.config.js

{{webpack.config.js}}

dist/output.js

{{dist/output.js}}

dist/0.output.js

{{dist/0.output.js}}

Minimized

{{production:dist/0.output.js}}

Info

Unoptimized

{{stdout}}

Production mode

{{production:stdout}}