Create a gist now

Instantly share code, notes, and snippets.

Minimal Webpack DllPlugin example
var square = require('./vendor');
console.log(square(7));
var webpack = require('webpack');
module.exports = {
entry: {
app: ['./app'],
},
output: {
filename: 'app.bundle.js',
path: 'build/',
},
plugins: [new webpack.DllReferencePlugin({
context: '.',
manifest: require('./build/vendor-manifest.json'),
})]
};

Compile with:

webpack --config vendor.webpack.config.js
webpack --config app.webpack.config.js

Use with the following index.html

<script src="build/vendor.bundle.js"></script>
<script src="build/app.bundle.js"></script>
function square(n) {
return n*n;
}
module.exports = square;
var webpack = require('webpack');
module.exports = {
entry: {
vendor: ['./vendor'],
},
output: {
filename: 'vendor.bundle.js',
path: 'build/',
library: 'vendor_lib',
},
plugins: [new webpack.DllPlugin({
name: 'vendor_lib',
path: 'build/vendor-manifest.json',
})]
};
@wordofchristian

I think there is a typo in the blog post, you show the value of the "plugins" option as an object instead of an array.
https://robertknight.github.io/posts/webpack-dll-plugins/

@phamminh91

How to make this work with webpack-dev-server?

@dphoebus
dphoebus commented Oct 7, 2016 edited

@phamminh91,

This would be a build step that happens before you fire up the webpack-dev-server. Since you would only typically build a DLL of something that wouldn't change a bunch (like a vendors bundle) you could create a gulp/grunt task (if you use such tools) that builds the DLL's separately and outputs them somewhere in your main projects source directories.....

For example:

-- src/
    |-- app/
    |-- assets/
    |-- lib/                              <---- ** DLL bundles output here
         |-- vendors.bundle.js            <---- ** vendor DLL bundle
         |-- vendors-manifest.json        <---- ** vendor DLL bundle manifest
    |-- webpack.config.js
    |-- webpack.vendor.dll.config

... then reference the DLL's in your main webpack.config.js file with the DLLReference plugin. Fire up your webpack-dev-server task and all is the same... except for the faster build speeds due to the fact that the dev server no longer has to compile your vendors bundle!

@jrutter
jrutter commented Nov 17, 2016

Thanks for writing this up - this is the clearest tutorial I have found on this topic.

Can you use DLL in production too or is it just for development?

@nitelite

You can make this work with webpack-dev-server and html-webpack-plugin by telling it to add the dll before the bundle. I used this plugin to fix the issue I was having: https://github.com/SimenB/add-asset-html-webpack-plugin. They even include a small DLL include example.

@arunsn43
arunsn43 commented Feb 2, 2017

Can the DLL be used in production ? or is it just for improving the build time?

@merksam
merksam commented Feb 23, 2017 edited

Have the same question as @arunsn43 .
For example:

  1. I made DLL's
  2. Created build
  3. Installed new version of library (means I have update in node_modules)
  4. Created build
    Following the logic - because of I already have library in DLL's bundle, new version of library will never be used.
    Please, fix me, if I don't understand something. Thank you so much!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment