Webpack Crash Course

In this video we will look at the Webpack module bundler which is used for many different tasks. Ill show you how to install webpack using npm and how to import both files and modules. We will also look at application structure and loaders such as style and Babel

CODE: Code for this video

EDUONIX COURSES: Please use affiliate links from website below

SUPPORT: We spend massive amounts of time creating these free videos, please donate to show your support:

FOLLOW TRAVERSY MEDIA:

[albertgalvez]

Traversy Media, the best tutorial bundler.

[nikhidas]

Thank you for this tutorial Brad!

Now that webpack is at version 4.0. An extension to what Jon Wood mentiond
1) npm install --save-dev webpack webpack-cli
2) In version 4..0 there is no need to specify the bundle output file, so

a) If you are running from command line/terminal run

app.js --mode development


b) If you are running this using npm then the package.json can be changed to

"build": "webpack app.js --mode development"

and then npm run build

** If you want to specify the output you can use the --output. For e.g. webpack app.js --output app.bundle.js--mode development

Either one of the above approach will create a main.js file in dist folder so you will have to change the index.html to point to dist/main.js instead of app.bundle.js

<script src="dist/main.js"></script>

[jonwood]

Great Tutorial! Just a couple notes as some of this is out of date (an inevitable fact when creating any js tech tuts now a days).
*1.)* Some might need to install webpack and webpack-cli locally
*npm install --save-dev webpack webpack-cli*
or at least I did. The global instance didn't work for me.
*2.)* When you get to moving your style/css loaders into the webpack config, the syntax has changed since the tutorial was made:

_module.exports_ = {
entry: './app.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
*rules: [*
*{*
*test: /\.css$/, *
*use: [*
*{ loader: "style-loader" }, *
*{ loader: "css-loader" }*
*]*
*}*
*]*
}
}

[Artificial_Intelligence_AI]

this tutorial is pure gold.

I get more content in a half an hour than a whole year on my school LOL

Thank you so much for such a good explanation and regards from Spain

[dmytrolesyk]

gee, this was so clear and comprehensive, we build an entire freaking webpack build in, like, half an hour. Brad, thank you so much

[jayjeong]

honestly this is the best tutorial for webpack. I've always been working with creat-react-app and had not known anything about webpack. Now I got the core knowledge in less than 40 minutes and not even a minute is wasted in this video. thanks!

[RonClabo]

Excellent tutorial for absolute beginners with webpack. I have struggled to figure out where to begin with webpack since it has such a wide array of feature. This tutorial was perfect. Your approach of starting with the most basic code and building from there is awesome. Thank you for such a great tutorial!

[diahrongrismore]

Great video. (Note: for those that may not know). You are using Atom editor. It has a package you can install for a live-server. No need to install Webpack-dev-server. You can also open multi-terminals(command-line) in the editor eliminating the need to have multiple terminal windows open. Just swtich to terminal you want, it save a lot of real-estate and time. You're tutorials are great!

[RoadToFuture]

Great tutorial!

In linux you can jump to the beginning of a command line just by Ctrl+a, to the end: Ctrl+e. You can also do many other useful things like cutting the tail out ( from cursor) ( Ctrl+k ), cutting the head out ( Ctrl+u), cutting just a word before cursor ( Ctrl+w ), appending the last command line word/argument to the new command line ( Alt+. ) , or just discarding whole line ( Ctrl+c ) .

[samueltorres]

Doing this in 2019 make sure you run:


webpack --mode=development app.js -o bundle.js

[juancarlosfigueroa]

They said what it's hard to learn from webpack it's the configuration and you show the guts of what webpack is and what are the keypoints by looking at other boilerplates that already have webpack and a bunch of pluigins and loaders on it it can change a lot but following the keypoints like you did it gave an idea of where to start digging when reaching a new unkown webpack config. thanks sir!!!

[rensong]

You have helped me for going back to the basics of how this works since webpack got very complicated with the newest version. Thanks a lot!

[zackperco]

your content is literally the best in all aspects ! As watching your videos i sometimes get lost and confused because of the overwhelming amount of info, i would appreciate it if you could do a video about possible web stacks and the approche we can have to learn it, like where to start and what to learn next or the prerequisite to be able to build complete projects ! in most cases i find myself stuck in a situation where i need to stop and learn something new which i never knew i'd need it then get back to what i was doing which i guess isn't that great !

[MichaelButlerC]

Dude thank you so much, this was a great overview even 4 years later! It's so helpful to know the core basics instead of just copy pasting stuff and trying to make it work

[chiragparyani]

Yours one of the finest channels I've come across. I'm hooked to your videos and am really inspired by your contribution to the world of web. Talk about getting up and running, traversy media subscribe button is the way to go !

[hongcai]

I watched a few groups of tutorials urs is the best, very organized and from the bottom to the top, part and part are very cohesive~even ur fonts look bigger..big thumb~

[cheesebuds]

Hi there! I really enjoy your videos.. they are informative, formal & straight to the concepts! I learn & lookup for motivation & to stay abreast to the elite guys like you and some others ! I take an oath to payback to the community and support the best people like you and I'll become one of your Patreons.. thanks!!

[amyanet]

Thanks a lot for this tutorial, after searching so many tutorials I found this is the best to make understanding the basics perfectly. Now I am more excited to build more robust webpack project where I would like to see all my html files, templates, sass, prod and dev environment setting.

[VictorCaoCA]

This is the best webpack tutorial I've come across. Thanks for making this video!

[milosh]

Thank you so much for this Webpack Tutorial. It is so much easier than including every single JS file in HTML, and those Loaders are very powerful tools.