TheDllPlugin andDllReferencePlugin provide means to split bundles in a way that can drastically improve build time performance. The term "DLL" stands for Dynamic-link library which was originally introduced by Microsoft.

DllPlugin

This plugin is used in a separate webpack configuration exclusively to create a dll-only-bundle. It creates amanifest.json file, which is used by theDllReferencePlugin to map dependencies.

• context (optional): context of requests in the manifest file (defaults to the webpack context.)
• format (boolean = false): Iftrue, manifest json file (output) will be formatted.
• name: name of the exposed dll function (TemplatePaths:[fullhash],[chunkhash],[contenthash], &[name] )
• path:absolute path to the manifest json file (output)
• entryOnly (boolean = true): iftrue, only entry points will be exposed
• type: type of the dll bundle

newwebpack.DllPlugin(options);

When webpack output usescode splitting, we should useTemplate strings inpath to ensure that webpack generates multiple manifest files.

Combine this plugin withoutput.library option to expose (aka, put into the global scope) the dll function.

DllReferencePlugin

This plugin is used in the primary webpack config, it references the dll-only-bundle(s) to require pre-built dependencies.

• context: (absolute path) context of requests in the manifest (or content property)
• extensions: Extensions used to resolve modules in the dll bundle (only used when using 'scope').
• manifest : an object containingcontent andname or a string to the absolute path of the JSON manifest to be loaded upon compilation
• content (optional): the mappings from request to module id (defaults tomanifest.content)
• name (optional): an identifier where the dll is exposed (defaults tomanifest.name) (see alsoexternals)
• scope (optional): prefix which is used for accessing the content of the dll
• sourceType (optional): how the dll is exposed (libraryTarget)

newwebpack.DllReferencePlugin(options);

References a dll manifest file to map dependency names to module ids, then requires them as needed using the internal__webpack_require__ function.

Keep thename consistent withoutput.library.

Modes

This plugin can be used in two different modes,scoped andmapped.

Scoped Mode

The content of the dll is accessible under a module prefix. i.e. withscope = 'xyz' a fileabc in the dll can be access viarequire('xyz/abc').

See an example use of scope

Mapped Mode

The content of the dll is mapped to the current directory. If a required file matches a file in the dll (after resolving), then the file from the dll is used instead.

Because this happens after resolving every file in the dll bundle, the same paths must be available for the consumer of the dll bundle. i.e. if the dll containslodash and the fileabc,require('lodash') andrequire('./abc') will be used from the dll, rather than building them into the main bundle.

Usage

const path=require('path');newwebpack.DllPlugin({  context: __dirname,  name:'[name]_[fullhash]',  path: path.join(__dirname,'manifest.json'),});

newwebpack.DllReferencePlugin({  context: __dirname,  manifest:require('./manifest.json'),  scope:'xyz',  sourceType:'commonjs2',});

Examples

Vendor andUser

Two separate example folders. Demonstrates scope and context.

References

Source

• DllPlugin source
• DllReferencePlugin source
• DllEntryPlugin source
• DllModuleFactory source
• ManifestPlugin source

Tests

• DllPlugin creation test
• DllPlugin without scope test
• DllReferencePlugin use Dll test

Further Reading

• Code Splitting Example

9 Contributors