Angular Webpack

TypeScript Webpack Example

Angular uses TypeScript by default. Angular CLI uses Webpack. It’s possible to use Angular and Angular CLI without understanding how Webpack and TypeScript works but it would be nice to have some level of understanding of what’s happening under the hood.

I’m going to show you a very minimal TypeScript/Webpack example, stripping away pretty much everything that’s not TypeScript or Webpack.

What we’ll have is one single tiny TypeScript file which gets converted to JavaScript by Webpack. All we’ll make the TypeScript script do is show an alert, just to show us that it’s working.

The first step is to create a package.json for our little project by doing an npm init.

Just accept all the defaults.

Then we’ll add the typescript and ts-loader packages to our project. (The --save-dev part means these packages will not only get installed but also get added to our package.json.)

Then we’ll install Webpack itself. The -g means Webpack will not get added to our package.json but rather get installed globally.

Here’s our tiny TypeScript file. Again, all we’re doing is showing an alert. If the alert shows up, we know our script is working.

Free Guide

Getting Started´╗┐ ´╗┐with Angular and Rails

Get an Angular/Rails app up and running in as little as 20 minutes

Webpack will convert our TypeScript file into a JavaScript file. In order for that JavaScript file to run, it needs an HTML page to live on. Let’s create an HTML file for that purpose and call it index.html.

The HTML file can’t include the TypeScript file directly. It has to include the JavaScript file that that TypeScript file got converted into. We’ll configure Webpack to output a JavaScript file called bundle.js, and so that’s the file we’ll include on our HTML page.

We’ll also need a TypeScript configuration file. Don’t worry if you don’t understand what it’s doing. Just paste these contents into tsconfig.json.

We also need a Webpack config file called webpack.config.js. Notice that the entry item matches the name of our TypeScript file, index.js. And notice that the output filename is bundle.js which matches the name of the JavaScript file we’re including in our HTML page.

All the pieces are in place now. If we run the webpack command, it will create a bundle.js file for us.

Now we can open index.html in the browser.

You should now see an alert that says “it works”.

You may not be satisfied with this example. The “TypeScript” script we started with was already valid JavaScript, so nothing really happened when we “converted” the TypeScript script to JavaScript.

Let’s use an example where the TypeScript script really contains features that are unique TypeScript and wouldn’t be valid JavaScript.

If you now re-run webpack and refresh the page, you should see the alert. And if you look toward the end of bundle.js, you should see the transpiled JavaScript, which looks like this:

Hopefully this has demystified the TypeScript + Webpack combo for you a little bit. Next you might be interested to take a closer look at Angular CLI.

About the author

Jason Swett

Add Comment

Click here to post a comment