Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
One of the easiest build tools to configure right now is webpack, but there are a few important concepts to master to start tackling your own builds. In this video, we’ll learn about the most important properties of webpack.config.js.
webpack documentation
webpack configuration API
webpack loaders
Access this GitHub Repo to Follow Along
- SSH: git@github.com:treehouse-projects/webpack-workshop.git
- HTTPS: https://github.com/treehouse-projects/webpack-workshop.git
-
0:00
If you've got experience working with tools like Grunt and
-
0:03
Gulp, you might be a little gun shy about learning a brand new build system.
-
0:08
Not to worry, webpack takes a fundamentally simpler approach.
-
0:14
The creators of webpack recognize that the vast majority of
-
0:17
all JavaScript applications require the same build task.
-
0:22
So they built webpack as an opinionated tool.
-
0:26
What this means is that if you stick to industry-standard practices,
-
0:30
you won't need to do much configuring.
-
0:33
We're gonna be looking over the project files in this video.
-
0:36
So let's get started by pulling down our project from GitHub.
-
0:40
I've got a terminal window open on my machine, but
-
0:43
if you're on Windows, you can open up the console.
-
0:47
Pull down the project with git clone
-
0:50
https://github.com/treehouse-projects/web- pack-workshop.git and
-
1:00
cd into the webpack-workshop directory.
-
1:06
Then git checkout the lesson-02-webpack-config branch.
-
1:12
Now let's open up our editor.
-
1:19
Before we get to webpack's configuration,
-
1:22
let's briefly open package.json to look at our dev dependencies.
-
1:29
The babel dependencies listed at the top will allow us to process ES2015.
-
1:36
html-webpack-plugin is a webpack plugin that automatically injects
-
1:41
our bundle into an HTML template.
-
1:44
The most important dependency to note here, though, is webpack itself.
-
1:49
This is what we'll be using throughout the workshop.
-
1:53
Webpack uses a Node.js file webpack.config.js for configuration.
-
2:01
With this file, there are plenty of ways to customize webpack.
-
2:05
But today, we'll be focusing on just three configuration properties,
-
2:11
entry, output, and module.
-
2:14
If you'd like to find out more about how this file works, visit the webpack
-
2:18
configuration docs, which are linked in the teacher's notes below.
-
2:22
The first configuration property we'll look at is entry.
-
2:27
The entry property is the starting point for your application.
-
2:31
It tells webpack which file or files to start with, and
-
2:36
webpack builds out the dependency tree from there.
-
2:40
Entry can be specified with a string for a single, simple entry point or
-
2:45
with an object for multiple entry points.
-
2:49
The output property defines where your application will be placed
-
2:53
once all the build tasks have been performed.
-
2:56
This is the bundle you'll use when you're ready to deploy your application to
-
3:00
production.
-
3:01
Output is specified with an object.
-
3:04
The path property of that object tells webpack
-
3:07
which folder to place your bundle in.
-
3:10
And the file name property will be used as the name of your bundled file.
-
3:15
That brings us to module.
-
3:17
This object has many properties that are used to customize webpack, but
-
3:21
the one we're concerned with is the loaders property.
-
3:25
This is where we'll define how we want installed loaders to process our
-
3:29
application.
-
3:31
I'll be going into more detail on loaders later in the workshop, but for
-
3:35
now just note that we have the babel-loader configured here,
-
3:39
which handles processing for our JavaScript files.
-
3:43
If you're new to Babel, check out the Introduction to Babel Workshop,
-
3:47
which is also linked in the teacher's notes.
-
3:50
In the next video,
-
3:51
I'll teach you how to build your first application using webpack.
You need to sign up for Treehouse in order to download course files.
Sign up