Webpack is a fantastic javascript build automation tool.

Webpack is a module bundler that bundles javascript and other assets for the browser. It works really well for applications and javascript libraries and is very simple frontend build tool.

Intro to Webpack

Webpack enables modularity by allowing you to require the styles needed for a particular component. Adding preprocessors is a breeze and it simplifies the deployment of your css assets.

Webpack CSS, Preprocessors, and url assets

Webpack loaders are how you tell webpack to resolve your dependencies and you can use a loader built for the babel transpiler to easily enable ES6 code in your project. Full sourcemap support is also available using webpack's devtool property.

Webpack Loaders, Source Maps, and ES6

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 with Webpack - Introduction

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 with Webpack - Requiring Directives

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 with Webpack - Requiring Templates

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 with Webpack - ES6 with BabelJS

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 with Webpack - Requiring CSS & Preprocessors

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 with Webpack - Testing with Karma, Mocha, and Chai

An introduction on unit testing a ReactJS component using Webpack and Jasmine. Learn how to use Webpack to package and import dependencies plus take advantage of the babel-loader to write a simple Jasmine spec using the latest ES6 syntax.

Unit testing a React component using Jasmine and Webpack

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 with Webpack - Production Setup

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 with Webpack - Uglifying your JavaScript

In this video, we’ll talk about JSX and learn the necessity of Webpack and specifically babel-loader for JSX to JavaScript transformation. We’ll also set up our basic architecture and build our very first React component.

Building a React.js App: Up and Running with React and Webpack

Unit testing a React component using Webpack and Jasmine, can involve slow and repetitive tasks when confirming that tests are passing when your code changes. For example, manually running commands instructing webpack to compile code plus refreshing the browser. This lesson demonstrates how to speed up your development time by automating these tasks using webpack-dev-server.

Reloading React component tests using webpack-dev-server

Let's add some module loading to our NW.js. Webpack and dependency management FTW!

NW.js and Webpack: A match made in heaven

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.

AngularJS with Webpack - Production Source Maps

You can easily spend hours configuring the perfect dev environment with all the latest hotness like ES6 (and beyond) support, hot reloading, and a myriad of other features. This lesson shows how to use hjs-webpack to get the same thing in a matter of minutes.

Learning Webpack

Instructor

Course content (17 lessons)

Instructor