Angular with Webpack

Watch User Created Playlist (9)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Angular with Webpack - Introduction

Angular with Webpack - Requiring CSS & Preprocessors

P

Angular with Webpack - Requiring Templates

P

Angular with Webpack - Requiring Directives

P

Angular with Webpack - Uglifying your JavaScript

P

Angular with Webpack - Testing with Karma, Mocha, and Chai

P

Angular with Webpack - ES6 with BabelJS

P

Angular with Webpack - Production Setup

P

Angular with Webpack - Production Source Maps

P
angularjs tutorial about Angular with Webpack - Introduction

Angular with Webpack - Introduction

4:20 angularjs

Webpack is a module bundler for the web. It is incredibly powerful and enables modularity in angular applications. This is the first of several lessons to get you up and going with webpack in Angular applications.

angularjs tutorial about Angular with Webpack - Requiring CSS & Preprocessors

Angular with Webpack - Requiring CSS & Preprocessors

6:07 angularjs PRO

Making your CSS modular is a difficult thing to do, but using Webpack makes this so much easier. By adding a single line to your Webpack config, you can require you CSS, Stylus, Less, etc. files right from your directives and keep everything together.

angularjs tutorial about Angular with Webpack - Requiring Templates

Angular with Webpack - Requiring Templates

2:48 angularjs PRO

With Angular, most of the time you're specifying a templateUrl for your directives and states/routes. This means you need to make sure that you're loading in these templates into the $templateCache for your tests and production. Oh, and don't forget to update all your URLs whenever you move the files around! When you add in Webpack and the raw-loader, you don't need to do this anymore. Simply require the html file and your work is done!

angularjs tutorial about Angular with Webpack - Requiring Directives

Angular with Webpack - Requiring Directives

3:48 angularjs PRO

With Webpack and CommonJS, the way you register directives, services, etc. with your modules can be a lot more modular. See how to register a directive with an Angular module using Webpack.

angularjs tutorial about Angular with Webpack - Uglifying your JavaScript

Angular with Webpack - Uglifying your JavaScript

4:42 angularjs PRO

Angular requires some careful consideration when uglifying your code because of how angular's dependency injection system works. See how easy it is to add this consideration to your webpack configuration so you can minify your Angular JavaScript with Webpack.

angularjs tutorial about Angular with Webpack - Testing with Karma, Mocha, and Chai

Angular with Webpack - Testing with Karma, Mocha, and Chai

10:22 angularjs PRO

Testing in Angular applications takes a bit of setup. Webpack simplifies things considerably. In this lesson you'll see how to test an Angular application built with Webpack using karma, mocha, and chai.

angularjs tutorial about Angular with Webpack - ES6 with BabelJS

Angular with Webpack - ES6 with BabelJS

2:43 angularjs PRO

Use the latest features of ECMAScript using BabelJS with Webpack. Simply add the right loader line in your webpack config and everything just works.

angularjs tutorial about Angular with Webpack - Production Setup

Angular with Webpack - Production Setup

2:05 angularjs PRO

Using Angular with webpack makes the production build a breeze. Simply alter your webpack configuration at runtime based on an environment variable, and you're good to go.

angularjs tutorial about Angular with Webpack - Production Source Maps

Angular with Webpack - Production Source Maps

1:51 angularjs PRO

When you uglify your Angular code with Webpack's uglify plugin, debugging your application can be a nightmare. See how easy it is to add source maps to your bundle so you can easily debug even in production.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?