WHAT IS WEBPACK, HOW DOES IT WORK? | Webpack 2 Basics Tutorial

Подписаться 918 тыс.

Просмотров 614 тыс.

50% 1

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!

Опубликовано:

29 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 502

@karandewani6614 4 года назад

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!

@ludilex 7 лет назад

You are incredible clear in your explanations, I'm really grateful with your tutorials, keep going Max!

@academind 7 лет назад

Thanks so much Luis, I'm happy that you're enjoying it!

@jesleycaceresmarcelino1812 Год назад

this man is really impressive, I have bought lots of courses from him haha.

@mikecronin2415 7 лет назад

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.

@academind 7 лет назад

Wow, thanks so much for your absolutely amazing feedback Mike, means a lot to me! :)

@apall2764 3 года назад

Agree, the way this guy speaks is clear and understandable, this makes him a very good teacher

@deltaskyhawk 6 лет назад

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.

@academind 6 лет назад

I guess history repeats itself :). Thanks for the nice feedback, happy to hear you liked the video

@ikamy 2 года назад

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?

@danpride2804 6 лет назад

Quote of the Day "but most importantly it should work" :)

@marcc1179 Год назад

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.

@angeloc700 4 года назад

Thanks for the great explanation. I gather, Webpack is probably more helpful for organizing large JS apps rather than for projects that may use some JS to make the front end look better.

@journey_to_ai8748 2 года назад

Thanks for your hardworking

@ioannisevangelougotsos5288 4 года назад

Always great always the best! Well done Maximilian!

@shan_doo3214 7 лет назад

Excellent tutorial, very well explained and straight to the point.

@academind 7 лет назад

Thanks so much!

@BlackfeatherTanfur 5 лет назад

Also if I'm right, this will break AMP. From what I understand, you can only use a certain set of libraries (and be under a certain size total as well) for your pages to be AMP compatible.

@AndreiMargeloiu 6 лет назад

Excellent explanation!

@academind 6 лет назад

Thanks so much Andrei!

@eben4707 6 лет назад

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!

@academind 6 лет назад

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

@anpegar 7 лет назад

Hi Maximilian, great video !! I hope you make a series of videos as good as your Vuejs course that I have done at Udemy.com. Great job, keep it up.

@academind 7 лет назад

Happy to hear you liked the course! I have some nice videos in the pipeline :)

@stillinmusic 6 лет назад

Thanks for this video. Helps me so much

@academind 6 лет назад

Wow, that’s just fantastic to read, thanks a million for this great feedback Songtao!

@whonayem01 Год назад

Thanks

@barjosa31blogspot83 6 лет назад

Great explanation!

@academind 6 лет назад

Thank you very much!

@nwoo2275 7 лет назад

Love ur video man, thank you so much. Great work!!

@academind 7 лет назад

Thanks so much for your comment, awesome to read that you like the video!

@prsion1925 5 лет назад

Thanks a lot for your sharing with us!!!

@saptarshic 7 лет назад

Very useful! Thank you.

@academind 7 лет назад

Happy to hear that, thanks so much Saptarshi!

@jonathanhendrygunawan7342 7 лет назад

Wow it's a well explained tutorial for newbie like me :D Anyway I curious about what IDE you use ?

@gamenetic6426 7 лет назад

I think it is Webstorm

@dean6046 5 лет назад

Thanks, you're the man!

@ItumelengMatlala 3 года назад

change "--output" to "--output-path"

@emmanuelmonlenyode83 5 лет назад

Thanks, this helped a lot.

@balalambaYT 7 лет назад

just awesome!

@academind 7 лет назад

Thanks so much Oleg! :)

@Maruf-zt7dz 7 лет назад

Great video

@academind 7 лет назад

Happy to hear you're liking it!

@prateeksharma1047 7 лет назад

If webstorm shows error "export declaration are not supported by current javascript version", press alt+enter and switch to es6.

@himanshutariyal7648 2 года назад

Won't it make the site slow if we have hundreds of js files as the bundled file will be a lot more heavy?

@javiersolis2959 7 лет назад

Super necessary with laravel mix a bit less flexible than elixir was!

@muneebmohammedsaleem997 6 лет назад

Great tutorial seriously! I understood pretty much of webpack .But i was wondering does it bundle all of JS and CSS files in one bundle.js or for css we gotta make one more seperate file of for example (bundle.css) where all css files are bundled??

@academind 6 лет назад

It always bundles JS and CSS separately since these can't be put into one file. Depending on your setup, it'll also split these files into multiple chunks but that really comes down to how you configure it

@muneebmohammedsaleem997 6 лет назад

Thank you ! I tried putting my CSS and JSX file separately and when it comes to webpack config file here what i did.But seems like it's not bundling my CSS file since i ain't see any CSS on my page.Alternately i did put css-loader with babel-loader but it was not useful either. // Webpack-config module:{ rules:[ { test:[/\.js$/, /\.jsx$/,/\.css$/], exclude:[/node_modules/], use:[ { loader:"babel-loader", options: {presets:['es2015', 'react']}, }] } ] },

@allyoucansearch 4 года назад

One question.Can i import files like this but without using webpack or anything else?

@MostlyRenditions 6 лет назад

Awesome!

@BhatiJhabarSingh 4 года назад

I use vue framework is it important for me to learn right now.

@ditzdee1 5 лет назад

does this webpack method working on CRA project ? or there are any alternative to load dom-loader.js ?

@jasonjames9372 7 лет назад

Great tutorial!! When is the next video on webpack ?

@academind 7 лет назад

Thursday :) I'm glad you're liking it!

@JM-de2gh 2 года назад

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.

@lukeofernandez 3 года назад

This video is great. However the syntax in the instructions is a little out of date. I've redressed that problem in the following repo. Just read the readme for details: github.com/lfernandez55/yt-webpack2-basics

@goonholiday656 6 лет назад

Trick question, no one knows how web pack works or what it does.

@Jalalx 5 лет назад

Here you can learn: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Gc9-7PBqOC8.html

@rw7799 7 лет назад

nope, lost after first minute....why do i want my files bundled? i get it...it organises my .js files so they fire at the right time so your code works smoothly..?

@academind 7 лет назад

You typically want to bundle your code because this leads to less file (download) requests to your server and yes, it also makes sure that code gets executed in the correct order. This video is about the HOW and not the WHY

@PhoenixRebirthed 7 лет назад

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.

@academind 7 лет назад

Haha, amazing to hear that - more videos on Webpack 2 are to come! :)

@JeraldJamesCapao 6 лет назад

Same. I’m near to give up this WebPack thing hahahaha! 😍 Thanks sir Max

@deriksonsilva2901 7 лет назад

I miss something, because the code below is not working: .. secretButton.addEventListener('click', toggleSecretState); Uncaught ReferenceError: secretButton is not defined ... function updateSecretParagraph() { if (showSecret) { secretParagraph.style.display = 'block'; } else { secretParagraph.style.display = 'none'; } } Anyone can help?

@xuevgermanist 4 года назад

My goodness, this is THE FIRST intelligible explanation of webpack I've seen since I started on this catastrophe

@TheClubPlazma 4 года назад

yes he made that video before 4 years , he's really one of the best teachers out there

@Ruptured_AU 5 лет назад

I needed to add -o to my build command for it to work. "build": "webpack src/js/app.js -o dist/bundle.js"

@xuevgermanist 4 года назад

Dude, that totally worked for me!

@christoph2005 5 лет назад

6:00 Tutorial starts...

@bjgjuiuguoojpoo 6 лет назад

Can you help me with solving this problem please? It appears when I try to 'npm run build' and it happends on my 2 computers (mac and PC). I was searching the internet[stack overflow] and nothing :( . ERROR in multi ./src/js/app.js dist/bundle.js Module not found: Error: Can't resolve 'dist/bundle.js' in 'C:\Users\User\desktop\PIOTR\CODING\TUTORIALE\SCHWARTZMULLER\NODE.JS' @ multi ./src/js/app.js dist/bundle.js npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! schwartzmuller@1.0.0 build: `webpack src/js/app.js dist/bundle.js -p` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the schwartzmuller@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\User\AppData\Roaming pm-cache\_logs\2018-08-07T09_01_02_489Z-debug.log

@BrokenHeartanindo 6 лет назад

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"

@urvashidave5181 3 года назад

getting error : ERROR in main Module not found: Error: Can't resolve 'src/js/app.js' in '/Users/urvashidave/react-learn/yt-webpack2-basics' Did you mean './src/js/app.js'?

@takisbakalis 5 лет назад

I don't understand how I trust a guy that uses a 23 character long usename in a Unix OS to teach me developers' stuff. But here I am

@aqkhana2002 3 года назад

i have one question and i hope you will reply , i am also your student for 3 courses in UDMEY , i am stuck in react to create dynamic template , the html contain controls as well and i am unable to get click event and also class , someone told me i can do with webpack. if its true , can you guide me how to render html ? as html is coming from server and we are replacing controls on certain location. pls reply

@saicharan1000 6 лет назад

To make it work, you need to put --output in package.json like '"build": "webpack ./src/app.js --output ./src/bundle.js" or else you will get an error.

@yaolegoleynik 5 лет назад

Awesome tutorial - awesome explanation! Thank you! :)

@김영찬-c4k 6 лет назад

Your accent and way of talk sounds so easy to receive the data from you. Great work! thanks

@academind 6 лет назад

So happy to read that, thank you very much!

@lingeshv514 8 месяцев назад

May I know what was the IDE you were using!. Please suggest a light weight (open source) IDE or editor.

@catsby9051 7 лет назад

Well that was 14 minutes well spent.

@academind 7 лет назад

Makes me so happy to read that, thanks so much for your comment Brian :)

@ganeshpatil6020 3 года назад

Thanks Thanks Thanks.. thank you so much for this simplest video I saw ever. God bless you with lot of success.

@LensLiebe 2 года назад

Simple and straight to the point explanation. Kudos!!

@growingisgood 2 года назад

Thanks Max. This is a wonderfully explained video. I looked all over the internet and couldn't understand it until I saw this 😀

@JoeyLutes 4 года назад

you shared the source code but didn't include the package.json to install the node modules? but why?? lol

@ankitshah5924 2 года назад

Does any one know if want to do performance testing on this website . Hoow would we do that. Light house won't audit on such locally hosted sites

@sureshbettadapur 4 года назад

I followed all the steps, but ran into error. Can you please assist? ERROR in multi ./src/js/app.js dist/bundle.js Module not found: Error: Can't resolve 'dist/bundle.js' in 'C:\Users\xxxxx\xxx\Nodejs-Example\webpack2-basics\yt-webpack2-basics' @ multi ./src/js/app.js dist/bundle.js main[1] npm ERR! errno 2 npm ERR! yt-webpack2-basics@1.0.0 build: `webpack src/js/app.js dist/bundle.js` npm ERR! npm ERR! Failed at the yt-webpack2-basics@1.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above

@sureshbettadapur 4 года назад

pls ignore this..... I am able to resolve the issue following Justin Higgs' suggestions. Thanks

@zerk6656 7 лет назад

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!

@academind 7 лет назад

That's a really amazing feedback, thank you so much Zerk. It's always great to hear that the videos I create are useful :)

@sourandbitter3062 3 года назад

I know everyone praises Maximilian and he does teach very well. But he talks waaaay too much.

@DecentralEyes 2 года назад

Do not use odd numbered versions of node, you won’t be able to create Angular applications!

@ltybc425 5 лет назад

Link to "Webpack 2 Basics" playlist: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-GU-2T7k9NfI.html

@kablogtv 3 года назад

People who disliked this video can't grasp the concept of webpack LOL!

@CompositeNation 5 месяцев назад

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

@KoltPenny 3 года назад

Thank god ES6 is standard and widely accepted now. No need for webpack.

@gkeenleyside 6 лет назад

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?

@hemaramasamy1428 4 года назад

I had this same doubt now, if you know that please reply me :)

@PolishPolackski 2 года назад

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.

@DecentralEyes 2 года назад

You can alternatively type npm i -y where i is short for initialise and -y defaults yes to all questions

@jmartecep 6 лет назад

I am attempting to use AdonisJS with webpack. It has proven to be difficult. Do you have any experience with Adonisjs and webpack?

@academind 6 лет назад

No, I haven't really worked with it, sorry

@MuhammadIslam-qi2tf 4 года назад

Webpack and gulp are use for the same purpose or they are completely different??

@hamadk7128 2 года назад

Great explanation, Quick question, same for the CSS ?

@rishabhrawat4456 7 лет назад

Another great video Max, I have a suggestion you yourself are a freelancer video. how about you make a guidance video about how one can start as a freelancer web developer not coding related more like management and stuff

@academind 7 лет назад

Very interesting suggestion Rishabh, thanks a lot - I will think about that!

@martjandedi 7 лет назад

You are an awsome teacher Max, i love you, im a python dev but im transitioning to node, is this a good thing?, if you can give me a suggestion, greetings from Albania

@academind 7 лет назад

Happy to hear you're liking it! Python and Node are both great languages but if you're planning to stick to web development, Node might be the more interesting one right now.

@jaronmartin5758 4 года назад

Will any of videos or tutorials get out of beta? One reason I have fear in paying for these guys tutorials as well the free documents have not been updated in 3 years.

@academind 4 года назад

All our courses get updates, Q&A support and work as shown in the videos.

@rishukumar7586 5 лет назад

i have a doubt not related to what u explained ..if u put an inputbox of type number and to handle onchnage event put a method test in your app.js file it will throw :-index.html:15 Uncaught ReferenceError: test is not defined at HTMLInputElement.onchange (index.html:15)..why it is not able to find that method???..it is working without webpack

@Cambesa 6 лет назад

Hi, I'm following this tutorial but npm told me I also needed to install webpack-cli so I did. I also had to add a mode to the json script so my build function looked like this: "build": "webpack --mode development node_modules/three-obj-loader/dist/index.js Scripts/three-obj-loader.js" and the only way I got no errors was by already creating an empty three-obj-loader.js in the Scripts folder. Now webpack or npm don't give errors anymore but the three-obj-loader.js was completely empty. It's a real mess so does anyone know what's going on? Thanks

@Laczorka 6 лет назад

Hi, I also did the course today and for me the following has worked So webpack has changed, the code needs to be changed as well. 1. Modify the package.json to the following "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --entry ./src/js/app.js --output-filename ./bundle.js -p", "build:prod": "webpack --entry ./src/js/app.js --output-filename ./bundle.js -p" }, Notice that (--entry) , (--output-filename) should be included in the script Have a nice day, Istvan

@Cambesa 6 лет назад

Laczor thank you!

@SparkyRadio999 6 лет назад

I had to use webpack-cli instead of just webpack in the scripts section of your step 1. But its the first time I got any webpack to work so thanks very much Istvan!

@Laczorka 6 лет назад

Paul Rogers I am happy that i was able to help :)

@zadig08 6 лет назад

Thank you, friend! And also, thank you Cambesa!

@eliasdhladhla4690 7 лет назад

hi, i have been following your tutorials on react.js , webpack and redux. Well i have a problem on setting up my projects on webpack and reack. i just noticed now that the error log says as follows "npm ERR! Failed to parse json npm ERR! Unexpected token 'b' at 8:6 npm ERR! "build": "webpack src/js/app.js dist/bundle.js" npm ERR! ^ npm ERR! File: C:\Users\cumilous\Documents\Elias'\Projects\webpack\package.json npm ERR! Failed to parse package.json data. npm ERR! package.json must be actual JSON, not just JavaScript. npm ERR! npm ERR! Tell the package author to fix their package.json file. JSON.parse " how can i fix this problem? and i am using windows. OTHERWISE, VERY VERY VERY DOPE TUTS

@TechWithMikey 7 лет назад

your json is invalid, maybe you missed a comma somewhere

@MehmetALTINEL 6 лет назад

package.json should be "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" and you install webpack-cli before this. for installing "npm install --save-dev webpack-cli"

@stoic2454 2 года назад

why do we not use webpack for production as u mentioned in vdo ??

@Purplejacket 6 лет назад

For extra 'smug' points: 1. Make sure you specify version 2 when you install webpack: npm i webpack@2 --save-dev 2. Enjoy the pain of the fools below as they try to follow a version 2 course with version 4 code

@akezhanrakishev9304 5 лет назад

Is it possible to combine simple static html & css & JS files with React? For instance, 3 pages would be written in html, etc and one page (Contact) would be written using React. Can we combine, connect them together? So when we click to Contact from static html index, it would give us React page?

@johnniestang 5 лет назад

If I'm using webpack and need the ES6 module import/export syntax, this breaks jest as it is expecting NodeJS export/require. How do I use jest with webpack?

@JonathanLaliberte1 6 лет назад

That's very cool, one question though... How does webpack affect performance of your site? When you generated it, it created a folder with dozens of files which are webpack dependencies. Are these dependencies required when the website is actually running?

@hungngv935 6 лет назад

When run `npm run build`, I have a message: "You have installed webpack-cli and webpack-command together. To work with the "webpack" command you need only one CLI package, please remove one of them or use them directly via their binary." I uninstalled but still message. Please help me?

@arbazadam3407 4 года назад

I am from a java background, so is it safe to say that maven is a combination of npm and webpack as it is used to download the dependencies and build the deployable ? So webpack is basically the building mechanism which maven handles right?? Whereas downloading the dependency lies with npm.

@valijonrahimov6765 7 лет назад

Another good tutorial in this channel. Thanks! P.S. Adding some Line Height in the Editors settings will be good. The Code will be much more readable.

@academind 7 лет назад

Thanks so much for the helpful feedback - I'll have a look at that and see if I use different settings.

@raghuramb1780 7 лет назад

minifying the bundle.js is not happening in my practice I used the code "build:prod": "webpack src/js/app.js dist/bundle.js -p" in package.json file

@AkysChannel 2 года назад

Thank you, helped a lot. I only had an issue when _exporting the code_ to the `bundle.js` file. I had to set the `package.json` like this ` "build": "webpack ./index.js" ` and the `dist/main.js` got generated automaticallly

@StansPreviouslyOwnedSoundtrack 6 лет назад

Please note the building command has changed in Webpack 4, it now requires --output before the output file.

@kumailn7662 3 года назад

How can I give you unlimited likes :-) (y)

@shilpash845 6 лет назад

Thank you , Since I am new to WebPack it is really helpful and very clearly explained.

@academind 6 лет назад

That's so great to read, thanks so much for sharing this :)

@misterx2395 6 лет назад

How exactly is your folder structure? The browser says project-folder/index.html your tree says project-folder/src/index.html or am I wrong?

@bulp9893 5 лет назад

Very simple and straightforward what is webpack ,thank you man

@academind 5 лет назад

Thank YOU for your great feedback!

@ODINCODES 4 года назад

You are the best teacher that I found on youtube! 👍👍 nobody explain things like you, thank you so much for your helps!

@yifeige9738 3 года назад

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

@ankitsagar255 5 лет назад

Awesome explanation.. can we also have a video/explanation on webpack vs metro bundler.. since i have just started learning React Native, and have doubts, if i could replace metro bundler with Webpack for production ready code (published app), if not what advantages we get over each other.

@hesanam9872 7 лет назад

Hey man! I wanted to use bourbon with webpack and node-sass. I don't know how to do it ! I've red the DOC but couldn't make it out. Can you help me ?

@SogMosee 7 лет назад

Why would you only use webpack for development though? Shouldn't you also need it for production, otherwise, how will your files have access to each other?