Webpack 2 - A full tutorial

00:00 Initiating project, installing Webpack 2
09:31 Creating our first module
13:13 Creating Webpack settings file + watch mode
16:57 Hot Reload & Hot Module Replacement
26:19 Separating production and development build
30:48 Using Babel to transpile ES2016/ES6 to ES5, and adding your first loader
37:05 Adding source map
44:30 Adding an image with file-loader
49:00 Adding an image with url-loader
54:00 Tree shaking + UglifyJS to eliminate dead code
1:05:46 Adding CSS with style-loader and css-loader
1:12:44 Extract from head to a separate css-file with ExtractTextPlugin
1:19:07 Generating a HTML file when building with HTMLWebpackPlugin
1:25:00 Code splitting and loading code on demand
1:32:30 Adding an external module/library
1:38:20 Final comments and links

This tutorial is suited for you who've never used Webpack before and you who've used it but don't really understand what's happening in those configuration files you've downloaded from someone elses boilerplate.

[sergioostanioni]

Emil, many thanks to you and to the one behind the scenes ))
For those who use Windows:
1. Create NODE_ENV via environment variables
2.
"scripts": {
"build": "rimraf dist && set NODE_ENV=prod && webpack",
"dev": "set NODE_ENV=dev && node dev-server.js"
},

[stativka]

Thanks, Emil! This is probably the best Webpack tutorial available now!

[sonofabippi]

You summed-up the difference between webpack and webpack 2 down to what really matters. Much appreciated.

[heyiwang]

Thanks a lot. Everything was so well explained. I spent several hours for reading related codes and modules for only the first part. Now just about to start on tree-shaking.

[Chansd]

Emil Oberg, this tutorial is absolutely spectacular. I'm recommending your channel to everyone in my company who does JS. :)

[sisyphus_maximus]

Hands down, the best tutorial on Webpack that I've seen

[PatrickImboden]

Very nice tutorial. It finally made me want to move to webpack... actually I'm moving to that.
I recommended this video to all my colleagues at work

1 minor thing:
The environment setting is not cross platform. I installed cross-env npm package and then used it
"scripts": {
"dev": "cross-env NODE_ENV=development node dev-server.js",
"build": "rimraf dist && cross-env NODE_ENV=production webpack"
},

Really slow paced and well explained tutorial. Thanks a lot!

[tgacree]

Nicely done. Appreciate that you started with the raw basics and worked your way to the more advanced features. Been playing with webpack 2 for a few weeks now, but obtained some nice nuggets from your video. Thanks!

[ShermerIllinois]

Perfect. Genuine. Complete. Crystalline. Pure.

If I had ten divisions of those Swedes our troubles here would be over very quickly.

[JavierAcrich]

dude.. this is the best webpack 2 tutorial on youtube.. congratulations!

[JamesAbtahi]

Wonderful tutorial. I watched the whole one hour and forty two minutes and learned a lot. Thank you a lot!

[rumanHuq]

I spent near about 10 hours today with your tutorial, jumped back and forth to webpack documentation, github just so that I know what I am doing rather than copying and pasting. You have been of amazing help. If there are any followup, it would be awesome.

[michaelclovis]

Emil, as has been said many times, this is a great tutorial. Your demonstration using simple tools is awesome and well thought out.

[djwave]

I experienced problems with the url-loader concept at @51:00. Both image files are set up as a base64 despite the notation on the limit. This is webpack 3 though. I went for the documentation on the url-loader on github and solved it that way. I have to say that all credits go to you. This is one heck of a tutorial landing the concept and opening the door to understand webpack in simple terms. Thanking is an understatement, cause this is quite propelling!

[algoforge]

Oh man this is probably the best tutorial that I have ever seen on youtube. Thank you very much for taking the time to create this. Subscribed :)

[Kryptonis]

Splendid. I've been looking way too long for this kind of hands on tutorial... Be sure to upload future talks on other JS tools!

Awesome introduction to webpack 2! Thank you very much.

[colintucker]

Thank you so much Emil, I watched your tutorial in it's entirety last night, and spent most of today crafting a Webpack 2 "do all the things" config script with development/production modes (also using the Webpack 2 --env arg). I had some trouble getting webpack-dev-server up and running correctly on Windows, but got there in the end with trial and error. Also I ended up using "CleanWebpackPlugin" as part of the production plugin list, which is just a wrapper for rimraf really, but it helps to keep the package.json scripts clean of FS ops. Thanks again for such a thorough tutorial!

[bjornjansfelt]

Snyggt Emil! I avsaknad av dokumentation av webpack 2 så var detta precis vad jag leta efter!