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 4 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")

Let's chat about your next project

Whether you need a single contractor or a full team, I collaborate with a trusted network of designers and developers. Having worked on large-scale projects, I'm equally committed to supporting businesses of all sizes, locally in Surrey, London, and internationally.

See also...

CnCNet - Website & App Development

Comprehensive design and development of responsive web and desktop apps for CnCNet, enhancing user experience and accessibility.

AR Configurator for E-Bikes

Bespoke augmented reality web configurator for E-Bikes, offering full customization options, including color choices and feature configurations.

Stock Investment App

Real-time stock investment app for web and mobile, built with TypeScript, React, and WebSockets, delivering fast, responsive, and data-driven experiences.

KickTown Football - Website

Custom-built website and API's for KickTown Football, integrating a merchandise store, booking system, and seamless user experience.

Tempest Rising - Official Website

Website development for Slipgate Ironworks' Tempest Rising, crafted to deliver a sleek, immersive experience for fans and players.

Cosmetic Visualiser - Web App

React and TypeScript-powered web app for visualizing facial cosmetic treatments, offering a cutting-edge, interactive user experience.

C&C Community Website

Command & Conquer Community platform with improved SEO, a sleek interface, and content integrations like Twitch and Steam, creating a hub for fans and creators.

React Native Health App

Custom Android and iOS health app developed with React Native and TypeScript, tailored for a health-tech startup, ensuring cross-platform compatibility.

Oriental Garden Restaurant - Website Redesign

Website redesign featuring an online ordering system that boosts sales and enhances customer engagement with a modern, intuitive interface.