What Is Webpack?

In this video, I up-pack what webpack is in plain english and how it can help you.
Sign up for Level Up Pro for full access
www.leveluptutorials.com/pro
Learn React Now! goo.gl/MkRA11
Subscribe for more free tutorials goo.gl/6ljoFc
The best shared web hosting
www.bluehost.com/track/levelup...
Subscribe to the Level Up Newsletter
eepurl.com/AWjGz
At its core, webpack is a module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into one or more bundles.

[@lefxxwill7740]

3 years later still a great introduction! thanks scot

[@vincepalejr6621]

Very good video. I went in with no knowledge of webpack, but feel like I now know enough to consider learning more and implementing it in a project. +1 Subscriber.

[@JoseHerradez]

Thanks man, that's what I wanted for this week and you did!

[@rja421]

It is worth learning how to build a basic webpack config so you can easily amend the files that come with boilerplates imho.

[@syntaxfm]

Totally. I hope I didn't give of the impression that you shouldn't learn to write and understand webpack configs. Def a great skill to have in your skills.

[@BryceHipp]

really loving these "what is" videos! lodash and vue would be awesome!

[@syntaxfm]

Thanks! What Is VueJS is coming tomorrow. I'll def add Lodash to the list, it's one of my favorite tools.

[@GaryTube18]

Waited for this one

[@Codefide]

How do I deal with js files that are in my /src/scripts but then in other folders... I want to export a file jscript files on their own instead of bundling it within a bundle.index.js ? Does that make sense...? Thanks!

[@Muaddibkhan]

which vscode theme/ color palette are you using?

[@Mezklador]

I often write my own webpack config files: I understand what to use, define paths and activate few loaders. It's not so difficult and you just need to understand the compilation process with Webpack. Don't rely on pre-build ones, often wrong-defined!

[@Mezklador]

And thank you for this nice presentation!

[@abundanceoshianor4675]

Can you config webpack for meteor? Cos have tried and just can't figure it out

[@syntaxfm]

+Young Isreal Meteor doesn't use webpack although you can through a 3rd party package. Meteor's build system is amazing though, so I personally don't bother.

[@ishan101]

It would be great if you could do some tutorial on Brunch in future videos :)

[@umnajdi]

Please do an adequate set up video, theres been so many updates, its really confusing for us noobs. something like react webpack babel bootstrap

[@think-forge]

What theme on VSCode are you using? Great video btw :)👊

[@syntaxfm]

marketplace.visualstudio.com/items?itemName=leveluptutorials.theme-levelup

[@bekuostudio]

needs more simplification

[@dhanush-blr]

When to learn web pack

[@ksas323]

Thank you, Vielen Dank

[@dkapper01]

So how is Webpack different then create-react-app?

[@davetinoco]

cra uses webpack

[@samuelpimenta1942]

I didn't get it. LVL up pro is like netflix ? I can access all of your paid courses?

[@syntaxfm]

Yep! Tons of premium series with the subscription

[@lestraIen]

thanks ryan reynolds 👌

[@jasonlloyd806]

what is lodash would be an awesome video!

[@romanshestakov]

Just use ramda

[@KeiCarCamper]

what is next?(nextjs) :)

[@Shpatak]

it means the version of the ES that is greater than ES5, like ES6 ES7 ES8 )in future

[@rw7799]

that diagram on the site looks like you take some css , .js etc. run it through a box and get css , .js etc out : dont get it... hope you tuts explains better. 2 mins in -- my browser understands all these files anyway..what is webpack doing? 4.29,, ahh i like the fact is doesnt confuse your variables up : from .movie : a bit like php where you state the table where the data lives. is this abit like angular in that you import all the componants? 7.2 that just sounds not fun... i dont like webpack... i ll write down my variables on a piece of paper to stay organised? 9 ; oh well if everyone else is using it i will to... .whats all this config stuff u keep talking about...

[@rishanthkanakadri414]

Webpack is a dependency analyzer, when you supply a .js file say 'index.js' in its input parameter. It will analyze all its dependencies like (.js, .png, .scss) etc and bundles them into one single 'bundle' file along with it's dependencies and outputs it.

[@nikbelikov]

PWA

[@Momosun2018]

This looks like dependency injection to me.

[@hp7706]

Not for beginners

[@calebprenger3928]

Webpack is junk. Downloading something like prepros.io will help you greatly.

[@syntaxfm]

Webpack is certainly not junk. While prepros is easy to set up to compile everything, Webpack does much more than that.

[@aaronhesse5216]

LOL. On their website they say they USE WEBPACK. prepros.io/help/bundle-javascript "Prepros can bundle your JavaScript with Webpack."

[@madd5]

60 FPS was essential to understand all the details of webpack. Otherwise it would be too choppy.

[@syntaxfm]

I am sorry if my 60fps has made you upset.

[@madd5]

was just kidding. But it's pretty useless though :)