Skip to content

Instantly share code, notes, and snippets.

Last active July 8, 2022 01:32
Show Gist options
  • Star 63 You must be signed in to star a gist
  • Fork 10 You must be signed in to fork a gist
  • Save robertknight/058a194f45e77ff95fcd to your computer and use it in GitHub Desktop.
Save robertknight/058a194f45e77ff95fcd to your computer and use it in GitHub Desktop.
Minimal Webpack DllPlugin example
var square = require('./vendor');
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',
Copy link

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: They even include a small DLL include example.

Copy link

snarun commented Feb 2, 2017

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

Copy link

merksam commented Feb 23, 2017

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!

Copy link

@arunsn43 I think the purpose of the DllPlugin is only to speed up the build process performance. What it allows to achieve is that you won't have to build your bundles referenced by the DLL if they didn't change. When you build for production, you only build once and then you push the result to the production server. I read that you can also use the DllPlugin for code splitting as well as you would with CommonsChunkPlugin. I'm not a webpack pro, that's just my 2 cents. :)

Copy link

Would be nice if a new version of this could be created for webpack 2 :)

Copy link

Eoksni commented Apr 10, 2017

@amilajack This does work with webpack 2 after modifying paths to be absolute instead of relative. I created a fork for that

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment