Webpack Crash Course

[@albertgalvez2556]

Traversy Media, the best tutorial bundler.

[@nikhidas23]

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 ./node_modules/webpack/bin/webpack.js 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

[@MichaelButlerC]

thanks King!

[@jonwood5768]

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" }* *]* *}* *]* } }

[@samuelpimenta1942]

Thank you! I was experiencing the same issues!

[@rene78]

This video definitely needs a 2019 update. I also installed webpack locally. In order for it to bundle I had to enter something like this: *node_modules/.bin/webpack src/index.js* So all you have to select is the original JS. The bundled JS will automatically be saved to the dist folder.

[@samueltorres2485]

I followed the code above in my webpack.conf and I get this error when running npm run build: ERROR in ./src/js/app.js Module not found: Error: Can't resolve './people.js/index.js' in 'C:\Users\torre\Desktop\Misc Projects\webpack_app\src\js' @ ./src/js/app.js 2:13-44 npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! webpack_app@1.0.0 build: `webpack` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the webpack_app@1.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\torre\AppData\Roaming pm-cache\_logs\2019-04-12T17_20_27_456Z-debug.log I also changed my package.json: "build": "webpack" I changed my index.html Any ideas why?

[@azrmuradl6420]

Thanks a lot

[@ThiagoVieira91]

Thank you Jon!

[@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

[@dmytrolesyk4045]

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

[@diahrongrismore1054]

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!

[@AcousticPeepo]

My favorite knowledge dealer

[@RoadToFuture007]

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 ) .

[@jayjeong6322]

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!

[@juancarlosfigueroa617]

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!!!

[@samueltorres2485]

Doing this in 2019 make sure you run: webpack --mode=development app.js -o bundle.js

[@elbroke6339]

big thank you

[@abudavid5929]

Thanks it worked

[@cmaciasjimenez]

When I run this it seems to work but I got a folder called bundle.js with a main.js file inside and none of the fluff above the alert line inside the main.js file. Is this correct? Having a folder called bundle.js seems wrong to me...Thank you

[@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 !

[@nikhilgoyal007]

+thaifa I had the same issue when i started last year. best way is too google all sticking points and not expect one person as a be all end all guide because that's not possible. (either it will end up being too basic or a bit advanced).

[@nikhilgoyal007]

for eg. if you need to just run a task runner like transform scss to css or minify some files you can use a task runner like Gulp. On the other hand if you have several libraries, modules and files and you need to bundle all of them together - webpack is the choice (webpack offers tree shaking features meaning if you have big libraries and you just use one function it removes all unused functions (shakes them off) from the final distribution file, so makes it more efficient.

[@জাতা-ফ৩ব]

Thanks a lot for putting time here.

[@rensong2605]

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!

[@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

[@VictorCaoCA]

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

[@hongcai4617]

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~

[@chiragparyani7546]

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 !

[@milosh996]

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.

[@raygo44]

Dev Server was my favourite thing I've learned in this course. It is so useful when project updates itself in real time. Thank you for this tutorial =))

[@HologramJay]

"Just for s**ts and giggles" I don't know why, but that made me laugh. Guess I wasn't expecting it. Awesome tut, btw, Brad. Thanks, man.

[@southern_smacker]

Great tutorial. Got me working with Webpack within half an hour. Simply Wow!!!

[@cheesebuds8962]

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!!

[@johmcg64]

I will have to say you did an excellent job explaining this. I am now able to use it. I subd and belld as a learner. You teach well like Amir, Andrew Mead, Arian Hadjin and codevolution.

[@amyanet1]

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.

[@rahadrahman2288]

Wow! I thought webpack would be harder to learn! You make it easy for me.Thanks a lot.

[@kundanmitra34]

Thank you. Great tutorial. Helped a lot to understand what webpack is and why we need it. Thanks again

[@linuxdeveloperuy]

Such an awesome tutorial man. There is really no way to thank you for such quality content. As soon as my broke a$$ is able, Ill try to support you on patreon or buy one of your full courses.

[@learntounlearn2500]

The best video on webapack on youtube .Thanks buddy

[@alexanderfrize]

Thank you! This is exactly what I need.

[@kanhasofttest3991]

ya, totally agree, Traversy Media => the best tutorial bundler.

[@tempest5997]

Just what I needed.

[@ammarhassan_]

Watching at the end of 2019 because Brad is amazing and overview is always good from Brad. Best author 2019 shld be Traversy Media!

[@qianbang_]

Simple clear. Learned a lot from just few minutes of videos.

[@webtutorials4279]

Feb 2023: How does "webpack-dev-server" know to show "index.html" into the port 8080? Where did we specify it? 30:20. Would be thankful if sb could help!

[@oumao]

You are awesome cant stop watching your tutorials they are actually amazing

[@TraversyMedia]

Thanks :)

[@hutxhy4071]

This video actually really helped me understand the basics of webpack, thanks so much!

[@nahinakbar3842]

Where has this video been! This video helps. Thank you, Brad.

[@phil85813]

Nice Brad, webpack gets pretty deep on the optimizations too, how about a video on that aspect of Webpack?

[@hwwn5361]

You are the best on KZbin

[@TraversyMedia]

Wow, quite a compliment, thank you :)

[@joselop4071]

Hi Brad, you can put a text note in the video of the Vue.js crash course from December, referring to this crash course as webpack was used there prior to this course. Thanks for your videos once again.

[@acidicgenegaming]

In case anyone else gets an ERROR in multi error. Make sure you put a "--output" before bundle.js. The full command should look like this "webpack app.js --output bundle.js" stackoverflow.com/questions/49006389/webpack-error-in-multi-src-index-js-dist-bundle-js

[@ajakinremi7373]

Thanks a lot for this. I'm learning about React and trying to understand the individual structures.

[@rskakera4399]

I have a .babelrc file to config Babel, can I continue to use this file? instead of adding my settings to the ‘query’ property in webpack.config.js?

[@oldbretto7071]

How have I not watched this yet!? Well I may be a little late on this one but great video Brad!

[@unsolvedrubiks8644]

webpack app.js -o bundle.js worked for me

[@SankofaWorks]

Thank you very much for adding this quick fix!!!

[@SankofaWorks]

webpack -p app.js -o bundle.js will get rid of the warning as well

[@sioonhho]

Since webpack has a specific package for command line you have to download webpack-cli from npm to use it there. Also make sure to set "scripts": { "build": "webpack-cli" } if you end up going that route.

[@AlphaScorpii86]

I didn’t know about this tool. Very useful tutorial Brad. Thank you so much!

[@mookiep9]

Brad, your content is always great. Thanks

[@djubadjuba]

Brad, regarding bundling CSS stylesheet into the javascript file rather than including it in the index.html file as usual, what's the idea behind? What are the pros and cons if any in this approach?

[@jayjeong6322]

I have a question. How does the name 'John Doe' appear even though the script tag is loaded earlier than the body tag? Mine doesn't show unless I drag the script tag to the bottom of body tag.

[@AdolfoBarreto75]

That was great. At least I understand what webpack is doing now. Thank You!

[@addohjeanyves6554]

hey ! trying my hand at reactjs and webpack , following this instruction can't get ' webpack app.js bundle.js' run it always ask for webpack-cli though i install it ... any help Thanks

[@asmaazakaria4489]

The best webpack tutorial ever!. Thank you

[@something2278]

So, is it better to import css this way or just to use regular link tags? It's one less HTML request if I use js to link my css files right?

[@gory1805]

Thanks for the tutorial but what if I have two html files and they both use different css and js files. Do I pass an array of entry and output files? Just not sure on how the syntax should be.

[@abhishekmazumdar2072]

Brad is a legend.

[@salvatorescaniglia2197]

Incredibly useful. Thanks for sharing your knowledge!

[@bnunesc]

Great course. You've explained everything very well.

[@ProtonChicken]

How would you load a node module like 'fs' or 'path'?

[@mercelessmonk957]

Nice crash course. 😃 You could have included what problems do we face if we do not use it.

[@akshaysatheesh9150]

Now that's how you explain Webpack..!! Thank you..!!

[@danielstoicamusic]

Did anyone else get this issue when running webpack for the first time? The CLI moved into a separate package: webpack-cli. Please install 'webpack-cli' in addition to webpack itself to use the CLI.

[@chungweileong]

Because start from version 4+, the CLI is move to a package called webpack-cli, just "npm install --save-dev webpack-cli", this should solve the problem.

[@ILoveCanada-81]

this is because the webpack version in this video is a year old, followed the documentation instead webpack.js.org/guides/installation/

[@kyleserrecchia7234]

Chung, I tried that and still got the exact same message.

[@kyleserrecchia7234]

Carlos, I'm still getting the same error message after going through all the installation steps from that link.

[@ILoveCanada-81]

I just gave up and went back to using the same version used in this video. Basically when you go and install webpack use this command npm install --save-dev webpack@2.2.0-rc.0

[@hk_build]

When I use create react app and npm start will host app on browser.. When I install web pack-dev-server then if I hit cmd npm start it won't host app in browser.. What is reason

[@TDefton]

Wait I’m confused though. Why would you want to load your backend scripts on your users frontend? Or am I missing something?

[@ShashankNaithani]

I am new to npm and webpack, One question can I use it with any project means any, I am looking to integrate it with Wordpress

[@kolyxix]

Do you always have to have a bundle.js? Some tutorials don't always include bundle.js. Is that a good idea or bad idea?

[@ILyaCyclone]

Nice tutorial! Though it seems weird to have a web page styled without any CSS linked. Does it really convert all CSS rules to JS commands like body.style.background='red';?

[@4by4rusjo44]

Gr8 content and delivery. Something that got me stuck was some errors with the config file. Module property doesnt have loaders anymore. had to use rules.use, as below , module:{ rules:[ {test: /\.css$/, use:[{ loader: 'style-loader' }, { loader: 'css-loader' }] } ] } thanks Elester

[@endemiclife1116]

Great video, exactly what I needed! I also use Atom editor.

[@giorgimerabishvili8194]

Hi, how much does use of Webpack improve the performance of website?

[@satyabhimisetty6874]

Your tutorials are the best!!!!

[@DanGarGuitar]

Thanks a lot, you are so clear explaining those concepts!!

[@jasonyankee7818]

Hi, there. Someone explain to me please what are these dependencies for? And what's gonna happen if I don't install them with a tag --save-dev? Thanks in advance!

[@randomcluck]

if you're still getting errors, try webpack-cli globally: npm uninstall -g webpack npm install -g webpack-cli npm init webpack-cli init ^to create config file then create *./src* and file *index.js* (webpack searches for src/index.js. if the file does not exist you might get an error) and finally run: webpack-cli

[@peterveliki7918]

Can you please add a note that it's for version 4 ? ... Cause I went through this crashcourse and spend actually more than 2 hours on it, cause I was getting errors and warnings all the time, so I had to search online for what the problem is and so on ... and simply said - this crashcourse is now outdated. Great one, no doubt ... but it's outdated nowadays.

[@haciendadad]

Good tutorial! I would like to see a scenario where you concat two bundle files together that came from different custom modules.

[@crashpoint3863]

Hey Traversy , your videos is amazing , one question can we use webpack with wordpress? if so can you make a tutorial of how we can setup it with wordpress theme?

[@marienahapetyan]

Why do I keep getting "Module not found: Error: Can't resolve 'style-loader' "????

[@dhartipatel7507]

you need to install style-lodader with "npm install style-loader --save"

[@valeryvalery6547]

hello from oct 2018 if you want to add bundle.js to root directory of your project add this to webpack.config.js: const path = require('path'); module.exports = { entry: './app.js', output: { filename: './bundle.js', path: path.resolve("./") } } and don't forget to: npm install --save-dev webpack-cli (or install globally, no matter)

[@MrForund]

Thank you, that's very informative to start with webpack!

[@keithboruff8056]

Excellent tutorial on the subject. Thank you.

[@aduhaneh1057]

Great video brad! Can you explain how a widget is created using webpack? I've heard we can create widgets using webpack. From your video I see that you inserted your react app in just one line (in the html template) does that count as a widget because as long as you have your files bundled you can easily insert it in any page.

[@osluocra]

Excellent tutorial as well as all of the others!

[@edd338]

If you're struggling to follow the vid because of errors, I believe it has to do with the tutorial being outdated. Even the solutions suggested in the comments could be outdated. I suggest going through the original documentation: webpack.js.org/guides/getting-started/

[@samuelpimenta1942]

Hi guys if you are getting an error just try: *npm install -g webpack-cli --save-dev* and when you run: *webpack --mode=development app.js -o bundle.js --watch* When installing babel: *npm install "babel-loader@^8.0.0-beta" @babel/core @babel/preset-env webpack --save-dev* I hope that helps :) btw, here is my config file: ______________________________________________________________________ const path = require('path'); module.exports = { mode: "production", // "production" | "development" | "none" // Chosen mode tells webpack to use its built-in optimizations accordingly. entry: "./src/js/app.js", // string | object | array // Here the application starts executing // and webpack starts bundling output: { // options related to how webpack emits results path: path.resolve(__dirname, "dist"), // string // the target directory for all output files must be an absolute path (that's why I used //__dirname) filename: "bundle.js", // string // the filename template for entry chunks }, module: { rules: [ { test: /\.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader" } ] }, { test: /\.js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] } } // loader of !style!css and babel _____________________________________________________________________________

[@kirinkappa5662]

I just realised I wasn't subscribed yet. I'm sorry for that, I fixed it now.

[@noumankhan2715]

when i tried to budle app.js (webpack app.js bundle.js), it asked me to install webpack-cli

[@isaackomeza]

I had the same issue but I resolved it using this command webpack --mode=development app.js -o bundle.js Hope it will work for you too

[@biodevm]

Great OS choice man! I think we can hope more tutorials on Linux.

[@daniellaerachannel]

wooooooww amazing channel, amazing teacher, amazing videos

[@PabloRochaDinella]

nice, just a question, where did "dist" folder came from?

[@PabloRochaDinella]

ah, I see that ... __dirname + "/dist" now

[@karpeevkonstantin9564]

Hello again, Brad! Please, make a video about webpack *-loaders (file, url, css, style, svg-url and so on). Can't find a good apprehensible guide. Thank you!

[@Oswee]

Still has no idea, how to export simple doSomething() function and then to use it in index.html as onclick="doSomething()". It says doSomething is not defined. (Yes! I want to do some inline JS!)

[@SuperLukiano]

I still don't get what the web pack is??? Bunch of lines and folders so the output can print in terminal?????

[@chrsbll]

Noticed you didn't have to specify a path for jQuery - I assume Webpack's smart enough to look on node_modules automatically. Is that the only place it looks, or does it do the same for other directories; like bower, for example?

[@annez8598]

It is clear and well-explained! Thanks!

[@mrdiv8418]

Thank you! Excellent crash course!

[@tarcus6074]

Thanks, Brad, great as always.

[@promisified1206]

This was awesome! So clear thanks!