Learn Webpack Pt. 2: Installing and Running Webpack and Webpack-CLI

This 10-part course teaches Webpack from scratch. It begins with a simple question: "What is webpack?" Quickly we move on to installing Webpack, configuring it, and adding loaders for CSS, SASS, HTML, and Files. The course covers cache busting, setting up a dev server, and splitting up your development and production config files. We incorporate multiple Webpack plugins including clean-webpack-plugin, mini-css-extract-plugin, optimize-css-assets-webpack-plugin, terser-webpack-plugin, and html-webpack-plugin. It's a lot of stuff :)
Find all the code and commits for this course in this Github repo: github.com/Col...
If you're ready to launch your career as a software engineer, check out my job-guaranteed bootcamp with Springboard: springboard.co...

[@abdulsadiq]

Apart from having the most badass name a web developer has ever had in history, you also have a fantastic way of teaching and explaining concepts. Thanks for this course, as well as the React course I'm taking of yours on Udemy. You're the man!

[@aaronmacken]

I've always heard people say that web-pack creates a dependency tree for you, but it wasn't until you went through the process of listing your imports in the correct order that I understood the significance of it! I kind of feel like a big dummy considering putting the dependencies in the right order is something we all did when learning basic HTML, CSS, JS. But thanks so much for showing that regardless! It really helped :)

[@jwlzloff26]

i love when you say:" wablablabla" xD. Thx for this awesome explanation, if i meet somebody who wants to learn webpack i will send him/her to you :)!

[@tonksonk951]

WOW, this is amazing, surprised it isn't more viewed! I accidentally found it from part 8 and decided to watch the whole thing because it seemed like you knew your stuff :)

[@LittlePropheteer]

The attention to detail is exemplified in Colt's reaction to using the word random and immediately clarifying that he was using 'random' in a literary and not literal sense.

[@xlf14]

Thanks for the video Colt. Explained so clearly. I like the step by step approach.

[@stanleyrunyon]

Colt, I'm still muddling through some of your SQL courses and have a couple of your Web Building courses "lined up". I love what you do and how you teach...this series is no exception. PS. I share your love for cats!

[@FrightfullyAdelia]

Thank you very much for this video. I am just getting starting moving from UX design and basic QA testing into building and hosting my own portfolio website. Love your work!

[@Luxcium]

Cool I juste finishs the first video and yeah!!! I got a cat 🐈 at the end (I cannot remember their names) ... please don’t feel annoying asking for subscription because you have made so much efforts and you deserve it ... but regardless don’t do it for you but understand that people may forget to subscribe if you don’t remind them they will not benefit from the full value of your videos and it will be sad for them than so be proud of what you do and how much value it represents for future subscribers !!! 🐱

[@ColtSteeleCode]

Benjamin Vincent thank you for the kind words! Glad to have you as a subscriber!

[@Rahul-jy9wg]

I am waiting for colt's react course who is waiting like me for it drop

[@rohanshenoy8353]

Me too:)

[@joeyc6534]

Thanks for this Colt. Really amazing and well encompassing. It's taught me enough to know how to add other modules to my webpack to giving me other functionalities. Thanks. One of the best teachers around!.

[@sobeyyy]

Thanks a ton this was a great explanation of how to setup a dev ENV and use webpack for all those awesome dependencies :)

[@mohitdas5292]

Best series on Webpack!

[@lukaspscheidt8259]

Hi, this series really helped me out. But i have one little sugesstion. When you playing these videos on mobile phone like me (iPhone XS), the text is pretty small to read. I suggest to make font bigger in the future. But like I said, these videos are really helpfull. Thanks 👍

[@shakilkhanprogrammer]

sir code is confused right now you have just two files index.html and app.js and on the GitHub hub repo which you give us we have lots files so the code is confusing me

[@ColtSteeleCode]

HI Shakil, each video has its own git commit. You can view all the commits by going here: github.com/Colt/webpack-demo-app Click on the link that says "12 commits" and you'll see each step as its own commit. Let me know if you can't find it. - Colt

[@bgmiaccountstore3116]

@@ColtSteeleCode how can I clone a particular commit?

[@utkarshtiwari1234]

Thanks a lot for this series, must say very helpful and quality content. Can you please tell which theme are you using ?

[@shakilkhanprogrammer]

I don't know where are those files which Colt using I have already downloaded the GitHub files but I did not find

[@anishadhikari3690]

checkout to the commits using git bro :)

[@jinwookkim8511]

Crystal clear lectures. nice :)

[@michaelmclean2363]

I just noticed this is at the end of your react course, which I'm in the beginning of.

[@mattiarasulo9934]

Hey Colt, I'm one of your students, I've completed the Complete Web Deb Bootcamp and the Bootstrap 4 Course. I'm now in a React Course that I've now dropped because way too complex for me and the teacher.. Is not you! When is the new course coming on that? Love, Mattia

[@rohanshenoy8353]

2nd week of march is what I heard

[@nikitajiandani]

Hey Colt! Just wondering what code editor you're using with the addons if any. I really like how your code is so colorful and appealing to the eye!

[@flameking2178]

The code editor he is using looks like visual studio code, he made a video about his favorite extensions for that editor so hopefully you can find it all over there

[@anndresilvaa]

I was waiting for this :) Thanks mate

[@micahjones2092]

Great content, keep it up!

[@reneeschke]

Thanks mate, it feels like I'm getting the grasp of it :D - But I can't stop asking myself what crazy code highlighter that is. I Like the rainbow braces. Am I correct to assume nesting braces will get different colors? How'd you do that?

[@viniciusleite4046]

Good content.

[@socalledsound]

I'm not sure if this course is old and retired, but I'm not seeing distinct commits in the repo? just, master, which I think is the finished project. am I missing something?

[@1001-w5q]

What's the theme are you using in VS code?

[@257sarthakkaushik2]

When will you launch your react course

[@avthreek]

No one: somwhere in paralel world Colt: Hey guys Im Glock.

[@wittttttt]

Is it still up to date in June 2021? or some new technology came along?

[@chill-_-839]

really helpful. thanks

[@khotambakhromov]

thanks a lot for a great course! and could you tell me what VS Code theme do you use?

[@edmundchan6601]

Khotam Bakhromov it should be “Material Theme” with the variation “Pale High contrast”

[@gabrielgonzalez5608]

Hi, I wanted to add webpack to my react app, not sure how to. What should I change in my package.json file, currently the start script is using "react-scripts start", should I just change it to "webpack"??

[@marcel5235]

what is the theme for vs-codu that Colt uses? I have one dark pro and that is different, this is much more like original atom one

[@rohanasif]

Hi everyone I have a problem. My index.js is in /src/client... And I want it to compile by running npm start but it gives me an error "Field 'browser' doesn't contain a valid alias configuration"... Please anyone help me!

[@peterwu8348]

This is what I want

[@ziekdesign4187]

This is a great series, but those folder icons are some of the best icons of all time... What theme is this??

[@ziekdesign4187]

For those of you who are curious: Install ' Material Theme Icons ' using vs code command pallet (Shift + Cmd + P) type: " Material Theme Icons: Fix icons accent. Based on Material Theme "

[@ColtSteeleCode]

Ziek Design sorry, just seeing this! Glad you found the icon theme. For anyone else reading, I have a KZbin video on my favorite VS Code extensions where I explain my theme/Icons.

[@mattiarasulo9934]

Ehi @@ColtSteeleCode please please let us know when you will release your React Course I cannot wait for this!

[@aboodalshahen4382]

good video

[@NixTheG0at]

thanks bro, i cant find this without webpack source code in your commits, where is this raw source file?!

[@rohanshenoy8353]

Is this example react based? Coz I have never seen some of the syntax used (Not talking about ES6). Code is easy to follow so not that big of a problem

[@ColtSteeleCode]

Hi Rohan, which bits of syntax are you referring to? Happy to explain/answer your question, just not sure what you mean yet.

[@rohanshenoy8353]

@@ColtSteeleCode Okay you were just showing your react application as an example so sorry for the misunderstanding.

[@ColtSteeleCode]

Rohan Shenoy ahh sorry for the confusion. Yeah, I just wanted to show a more substantial app where Webpack is worth using. The demo app we add Webpack to is simple so people can follow along easily, but it’s not really the most realistic use for Webpack. The react app is there just to show a more real world example.

[@jimh7604]

what is the difference beetween dependencies and devdependencies in package.json?

[@firezdog]

important point here seems to be that unlike on the server side, we can't use "import" for the client side. webpack would be a way of solving this problem.

[@robertmcmillan7102]

Hi Colt what happened to Rusty, I know you mentioned your Cat on Umdy

[@omaribo6980]

hI! installed npm install --save-dev webpack-cli webpack but i did not get the "dist" folder :(. need help pls!!

[@ColtSteeleCode]

Hi Omar, did you run npm start? The dist folder only shows up once you run webpack. It won't be there if you just install webpack, you have to execute it.

[@omaribo6980]

@@ColtSteeleCode when i executed i got different errors :( i saved 2 of those errors. Error: Can't resolve 'uws' in '/Users/omaribi/Documents/chatApp/node_modules/engine.io/lib' Module not found: Error: Can't resolve 'fs' in '/Users/omaribi/Documents/chatApp/node_modules/socket.io/lib' i m working on chat app

[@morakano3355]

8:00 webpack starts

[@hubertmasowski9326]

that doesn't work

[@craigdanielmaceacher]

Webpack-cli 4.0.0+ issue: github.com/webpack/webpack-dev-server/issues/2029 Means you need to use "webpack serve --config webpack.dev.js" instead or you will get errors. GD I hate this crap.

[@sheryarshirazi2799]

theme color is hard to read content

[@webcolleague2772]

Boring