If you've got experience working with tools like Grunt and

Gulp, you might be a little gun shy about learning a brand new build system.

Not to worry, webpack takes a fundamentally simpler approach.

The creators of webpack recognize that the vast majority of

all JavaScript applications require the same build task.

So they built webpack as an opinionated tool.

What this means is that if you stick to industry-standard practices,

you won't need to do much configuring.

We're gonna be looking over the project files in this video.

So let's get started by pulling down our project from GitHub.

I've got a terminal window open on my machine, but

if you're on Windows, you can open up the console.

Pull down the project with git clone

https://github.com/treehouse-projects/web- pack-workshop.git and

cd into the webpack-workshop directory.

Then git checkout the lesson-02-webpack-config branch.

Now let's open up our editor.

Before we get to webpack's configuration,

let's briefly open package.json to look at our dev dependencies.

The babel dependencies listed at the top will allow us to process ES2015.

html-webpack-plugin is a webpack plugin that automatically injects

our bundle into an HTML template.

The most important dependency to note here, though, is webpack itself.

This is what we'll be using throughout the workshop.

Webpack uses a Node.js file webpack.config.js for configuration.

With this file, there are plenty of ways to customize webpack.

But today, we'll be focusing on just three configuration properties,

entry, output, and module.

If you'd like to find out more about how this file works, visit the webpack

configuration docs, which are linked in the teacher's notes below.

The first configuration property we'll look at is entry.

The entry property is the starting point for your application.

It tells webpack which file or files to start with, and

webpack builds out the dependency tree from there.

Entry can be specified with a string for a single, simple entry point or

with an object for multiple entry points.

The output property defines where your application will be placed

once all the build tasks have been performed.

This is the bundle you'll use when you're ready to deploy your application to

production.

Output is specified with an object.

The path property of that object tells webpack

which folder to place your bundle in.

And the file name property will be used as the name of your bundled file.

That brings us to module.

This object has many properties that are used to customize webpack, but

the one we're concerned with is the loaders property.

This is where we'll define how we want installed loaders to process our

application.

I'll be going into more detail on loaders later in the workshop, but for

now just note that we have the babel-loader configured here,

which handles processing for our JavaScript files.

If you're new to Babel, check out the Introduction to Babel Workshop,

which is also linked in the teacher's notes.

In the next video,

I'll teach you how to build your first application using webpack.