webpack is a module bundler that bundles our code. That may not seem like much, but imagine a large, complex application with hundreds of files using many different libraries and dependencies. We need all these files and libraries to work together. That's where webpack comes in.

There are several other popular tools for achieving the same goals, including Gulp.js and Grunt.js. These tools are known as task runners. A task runner is exactly what it sounds like: a tool to run tasks such as concatenation and minification. webpack can do the same things, but it does so by loading assets such as plugins.

webpack is the most popular solution today and it's used with major frameworks such as React and Angular. If you're interested, you can explore Gulp.js or Grunt.js in your own time - though they aren't as widely used now that module bundlers have taken over. You're not expected to know the fine points of the differences between module bundlers and task runners while you're at Epicodus, but you're encouraged to do some additional reading on your own.

Over the next ten lessons, we'll make incremental additions to our webpack configuration. We will also provide a basic explanation of what webpack is doing. These lessons are not designed to be exhaustive and the webpack documentation is excellent. We recommend referring back to the documentation if you have further questions or need clarification about webpack.

Introduction to webpack

So how does webpack work and why is it so useful?

webpack uses a dependency graph to recursively manage an application's assets. That sounds complicated, but the good news is that webpack will do most of the heavy lifting for us. Let's take a look at an example.

Imagine that we're building an application that makes very complex peanut butter and jelly sandwiches. As a result, we have multiple JavaScript files for managing the creation of these sandwiches: peanut-butter.js, jelly.js and bread.js. In addition to these files, which contain our business logic, we also have an entry point for our application called index.js where we include our interface logic. (index.js is a common naming convention for an entry point file.) Think of an entry point as a door leading into our application. webpack needs this entry point in order to recursively gather all the other files the application needs. A bigger application may have multiple entry points but we'll only be working with one.

Here's what the first few lines of index.js might look like:

import { PeanutButter } from './peanut-butter.js'
import { Jelly } from './jelly.js'
import { Bread } from './bread.js'
import '../css/styles.css'


We haven't covered import statements just yet - we'll do so in a few lessons. For now, just be aware that an import statement is exactly what it sounds like: a way to import a piece of code from one file into another.

When we tell webpack to load index.js, webpack will recursively load and concatenate all the code from index.js as well as any required code from other files such as peanut-butter.js. If jelly.js imports code from yet another file called blueberry.js, webpack would gather that code, too. This code will all be gathered into a single file with a name like bundle.js - which is exactly what we'll call our bundled code. Remember how we mentioned that our finished project will have a dist directory with a file named bundle.js inside it? webpack will automatically create that file for us!

And just like that, our code is bundled into one file. With a task runner, we'd need to write a task concatenating our code to achieve the same thing.

webpack will load not just JavaScript files but also other assets such as CSS files and images. In fact, as long as we have the right loaders and plugins (which we'll discuss shortly), we can import many types of assets. That's why we'll be storing all our assets - CSS, HTML, and JS - in our src directory. webpack will gather them all and turn them into a single JavaScript file.

In general, we don't really need to worry about how webpack is gathering its resources. This is one of those things where the tool we're using will take care of things for us and we don't need to dig too much deeper. However, it's good to have a general sense of what webpack is actually up to behind the scenes. Ultimately, as long as we correctly set up your webpack configuration file and use import statements, webpack will take care of the rest for you.

Lesson 9 of 46
Last updated November 24, 2021