Create a gist now

Instantly share code, notes, and snippets.

Embed
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

This comment has been minimized.

Show comment
Hide comment
@wordofchristian

wordofchristian May 23, 2016

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/

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/

@phamtm

This comment has been minimized.

Show comment
Hide comment
@phamtm

phamtm Sep 16, 2016

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

phamtm commented Sep 16, 2016

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

@dphoebus

This comment has been minimized.

Show comment
Hide comment
@dphoebus

dphoebus Oct 7, 2016

@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!

dphoebus commented Oct 7, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@jrutter

jrutter 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?

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

This comment has been minimized.

Show comment
Hide comment
@nitelite

nitelite Jan 31, 2017

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.

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.

@snarun

This comment has been minimized.

Show comment
Hide comment
@snarun

snarun Feb 2, 2017

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

snarun commented Feb 2, 2017

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

@merksam

This comment has been minimized.

Show comment
Hide comment
@merksam

merksam 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!

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!
@Nargonath

This comment has been minimized.

Show comment
Hide comment
@Nargonath

Nargonath Mar 7, 2017

@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. :)

@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. :)

@amilajack

This comment has been minimized.

Show comment
Hide comment
@amilajack

amilajack Mar 29, 2017

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

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

@Eoksni

This comment has been minimized.

Show comment
Hide comment
@Eoksni

Eoksni 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 https://gist.github.com/Eoksni/83d1f1559e0ec00d0e89c33a6d763049

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 https://gist.github.com/Eoksni/83d1f1559e0ec00d0e89c33a6d763049

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