Create a Webpack Library Without Exporting a "default" Object

April 07, 2019

I recently finished building version 2 of vidbg.js, a minimal JavaScript video background plugin. I use Babel and Webpack to be able to write the newest JavaScript, while making it backwards compatible for older browsers that I need to support.

Webpack has an option to export your code as a “library” or in my case, a plugin, with a configurable variable name. For example, for vidbg.js I have something like this in my webpack.config.js

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'vidbg.js', // The filename
  library: 'vidbg', // The variable name to access the library
  libraryTarget: 'var', // The type of library, in this case var

Ideally, since the libraryTarget is set to var I should be able to access my script through the vidbg global variable.

However, I noticed that instead of accessing the script through vidbg, I had to access it through vidbg.default because I was using ES6 modules and doing a default export, like so:

class vidbg{

export default vidbg

After searching literally everywhere to no avail, I finally found the answer buried in the Webpack docs. All you have to do is add libraryExport with a value of default to your webpack.config.js.

The Solution

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'vidbg.js',
  library: 'vidbg',
  libraryTarget: 'var',
  libraryExport: 'default' // tell Webpack to export the default export, not the entire namespace object

This tells Webpack to export the library on the default export now, instead of exporting the whole namespace object.

I hope someone can find this useful, since it took me hours to fix this one simple issue 🤦‍