Let's get started!

Webpack for Everyone

Webpack is a wonderful tool for bundling front-end assets. Having said that, it can sometimes be a bit confusing to newcomers who switch over from a more traditional "concatenate these scripts and libraries in this exact order" setup. However, considering the recent release of Webpack 2, there has never been a better time to dive in.

In this series, I'll show you how simple it is to bundle and optimize your assets for production.

Intermediate
Difficulty

14 episodes

1:19:20 hrs

Start Series

Let's get started!

Episode 1 Run Time 7:07

Zero Configuration Compilation
Free

Let's dive in and begin bundling our JavaScript with Webpack. As it turns out, we don't even need a webpack.config.js file yet. We can handle the entire process the command line.
Episode 2 Run Time 2:37

A Dedicated Configuration File
Free

While it's neat that we can compile Webpack with a single command, in reality, you'll almost always want to use a dedicated webpack.config.js file to configure your Webpack build. Let's transition over in this episode.
Episode 3 Run Time 7:26

Modules Are Simply Files
Free

The term "module" used to scare me. What exactly are they? Well, as it turns out, the answer is very simple: they're just files. Let's experiment with importing and exporting modules, while taking a few moments to discuss CommonJS vs. ES2015 modules.
Episode 4 Run Time 4:51

Loaders Are Transformers
Free

Let's move on and review Webpack loaders. Loaders allow us to transform and preprocess any number of file types. Maybe you'd like to require Sass files, or compile ES2015 with Babel, or even inject CSS into the browser's head tag. Let's review the process of requiring CSS in this episode.
Episode 5 Run Time 4:45

ES2015 Compilation With Babel
Free

Now that you're a bit more comfortable with the concept of loaders, let's figure out how to write our JavaScript in ES2015, and then apply a babel-loader to compile everything down to vanilla JavaScript that any browser can understand.
Episode 6 Run Time 3:47

Minification and Environments
Free

In this episode, we'll learn how to minify our JavaScript with Webpack and Uglify. However, in the process, we'll also need to review environments. Often, you'll want to use one set of configuration for development, and another set for production. I'll show you how.
Episode 7 Run Time 4:24

Sass Compilation
Free

You'll likely want to use some form of CSS preprocessor in your workflow. In this lesson, I'll demonstrate how to compile Sass, as part of your Webpack build. It's easy!
Episode 8 Run Time 5:22

Extract CSS to a Dedicated File
Free

It's very possible that you don't want to inline all of your CSS into the page, using style-loader. Instead, let's review the ExtractTextWebpackPlugin, which allows Webpack to extract your CSS to a dedicated, traditional stylesheet.
Episode 9 Run Time 9:52

The Relative URL Conundrum
Free

Easily, one of the most common points of confusion for developers switching to Webpack from a tool like Gulp stems from how Webpack (and css-loader) processes relative URLs within your stylesheets. It's essential that you understand the concepts in this lesson, so don't skip it!
Episode 10 Run Time 4:49

How to Strip Unused CSS
Free

In this episode, we'll apply the PurifyCSS webpack plugin to automatically strip our generated stylesheet of any selectors that aren't being used within your HTML files.
Episode 11 Run Time 6:05

Long-Term Caching
Free

In this episode, we'll review file hashing in Webpack. This allows you to apply automatic unique hashes to each generated file. This way, we can instruct our server and browser to cache the file for as long as possible. Let's start reviewing everything you need to know.
Episode 12 Run Time 3:39

Webpack Manifests
Free

We're able to successfully version (hash) our bundled chunks, but now we have a new problem: if the file hash keeps changing, how do we reference it in our HTML? We can no longer hardcode the path. Instead, let's have webpack generate a manifest.json file. This way, using Ruby, PHP, or fill-in-the-blank, we can read this file and dynamically determine and fetch the proper hash.
Episode 13 Run Time 5:37

Automatic Image Optimization
Free

We can pull in the img-loader loader to apply automatic image optimization to any relevant assets. In this episode, we'll review how to install the loader and then reduce an example image's size in our project by half.
Episode 14 Run Time 8:59

Developing Webpack Plugins
Free

At this stage in your learning, most of your webpack plugin interaction will consist of installing and instantiating whatever you need. For most common tasks, a plugin has already been created and is up on npm. However, a plugin can do anything and everything. As such, you'll likely encounter situations where it's useful to construct your own custom plugins, even if they're only intended for your personal use. In this episode, we'll review how easy it is to do so.

You May Also Enjoy...

Here are some additional series that may be up your alley.

Learn Laravel Mix

11 Lessons

1:25:47 hrs

JavaScript

Play

11 Lessons

1:25:47 hrs

JavaScript

Play

Webpack for Everyone

The most concise screencasts for the working developer, updated daily.

Want us to email you occasionally with Laracasts news?