How to expose your App to the DOM with Webpack

A quick trick to expose your app to the DOM when using Webpack

webpack

Published 2 years ago

Say I wanted to access this class from the DOM.

export class Derp
{
    constructor(private cool: string, private runnings: string)
    {
        console.log("Hello", cool + " " + runnings);
    }
}

Update your Webpack config to include the following under library and libraryTarget. Set library to whatever you like.

        output: {
            ...
            library: "Awesome",
            libraryTarget: "var"
        },

Now when your Webpack bundle has compiled, you will be able to access Awesome in the DOM and everything within. It means you could then write:

new Awesome.Derp("derp", "herp")