Webpack Fundamentals

This course will teach you how to use Webpack for your front end builds.
Course info
Rating
(413)
Level
Intermediate
Updated
Aug 26, 2015
Duration
2h 23m
Table of contents
Description
Course info
Rating
(413)
Level
Intermediate
Updated
Aug 26, 2015
Duration
2h 23m
Description

Front end web development is getting more and more complex: more moving pieces are being introduced every day. The days of doing front end web development without a build are drawing to a close. Of all the front end build tools, Webpack is one of the most interesting and is gaining popularity. This course will cover all the ins and outs of Webpack, how to use it for your own purposes, and how to customize it to fit your exact needs.

About the author
About the author

Joe has been a web developer for the last 13 of his 16+ years as a professional developer. He has specialized in front end and middle tier development . Although his greatest love is writing code, he also enjoys teaching and speaking about code.

More from the author
Angular Crash Course
Intermediate
58m
Nov 1, 2018
Unit Testing in Angular
Beginner
3h 20m
Sep 6, 2018
More courses by Joe Eames
Section Introduction Transcripts
Section Introduction Transcripts

Introduction
Hello, I'm Joe Eames and welcome to Pluralsight's course, Webpack Fundamentals. Webpack is an amazing tool for building the front-end of your web applications. It's popularity has been exploding, and more and more people are turning from other solutions to webpack to handle their builds due to its ease of use and easy to learn format. In this course, we will learn all about webpack, how it functions, the features it has, and how to set up a realistic build specific to your environment. This course is a full guide on webpack and how to use it. We'll start out with an introduction in which we'll talk about why we need to use a build, the ways we used to do builds, and how webpack is both similar and different to other build tools. We'll look at the overall goals and structures of webpack and we'll also talk a little bit about module systems and how they fit into webpack. Next, we will look at the basics of webpack and how to do basic builds with it. After that, we'll move into more advanced topics like source maps, CSS, images, et cetera. After that we'll look at some of the tools that webpack uses to make life easier on us, such as the connect middleware, plug-ins, and even look at how to write our own custom loaders. Finally, we'll look at some examples of specific builds. We'll see how to create a webpack build for both React and Angular. I chose these two topics because first, webpack is very frequently used on React projects, and second, Angular is so popular, but it has a few specific hurtles that you'll need to conquer in order to use webpack with it. When we're done, if you've paid attention and followed along, you'll be very comfortable with just about any webpack build that you encounter in the workplace.

Basic Builds with Webpack
Hello, I'm Joe Eames and welcome to module 2 of Pluralsight's Webpack Fundamentals course. In this module we're going to be covering Basic Builds with Webpack. Let's take a look at the agenda. We're going to start off by talking about the command-line interface for webpack. This is the most basic rudimentary way to work with webpack. After that we'll talk about creating a config file, which lets us give webpack complex instructions and makes it a lot easier to work with webpack. After that, we'll talk about webpack's dev server, which will run our code for us, watch for changes in our files, and if desired reload the browser. Then we'll look at loaders, which is the core extension point of webpack. And finally we'll look at production builds, and how they differ from development builds, and how to set them up so that with webpack we can build to production when necessary.

Advanced Builds with Webpack
In this module, we're going to be discussing a few advanced topics about doing builds with webpack. Let's look at the agenda. We're going to start off by talking about how to organize our files, and how to get webpack to deal with different file folders for both your source files and your built output file, and how to get webpack to put that somewhere that won't interfere with your source control. We'll also talk about how to handle ES6 modules instead of just CommonJS. We'll also talk about how webpack supports source maps. And finally we'll talk about how to create multiple bundles. There are various reasons you might use multiple bundles, but no matter what the reason is you need to know how to create them.

Adding CSS to Your Build
Hello, I'm Joe Eames, and this is the module on Adding CSS to your Webpack Build. In this module we're going to be covering a bunch of different topics on how to add CSS to your build. We'll start off by talking about the two basic CSS loaders in webpack, which are the CSS and style loaders. After that, we're going to look at their internal implementation, and how they actually do their job. This isn't critical information, but it's really interesting to see, and it can make a difference depending on your application. After that we'll talk about how to use SASS, and then we'll show how to use LESS. Both of these are preprocessors that are very popular. Then we'll look at how to build a separate CSS bundle. This will make a lot more sense after the first two sections where we look at the basic loaders and their implementation. And finally, we'll look at the autoprefixer, which helps when using more cutting edge features in CSS.

Adding Images & Fonts to Your Build
Hello and welcome to the module on Adding Images and Fonts to your Build. In this module we're going to be looking at how to add images and fonts when using webpack. This is going to be a fairly short module, we just have two sections. The first one we're going to show how to add images to our build, and then the second one we'll show how to add fonts to our build. Images and fonts are relatively simple and straightforward to add. There are a couple of little parameters you might want to play around with a little bit, and a few things to think through, but the actual mechanics of adding them to your webpack build are relatively straightforward using just one loader for both kinds of files. So, this will be a pretty simple and pretty straightforward module.

Webpack Tools
We've already talked about a lot of tools that webpack offers us, but we're going to talk about a few specific ones in this module. We're going to start off by talking about the Connect middleware. This is middleware that you use with a Node web server, either with Connect or Express that will automatically watch your files and serve them up. It's very similar to the webpack-dev-server, except it's a lot more fully featured, but also more complex. So it's useful when you need to have more complex server serving up you files, but you're already using Node. After that we'll talk about how to create a custom loader. We've already seen a lot of loaders in use, and there are so many out there that we haven't looked at, but you may encounter a situation where you need a very specific loader, and you need to create it yourself. So we'll learn how to create our own. Finally we'll talk about using plugins. We've already used plugins a couple of times without really discussing what they are, so as our last topic we'll talk a little bit more about what they are and how to use them.

Webpack and Front End Frameworks
In this module, we're going to look at how to use webpack with a couple of different front-end frameworks. First, we'll see how to use webpack with React. React is commonly used with webpack, so if you join a team that's using React, they're probably going to be using webpack as well, so knowing webpack and how it works with React is going to be very beneficial. And then in the latter part of this module, we're going to look at how to use webpack with Angular 1. The reason why I chose Angular is because it's very popular, but there are a few specific considerations you'll need to keep in mind and understand when designing your build with webpack and Angular.