Welcome to Part 2 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

In this episode we are reviewing the 3rd module from Joe’s course:

Advanced Builds with Webpack

Organizing Files and Folders

Joe explains that most developers don’t like to check in files in the build folder into source control.

It would be nice if we could get out bundle.js to go into a special directory that we could set to ignore inside of our source control, but still serve it from a directory that makes sense, for example:

public/assets/js/bundle.js

Joe show us how to do exactly this, using the path and publicPath keys inside our output configuration.

Working with ES6 Modules

This course uses the term ES6 to mean JavaScript based on the EcmaScript 2015 standard.

Previously we used the CommonJS syntax for requiring modules e.g.:

require(‘./login’)

This is equivalent to this ES6 syntax:

import {} from ‘./login’

Joe updates the file extension from .js to .es6 so that webpack knows to process it as an ES6 file.

This is not the only way to configure webpack for ES6. In Cory House’s course Building Applications with React and Redux in ES6 he uses ES6 with the .js extension everywhere.

Adding Source Maps

Adding support for Source Maps is easy because it is built into Webpack.

Also see the StackOverflow question:
How do I generate sourcemaps when using babel and webpack?

Creating Multiple Bundles

There are a few different scenarios in which we might want multiple bundles. The most obvious one is lazy loading.

We don’t want to duplicate all of our configuration code, so we pull it out into a shared file, and our html.

Joes shows us what changes we need into order to produce three separate JS files.

Continue to Part 3 – Adding CSS to your Build