Compile an Angular Application Written in ES6

Lukas Ruebbelke
InstructorLukas Ruebbelke

Share this video with your friends

Send Tweet

Angular 2 leverages new language features in ES6 and TypeScript so that we can organize and express our ideas better. By writing our Angular 1.x application in ES6, we can create a surprising resemblance to an Angular 2 application. To do this, we need to set up Webpack and Gulp to convert our code into something the browser can safely understand. In this lesson, we will learn how to configure Webpack to process our source code and then hook it into Gulp as part of our build system.

Robert
Robert
~ 5 years ago

I've never quite understood the benefit of using the raw loader to load HTML into the JS source. I'm presuming it's a better alternative than referring to template paths directly?

Lukas Ruebbelke
Lukas Ruebbelkeinstructor
~ 5 years ago

The easy answer is that it reduces HTTP calls which happen to be one of the most expensive operations you can do on a mobile device. In most cases it is better to bundle everything up and incur the payload cost upfront.

Ivo Santiago
Ivo Santiago
~ 5 years ago

I got your point Lukas but is there any best practice about how big the bundle should be to start considering breaking it in smaller parts? I'm pretty new to webpack and maybe that is why this is weird for me.

Thanks

Lukas Ruebbelke
Lukas Ruebbelkeinstructor
~ 5 years ago

Good question Ivo :D This is a bit more art than science but an easy rule of thumb to start out with is separating your vendor files from your source files. From there, I probably put everything into single bundles as they are going to get loaded anyways. To be clear, during development I will loosen this up a bit and avoid minification, etc to make it easier to debug but in production, you really want a tight, optimized build.