Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 827 of the free egghead.io lessons, plus get JavaScript content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Intro to Webpack

4:29 JavaScript lesson by

Webpack is a module bundler that bundles javascript and other assets for the browser. It works really well for applications and javascript libraries and is very simple frontend build tool.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Webpack is a module bundler that bundles javascript and other assets for the browser. It works really well for applications and javascript libraries and is very simple frontend build tool.

Avatar
Mike

Gimme more! That is just a short teaser guys, come on now :-)

Looking forward to the rest of the videos up Kent's sleeves!

In reply to egghead.io
Avatar
Dmitri

Nice. Please do another follow-up and compare it with browserify maybe. I was thinking about browserify, but now webpack looks intersting too.

Avatar
Kent C.

We'll see... There are a lot of other lessons I need to record. In the mean time, I recommend checking out some blogposts and just making a choice. Personally, I think the webpack community will win over browserify, but that's yet to be seen.

In reply to Dmitri
Avatar
King Wu

Any lesson talk about how to use Webpack with Angularjs and Node.js project?

Avatar
John

Very useful intro - many thanks for this. Given that many lessons on egghead now assume familiarity with webpack, I am surprised that this intro was quite hard to find.
Any chance of making this a more visible stand-alone lesson?
Thanks again and keep 'em coming.

In reply to Kent C.
Avatar
Kent C.

Maybe so! I have a playlist for all my Webpack lessons on Egghead: https://kcd.im/egghead-webpack

In reply to John

To use webpack you need to npm install the Webpack module. You need to create a new file, webpack.config.js. Webpack will expect that this file exports the config and the config is very big and very customizable. But we're going to use a simple case here.

We'll say module.exports is an object. You need to tell Webpack the start of your application, so the entry file, and the output file. We'll say entry is our index.js, and output is an object where the file name will be bundle.js and the path will be dirname. We can actually run this right now. It'll work fine. But our application isn't built to use Webpack right now.

Let's just describe our application here really quick. We have this nice little background image. We have a couple of buttons here that have an event handler added to them via JavaScript. Then we have this DOM binding stuff. Which is another JavaScript file.

All of this is brought in via script tags in our HTML, and we're also using lodash as a third party. What we want to do is we want to replace all of these script tags with a single script tag which will be bundle.js, so the output of our webpack, and we'll take all of these out.

Then in our index.js, we're actually referencing these as globals. Here alert-buttons.js is global for alert buttons, and then the lame-dome-bindings.js is for this one. Instead we want to use a common.js syntax to require these where they're needed.

Webpack is actually very powerful and it understands common.js, also AMD, ES6, and even globals. You have a lot of power there. But we're going to use common.js.

First I'm just going to go based off of what we have here. Without changing anything, if I type webpack, it's going to run our config. We've configured it to output a bundle.js with the entry of index.js.

If we look at our bundle, we'll see there's some webpack here for the monitor loading. Then it's just the, all of our modules. Because we only have this one entry and it's not actually requiring anything, there were no dependencies to resolve and so it just stuck in our, the contents of our file, and then it was done. We want to actually start to require things as needed.

The first thing that you'll notice is it's wrapped in a function, so we no longer need the immediately invoked function, so we can take that out. Then we're going to say var AlertButtons is require alert-buttons. We'll do the same for the LameDomBinding.

Now we're not depending on those as globals, but they're not exporting themselves as common js modules or any modules whatsoever. Let's go ahead and export those. We'll say module.exports for this one, and for this one as well.

OK. If I run webpack, and we'll run webpack with a --watch, and I refresh here. Now it should be working but it's not, so let's look at what the problem is. Ah, reference error. _ not defined. You need to make sure that you're requiring everywhere because we're no longer depending on globals.

The specific problem isn't in our alert buttons. We're depending on the global underscore. But because we're not actually sticking that script on the page anymore, we need to require that. We'll say _ is lodash. It works as common js so it's going to look up in our known modules for lodash. Now if I refresh, everything should work as expected. No errors in the console. Sweet. That's an intro to Webpack.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?