Exposing Library Variables With Webpack

Connor Holyday
Oct 2, 2016 · 2 min read

[UPDATE: This is pre Webpack 2, it might be handled differently now]

The other day I was using the Google Maps API for some custom map work; and in order for that to work you are supplied a simple script tag to call it in with a callback that fires when it’s loaded.

This is where I ran into problems with Webpack.

By nature, Webpack is a module bundler, and as such it wraps up all of your assets — serving it up with a nice little bow 🎀. A side-effect of this is that none your functions or variables can be accessed in the global scope. As such the Google Maps callback can’t find my initMap() function…

Image for post
Image for post

Okay so I may have spent far too long trawling Google but I have found the pot of gold at the end of the rainbow. Here’s how to get this all sorted:

You can use exports. There are a hundred different ways to do this but my preference is to use the ES6 syntax as best explained in this MDN article. However this alone doesn’t expose your functionality, it just makes it known to Webpack. In order to finish this procedure you need to make a small tweak to your Webpack config.

This section of the Webpack documentation explains that you need to name your library, and specify the method you are using for exports. Seeing as I’m using ES6 I can leave out LibraryTarget as it expects this method by default.

Image for post
Image for post

Now that this is done, the function I exported can be accessed by calling it via `app.initMap`.

Great, right?! This is where everything broke.

So here’s a little gotcha that I discovered: it turns out that Webpack only exports items from the last entry point in your config.

Simple solution though, I’ve got a main index file that pulls in all of the functionality of my app and exports it accordingly. Luckily my project is only a small build so I don’t have any major problems with this. The real solution would be to use code-splitting.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store