WHAT IS WEBPACK, HOW DOES IT WORK? | Webpack 2 Basics Tutorial
ฝัง
- เผยแพร่เมื่อ 7 ก.พ. 2025
- Learn Webpack - what it is, how it works and how to use it!
Join the full JavaScript course: acad.link/js
Learn major frameworks that use Webpack:
React.js (Full Course): acad.link/reactjs
Angular (Full Course): acad.link/angular
Vue.js (Full Course): acad.link/vuejs
Check out all our other courses: academind.com/...
----------
The full source code can be found in the following Github repo (choose the right branch!): github.com/msc...
----------
• Go to www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts
• Follow @maxedapps and @academind_real on Twitter
• Join our Facebook community on / academindchannel
See you in the videos!
----------
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!
So for those of you who clicked on this video because it was called Webpack 2 Basics Tutorial -- he only starts talking about webpack at 7:48. You're welcome.
Just stumbled across your videos, this one was great and answered a lot of questions quickly for me. Your cadence and speaking style are great; you're far more articulate than many native English speakers I've watched! Kudos.
Wow, thanks so much for your absolutely amazing feedback Mike, means a lot to me! :)
Agree, the way this guy speaks is clear and understandable, this makes him a very good teacher
Dude! Finally, after reading through the webpage docs i found this video. Now i understand webpack, what itis for and how to use it minimalistic, not through some kind of demo project. Thanks a lot! Wirklich, Danke!
Thanks for the great feedback! Awesome to hear that I could help you with my video.
You are the best teacher ever man. Thanks to your NodeJs course I created a business which I make a living from now since 5 years. I always learn so much from you. Thank you !!!
Oh cmon, u can't keep spoiling us like this, this is insanely useful :) I'm a Junior Front-end developer and I, with a 100% certanty, can say that your channel helped me learn 50% of my current stack >.< And now it's time to move to Webpack, first thing I did was search your channel, and as usual, u delivered constructive and well explained tutorial. Thank u very much for making these vids!
That's a really amazing feedback, thank you so much Zerk. It's always great to hear that the videos I create are useful :)
This 4-years old video helps me understand what Webpack does. Thank you!
Thank's Academind, You save my life. I lost my 3 days, dont know "WHAT IS WEBPACK. AND HOW IT WORKS"...
I use Vuejs but i dont know how to use export or import. Thank you Academind, You make me Open my mind!!! Love you.!
Thank you very very much for sharing this wonderful feedback, it really makes me happy to read that the video was helpful :)
I used webpack following a course on udemy but still didn't understand what it was for. then I stumbled upon this video and OMG this cleared so many things and doubts that I didn't even know I had. LOVED IT!!! Great work bud!
Ironically I was struggling with this two days ago and I gave up, but then you posted this haha so I'm going to try it again. Thanks.
Haha, amazing to hear that - more videos on Webpack 2 are to come! :)
Same. I’m near to give up this WebPack thing hahahaha! 😍 Thanks sir Max
Thanks for the explanation, I am a front-end newbbie and I am currently doing material design web components tutorial, this video is what exactly I needed!!!!!
Jetzt hat's endlich Klick gemacht, was Webpack macht! Danke Max!
Amazing tutorial. Everything clicked and you were as thorough as you could be without going on tangents.
THANK YOU!
Really awesome to read that! Thank you so much for your comment, great to see that the videos helped you :)
goat explanation. thank you for this explanation, still helping people 5 years later, DANKE!
Moving from Bower, and WOW you really saved me some time, thank you. Webpack looks nice. You don't skip over anything, I appreciate that.
Awesome to read that the video was helpful, thanks a lot for sharing this!
You are the best teacher that I found on youtube! 👍👍
nobody explain things like you, thank you so much for your helps!
Thanks Max. This is a wonderfully explained video. I looked all over the internet and couldn't understand it until I saw this 😀
Simple and straight to the point explanation. Kudos!!
My goodness, this is THE FIRST intelligible explanation of webpack I've seen since I started on this catastrophe
yes he made that video before 4 years , he's really one of the best teachers out there
Thanks Thanks Thanks.. thank you so much for this simplest video I saw ever. God bless you with lot of success.
Excellent video! Extremely helpful for a newcomer trying to understand what Webpack is about.
Happy to hear that Adam, thanks for your great feedback!
Very simple and straightforward what is webpack ,thank you man
Thank YOU for your great feedback!
I like how you don't totally gloss over new, non-primary concepts. For example, when you installed webpack, you went into the node_modules folder and pointed it out as well as mentioned that all the other folders are dependencies for webpack.
It kills me when I'm trying to learn something new and ask questions about stuff and i'm told "Don't worry about this" with zero further explanation. I find that sort of dismissal of my curiosity to be deeply discouraging.
In any case keep up the great work!
Thank you so much for sharing this Souma. I try my best to explain every step as precise as possible to make sure that you guys know how AND why we do the things in a certain way. Awesome to read that you like it , I'll try my best to keep it up :)
The best explanation i saw so far !!
Awesome to read that Haris, thanks so much!
You are incredible clear in your explanations, I'm really grateful with your tutorials, keep going Max!
Thanks so much Luis, I'm happy that you're enjoying it!
this man is really impressive, I have bought lots of courses from him haha.
best explanation ever. thank you Max
Exactly What I was looking for, thanks, just one question, how to make this whole things auto refresh with every save and not entering in the command like to build the bundle?
Thx for video ... this reminds me of how we used to put systems together in the 70s and 80s using build scripts. Different technologies yet the same old build pattern. One would think we would have progressed further in the last 30-40 years.
I guess history repeats itself :). Thanks for the nice feedback, happy to hear you liked the video
Beautiful Explanation
Huge respect for what you've done! Keep it up Max!
Thanks so much - happy to hear you're liking it!
Really simple clean explanation, thumbs up!
This is awesome!
One question: At 7:48 you specify to install webpack using 'npm install webpack --save-dev' "to indicate that this is a development only dependency, so we won't need it for production". Then at 13:40 you specify to use the '-p' option in the 'build:prod' script in order "to run webpack in production mode". Can you explain the difference between your two uses of "production" here?
I had this same doubt now, if you know that please reply me :)
You're using webpack only in development mode *but* when you're happy and ready to publish everything, you use build:prod so the output file is minified and optimized.
Clear, concise, and the example you provide is at the perfect complexity level. Thanks!
Are you crazy? This thing threw up so many error because the dude forgot to mention the most basic information.
your tutorials are simply awesome. Thanks so much.
Dude you're an amazing teacher. Subscribed !
Thanks so much, awesome to have you on board!
I just love all your videos. So well done.
Thanks so much, really happy to hear that! :)
You sir, just gained a new follower! Great video!
Thank you very much, so great to have you on board Niko :)
This explained webpack in a simple and effective way. Bravo 👊.
Thank you for your excellent explanation
Great explanation, thanks man
Great explanation, Quick question, same for the CSS ?
fantastic explanation loved it
Always the best Max
Thank you Chong!
Quote of the Day "but most importantly it should work" :)
You always explain everything so well. This is when you know it's good content :D
Hey Max! I'm back for this webpack tutorial! I am already using webpack but I know you will teach me much more!
Thank you! Appreciate it! I would love to see another video on webpack with 2021 features.
it is so clear :o :D - great great content
Awesome tutorial! I really appreciate your detail explanation of how webpack works.
So cool to read that Minh-Tuan, thank you so much for sharing this!
非常感谢，解答了我的疑惑。
Thanks so much for making Webpack so easy to understand! Now I am emboldened to use it!
Very happy to read that the video was helpful for you Giorgi, thank you so much for sharing this!
I am sharing your videos and TH-cam channel within my company page on Facebook and I am about to begin a course about React.js of yours on Udemy. You are a great teacher and a very didactic person. Keep it up!
Awesome tutorial - awesome explanation! Thank you! :)
Thanks! So helpful for Webpack beginners
Great to hear that Henrik, thanks for your nice feedback!
Finally I understand why a irrelevant css file is applied a js file in my React project. I guess the webpack bundled all my .css files ,bundled them together and applied the final .css file to my React application.
Thank you , Since I am new to WebPack it is really helpful and very clearly explained.
That's so great to read, thanks so much for sharing this :)
You can alternatively type npm i -y where i is short for initialise and -y defaults yes to all questions
Hi Academind... I am very glad that you are delivering the premium class tutorial on youtube. I have seen almost all video of webpack but didn't find any video regarding Bootstrap4.0.0-beta and Webpack.
Could you please provide the tutorial on Bootstrap and Webpack integration? Thank you
Thanks for your suggestion. I might cover that in the future, the general concept/ approach taught in these videos didn't change though, it should still work
Academind yes, I tried and its working fine.
You are a good teacher man ! I appreciate.
Thank you for being so thorough! Really great tutorial.
You're welcome Steve, glad to hear you're enjoying it!
Thanks a lot Max!
Link to "Webpack 2 Basics" playlist: th-cam.com/video/GU-2T7k9NfI/w-d-xo.html
Thank you for this effective content
Great! Thank you! :) I'll recommend this video series to everyone!
Awesome! Thanks so much!
nice update here:
in package.json please set this below:
"build": "webpack --mode development --entry ./src/js/app.js --output ./dist/bundle.js",
"build:prod": "webpack --mode production --entry ./src/js/app.js --output ./dist/bundle.js"
Thanks. It helped me. I was not using the export keyword and hence was not getting the output
Always great always the best! Well done Maximilian!
Thank you so much for the great videos. This series is by far the best Webpack/NodeJS tutorial I've come across. I was really confused and frustrated before, but with your help I got up and running with my first Node project and feel pretty comfortable working with it now. Cheers!
Wow, thank you very very much for sharing this absolutely fantastic feedback Eben! I really try my best to explain as understandable as possible and it's just awesome to read that it worked for you :)
Thanks, Helped me to start with webpack.
That's great to read, thank you for sharing this!
6:00 Tutorial starts...
Great tutorial. Very Helpful!
Now, i got some idea about webpack... Thanks Man...
That was the goal, great to hear it worked Robert :)
Great explanation, thanks!
You are a good teacher
It really makes me happy to read that Gaurav, thank you very much!
I am currently doing a React Native project and was browsing some online resources to get help on authentication systems. That's when I came across your Udemy courses and have bought both of them based on this free video you uploaded here.
Hope that it will make you more happy to help us.
Remarks: Your content is really of good quality. Kindly keep doing what you are doing. Also upload some free courses on TH-cam to begin these things without having to pay for it.
This guy is cool af, lucidly explains every concept. I highly recommend watching his tutorials on Udemy, he has on Angular, Vue, React, JavaScript, HTML-CSS, Node, etc.
Thank you so much for your awesome feedback!
@@academind Thanks Max for your tutorials. If possible, please do one on MEVN Stack(Mongo-Express-Vue-Node). I purchased your course on both Vue and Angular(almost finished Vue and going to Angular next and then React after that) and also on MongoDB and Node.js. all are good. While you have courses on both MEAngularN and MEReactN, there isn't any on MEVueN.
Great video Max, as usual! Thanks for sharing!
Thank you so much,
easy to understand with ur explain
Thank you for your simple tutorial! Clean and specific :)
Thank YOU for sharing this awesome feedback, really happy to read that you like it :)
Great professional. i like the way u explain. make my knowledge in angular world.
Awesome to hear that, thanks so much!
Great tutorial!! When is the next video on webpack ?
Thursday :) I'm glad you're liking it!
Hi I really like the tutorials.
I request you to please provide a transcript of the concepts or terminologies you use. They would actually benefit us when we need to revise or refer a topic.
Thanks for all the assistance.
You had provided an hour equivalent of information in just 15 minutes.... Looking forward for more
Thank you Dane, so happy to read that you liked the video!
Excellent tutorial. Question: How did import and export worked directly in your browser?
It doesn't - Webpack bundles everything into one JS file in the end. In some years, all major browser will probably offer native import/ export support, right now, that's not the case
Thank you for replying Max. So, did you use any babel transformation for this? Or webpack itself can convert imports, exports and does not need any babel?
imports and exports are indeed handled by Webpack 2 (=> only by 2!) itself, no Babel required for that.
Fantastic Tutorial, Thank you so much!
So awesome to read that, thank you Hamza!
Could you please make more explicit how to typically structure the folders for a webpack project? Like in your example, where to init npm and where to put package.json? Thanks!
npm init creates the package.json file and you run both in the root folder of your project.
Thank you, sir!
May I know what was the IDE you were using!. Please suggest a light weight (open source) IDE or editor.
Excellent explanation!
Thanks so much Andrei!
best as usual!! tnx a looot
Excellent tutorial, very well explained and straight to the point.
Thanks so much!
Fantastic tutorial, i just can't leave your channel mate :D, keep the good work up :)
Awesome to hear that Ali, I'll try my best :)
Ended up here as getting random webpack errors using Nativescipt and really needed to find out what in Pascal code it was😨
Thanks for the intro
Great explanation Max.. thanks for webpack 2 tutorial
Thanks for your awesome feedback Sudhakar! :)
Great video, thanks!
You're welcome, I'm glad you're enjoying it!
Thanks for this video. Helps me so much
Wow, that’s just fantastic to read, thanks a million for this great feedback Songtao!
Awesome clear explanation and a great example, thank you
Great explanation!
Thank you very much!
Excellent... Loved it
Awesome, thanks so much An!
Your tutorial are great :)
Thanks for your time! Brilliant tutorial! :)
Thank YOU for your comment Victor, so happy to read that it was helpful :)
Awesome! Thank you very much
Thanks for your hardworking
Loving the videos, man! you explain everything very well! thanks for all your good work!
Thanks so much Fabio, awesome to hear that!