1. 1
    Intro to Webpack
    4m 29s
⚠️ This lesson is retired and might contain outdated information.

Intro to Webpack

Kent C. Dodds
InstructorKent C. Dodds
Share this video with your friends

Social Share Links

Send Tweet
Published 9 years ago
Updated 2 years ago

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.

[00:03] 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.

[00:25] 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.

[01:00] 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.

[01:24] 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.

[01:45] 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.

[02:07] 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.

[02:22] 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.

[02:37] 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.

[03:04] 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.

[03:24] 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.

[03:40] 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.

[03:59] 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.

Dmitri
Dmitri
~ 9 years ago

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

Kent C. Dodds
Kent C. Doddsinstructor
~ 9 years ago

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.

King Wu
King Wu
~ 8 years ago

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

Kent C. Dodds
Kent C. Doddsinstructor
~ 8 years ago

Yes for Webpack + Angular: https://egghead.io/series/angular-and-webpack-for-modular-applications :-)

John Trevithick
John Trevithick
~ 8 years ago

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.

Kent C. Dodds
Kent C. Doddsinstructor
~ 8 years ago

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

Christos
Christos
~ 7 years ago

Could not get 'webpack' command to work on command line: (Windows 7-MINGW64) - bash: webpack: command not found

$ npm -v 4.2.0 $ node -v 6.9.5

Added npm script to 'package.json'.

"scripts": { "start": " webpack --config webpack.config.js" },

$ npm start

Michael
Michael
~ 6 years ago

Sorry, bu after this "intro" I dont't know what webpack is and why i need webpack. You can presuppose any knowledge for your courses, but not in an intro!

Bhargav
Bhargav
~ 2 years ago

github repo: https://github.com/kentcdodds/egghead-webpack-lessons

Markdown supported.
Become a member to join the discussionEnroll Today