Utilizing Webpack With Typescript

Introduction

If you are in the web developing world you most likely are well versed in javascript. If not I implore you to checkout some resources regarding javascript and typescript before continuing with this article. If you are using multiple script tags within your html header there are some tricks such as the defer keyword to optimize when/how scripts are executed. Most modern javascript uses ES6 module import syntax to allow javascript files to pull information from one another. This however introduces the following problem to a project: there are now multiple network requests being made to load javascript code. The effects of this will gradually slow down the load times of your pages the more requests have to be made. In this article we will look at a tool called webpack that was created to fix this problem and learn how to add it to a typescript project.

As you can see within the network tab of chrome devtools, there are multiple requests being made for each javascript file.

What Is Webpack?

Webpack in the most simplistic terms is a tool used to consolidate multiple networked javascript files into one bundled javascript file in order to decrease web traffic. It usually is convention to name this bundled javascript file bundle.js. You can still access your original typescript/javascript code through developer tools via an option we will display later. Also it is important to note that your original file structure for your typescript and javascript will still be available within your text editor. Lets go in to how to integrate webpack into a typescript project!

Integrating Webpack Into Typescript

In a previous article I discussed how to install typescript and what it is. We will now go over the installation of webpack. The following command should be entered into your terminal within the root of your typescript project (we will go over what some of these do in a second)

npm install –save-dev webpack webpack-cli webpack-dev-server typescript ts-loader

here are a few of the aspects of this command so that you have a general idea of what they all do:

• webpack — the tool that bundles your javascript together
• webpack-cli — allows for some terminal command for webpack
• webpack-dev-server — allows a server to spin up that hold our bundled javascript in memory
• typescript — always a good idea to have a local version of typescript
• ts-loader — translates typescript to javascript for webpack

After this finishes installation you should change a few things within your project. Within your html file you’ll want to change the script tag to point to wherever your bundle.js will reside. You’ll also want to make sure all of the imports within all of the typescript files no longer have the “.ts” extension on the end. Inside tsconfig.js (which I have an article on) you’ll want to make sure both “target” and “module” are set to “ES6”. You’ll also want to make sure “moduleResolution” is set to “node”, your “rootDir” option is commented out, and your “sourceMap” is set to true. Now within the root of your project you’ll want to create a special file that webpack will look for called webpack.config.js. In it you’re going to define the settings you want webpack to use. For simplicity sake I’ve shambled one together with some comments which denote what certain options do. Go ahead and have a look:

contents of webpack.config.js

Once this is setup and saved you can spin up the server by entering the following command within the root of your project in terminal:

npm run build

Once this is up and running you can go the page and verify the network requests have diminished by checking the network tab within devtools.

woohoo it worked!

Conclusion

With this we have created a streamlined version of our javascript code that will result in few network requests and increased performance speed of our app upon loading. There are a host of other options you can configure within webpack.config.js so please feel free to browse the documentation so that you don’t feel restricted by this example. I hope this has introduced a good utility you might want to use in the future on your web apps. Until next time, good luck and happy coding!