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

If you are not a Pluralsight subscriber but use egghead.io, you may prefer to see Using Webpack For Production Javascript Applications by Kent C Dodds.

Introduction

Course Prerequisites

This expects you to know HTML, CSS, HTTP and JavaScript.

Course Repository

Make sure you look at
https://github.com/joeeames/WebpackFundamentalsCourse

At the time of writing, this page shows that the course is out of date, and what you need to know to workaround that.

The Need for a Build

Joe explains several reasons for a JavaScript build:

• Multiple web requests
• Code size and the benefits of minification
• File Order Dependencies
• Transpilation
• Linting

Other Solutions

Joe discusses other solutions and their limitations

• Server-Side Tools (e.g. ASP.NET and Rails)
• Task Runners (e.g. Grunt and Gulp with Browserify)

The Webpack Solution

Webpack is a more specialized solution. It allows you to combine your CSS in with your JavaScript.

Joe explains that it uses NPM not Bower, and doesn’t mind which Module system you want to use: AMD, Common JS and ES6 modules.

Module Systems

We see an example of a simple application and its dependencies. Joe discusses the need to avoid circular dependencies,
and determining the correct order in which the files are loaded.

Module systems solve these problems and Webpack requires that you use a module system.

Basic Builds with Webpack

CLI Basics

How to install and use webpack from the command line. Install Node first, then use:

npm install webpack -g

In this clip we use webpack without the aid of any config file, which works fine for very simple programs.
We see the outputted file that webpack has created for us.

Adding a Config File

We add a very simple config file, and see that it works.

Watch Mode and the Webpack Dev Server

We don’t want to have to type the webpack command every time that we make a small code change. There are two solutions to this.

On the command line:
webpack –watch

Add watch to the config file. Joe shows how to do this.

Also covered in this clip is the webpack dev server. We see the browser automatically refreshed each time we save.

Joe also shows the effect of webpack-dev-server –inline

Building Multiple Files

In this demo, Joe shows a project with the following files:

• app.js
• bundle.js
• index.html
• login.js
• utils.js
• webpack.config.js

login.js is just console.log(‘login loaded’); for illustration

In app.js we see CommonJS code to ask for this to be loaded prior to app.js

Joe explains utils.js represents a 3rd party library such as a jquery plugin.

We don’t want to require utils.js in from every single file that is dependent on it.

Joe shows how to update the entry field in your webpack.config.js to include utils.js

Using Loaders

Loaders allow us to process files and potentially transform them into something else.

Joe adds a package.json file to the project, and within it is a number of devDependencies:

• babel-core
• babel-loader
• babel-preset-es2015
• jshint
• jshint-loader
• node-libs-browser
• webpack

Using package.json, we can just type “npm install” and npm will install all of these packages for us automatically.

Joe renames a file to the .es6 extension and writes ES2015 code in it (let keyword, arrow function)

To get this to work, we see how to update the webpack.config.js module loaders section to use Babel JS.

Using this setup we can be entirely selective about which files we want Babel to run against.

We also see what to add to the resolve section on our webpack.config.js

Using Preloaders

We can also include a module preloaders section in our config. We can use this section for setting up Linting. Joe sets up the JS Hint linter.

This also requires a .jshintrc file

Creating a Start Script

Webpack is typically a replacement for task runners such as Grunt and Gulp.

Joe explains how webpack works with NPM scripts, and shows us a test NPM script.

Production vs. Dev Builds

Joe explains the need for separate configs for each environment.

We can use the webpack -p command to force a production build.

Joe installs Yahoo’s strip-loader using npm and –savedev, and shows us that our package.json is automatically updated.

He shows us how to avoid duplicated code when creating separate config files for each environment.

The great thing about object literals is that they are just objects, so we can copy them, update them, and insert into them as we like.

We see that we can use the strip-loader to remove our console.log statements and performance logging from our production build.

Joe runs this with the http-server node module