Html-webpack-plugin: Usage with DLLs

Created on 26 Jan 2016 · 6Comments · Source: jantimon/html-webpack-plugin

Hey there,

Great plugin, I was wondering if it's possible to use it with DllPlugin / DllReferencePlugin?
So far I wasn't able to find a way, would it be possible to somehow get the hash from the referenced DLL and inject a script tag with it, like you do with the output bundle?

Source

vladimir-rovensky

👍6

Most helpful comment

I just made a plugin for this, if anyone comes across this issue: https://github.com/SimenB/add-files-html-webpack-plugin

It works for my simple case, at least.

SimenB on 27 Feb 2016

👍28 ❤4 🎉3

All 6 comments

Haven't worked with the DLLPlugin - what does it do?

jantimon on 27 Jan 2016

It lets you create a shared bundle that you can reference from multiple apps - it speeds up your build tremendously if you have several apps that use a lot of shared stuff.

The way it works is you build the shared stuff with the DllPlugin, which produces a manifest containing metadata about all the modules in the shared bundle. In the final app, you use the DllReferencePlugin to reference the shared bundle (via the manifest file). By doing that, the app bundle will not contain/build the modules from the shared bundle, but you have to somehow include the shared bundle in your index.html.

I currently do it by using https://github.com/sporto/assets-webpack-plugin to generate a .json file with the full file name of the shared bundle (including hash) and then, during the app build, I load this file and pass the shared bundle filename as a template parameter to html-webpack-plugin. In my index.html, I have something like this:
<script type="text/javascript" src="js/<%= htmlWebpackPlugin.options.vendorFileName %>"></script>

Not too bad, but maybe it could be easier. For example there could be an option on html-webpack-plugin to add paths to extra bundles to include? The optimal case would be if the plugin coud somehow determine the DLL filename from the DllReferencePlugin options or the manifest, but I'm not sure if that's possible.

vladimir-rovensky on 27 Jan 2016

What do you think about writing a DllHtmlPlugin which uses the html-webpack-plugin-before-html-processing event to add the file to the assets or manipulate the HTML using the html-webpack-plugin-after-html-processing to add the required assets.