Welcome to the final part of this review of the Pluralsight course Webpack Fundamentals by Joe Eames.

Joe has worked both full and part time as a technical teacher for over ten years.

He is a frequent blogger and speaker, organizer of ng-conf, the AngularJS conference, and a panelist on the JavaScript Jabber podcast

Also in this series:

Part 1 – Introduction and Basic Builds

Part 2 – Advanced Builds

Part3 – Adding CSS to your Build

Part4 – Adding Images and Fonts to your Build

Part 5 – Webpack Tools

Part 6 – Webpack and Front End Frameworks

Webpack and Front End Frameworks

Webpack React Build

React JS, from Facebook, is one of the most popular Front End Frameworks around today, and here Joe shows us how to do a typical webpack build with it.

First of all, React must be added as a dependency. This example also includes several Babel libraries, including babel-preset-react.

In addition to this, we must remember to include a .babelrc file specifying the presets that we want. React developers typically like to code in ES2015 (a.k.a. ES6), and let Babel compile the code so that it works with ES5 based browsers. We see that we should also load the React preset.

With the package.json created we can just type “npm install” to install them all.

Joe’s example build allows us to use a combination of ES5 and ES6 JavaScript and have the Babel loader process both of these.

Why would we want Babel to process our non ES6 code? Babel is the processor for JSX, and it will compile it into plain ES5 code for us.

For much more information on using Webpack with React, see Building Applications with React and Redux in ES6 by Cory House.

Starting an Angular Build with webpack

Joe explains why cannot use the Angular 1 module system with webpack. Fortunately it’s easy to require in Angular:

var angular = require(‘angular’);

We learn that we don’t need to use this everywhere in our code, by requiring angular into every file.

If we haven’t already, will need to install angular, webpack and the babel-loader using npm.

We see that there are no big surprises as Joe shows us the package.json and webpack.config.js files, and the ng-app directive is included at the top of our index.html

Joe finishes the lesson by showing this running successfully.

Adding Objects to your Angular Build

Now we want to make Angular actually do something, and so we create a directive and a service.

We create two new files: band-info.js for our directive.

If you are new to Angular 1, Joe has also produced a course with Jim Cooper called Angular Fundamentals which includes over an hours content on creating custom directives in Angular.

Joe creates a directive for listing the name and year that each band was formed.

However the key lesson is we don’t want to have to update our webpack.config.js every time we add a new angular directive or service, and we don’t need to.

Joe shows us how to chain them together using require statements, and explains that this protects us from needing to do extra work when we want to rename an angular module.

We also create our service, bandList.js, update our html and index.js file, and see our bands displayed in the browser.

Photo by Osvaldo Loiacono of Cinderella’s concert at PNC Bank Arts Center. CC BY-SA 3.0

Improving the Organization of your Angular Build

A couple of small changes can make a big difference. Joe creates index.js inside our bands directory and sets module.exports equal to a function that takes in the app module.

Each of the webpack modules are required in here.

Back up inn the main index.js, instead of specifying every file, we just require in the bands folder itself, and webpack will use the index.js file inside of our bands folder to retrieve all the details.

We can now this of the bands folder as a single unit, and we avoid creating one huge list of require statements.

What we are doing here is known as Inversion of Control, and if you want further details John Sonmez has produced a whole course explaining it.

Adding Templates to Your Angular Build

band-info currently uses an inline template, but for more complex apps we would want these to be external html files.

With normal Angular development, we risk making an AJAX request for this template, but with webpack we can do this using the require function.

Instead of using a template URL we just use a template. Joe extracts the html into band-info.html and uses require(‘./band-info.html’) to specify this template inside our directive.

The benefits of this are the same benefits that relative paths have over absolute paths.

Finally we install the raw-loader module and update our webpack.config.js

We run it up, look at the network tab, and see there’s no separate AJAX request for our template: it’s included in our bundle.js.

This completes our look at a webpack build with Angular, and we’ve also reached the end of course.

I would like to thank Joe Eames for another rock solid Pluralsight course. Joe is one of the most active authors on Pluralsight with a total of 18 courses that you can find here.

Have fun programming with Webpack!