Getting Started with Webpack 5 in 2021

Рет қаралды 33,231

3 жыл бұрын

This tutorial walks you through everything you need to get started using Webpack in your projects. If you are doing React development it will also help you to understand the role that Webpack plays in that too.
The core concepts of Entry points, Output configuration, Loaders, Plugins, Development web servers, and hot reloading are all discussed in detail, PLUS some of the key improvements that Webpack 5 has over Webpack 4.
Code from video:
gist.github.com/prof3ssorSt3v...
Webpack core concepts:
webpack.js.org/concepts/
Webpack official Guides:
webpack.js.org/guides/
Webpack official Configuration settings and options:
webpack.js.org/configuration/

Пікірлер: 162

@alexandershcheglov4653 2 жыл бұрын

Just for ones who new here. There is "static" instead "contentBase" since last update I think. Thank you for the great explanation. You have a new subscriber now.

@ryanmcpherson6167 2 жыл бұрын

Huge help! Thanks!

@marcinkalmar9964 2 жыл бұрын

thanks mate , your comment give my direction toward solve my problem :)

@ranguy1379 Жыл бұрын

Also watchContentBase isn't necessary anymore, it's already enabled by default

@katkodes6055 Жыл бұрын

Steve, I was on the verge of tears with webpack and you fixed it. I know this took time and effort to make so I thank you for it!

@wiktorliszkiewicz354 2 жыл бұрын

Update: In webpack.config.js: devServer:{ static: path.resolve(__dirname, 'dist'), port: 5001, open: true, hot: true, } and in package.json: "dev": "webpack serve --mode development ", "build": "webpack --mode production"

@keithhuels4178 2 жыл бұрын

Probably the best single tutorial video I've seen. From your pacing, to barebones explanations of WHY each line is needed, to your calming voice. Superb. I came here after webpack's official docs and they should hire you lol.

@omersoncruz1081 Жыл бұрын

I agree with the calming voice. Love it specially when you're dealing with this kind of source of headache lol

@creatingwithcode1630 3 жыл бұрын

Excellent tutorial! I'm so glad that I found your channel.

@pashabiceps95 Ай бұрын

The best tutorial for actually understanding

@cgarafulic 2 жыл бұрын

Thank you Steve for such amazing explanation. Great started point to learn how webback works. Then it's up to the project needs what loaders and plug-ins to include.

@aminam9201 3 жыл бұрын

the way you teach is clean in deep enough to get started.

@sebastien1292 2 жыл бұрын

This is the best tutorial I've watched on this topic. Thank you!

@munishthakur8018 2 жыл бұрын

Loved this tutorial, very beautifully constructed , instead of installing evrything at once and overwhelming the students, concepts were introduced in an ordered fashion only when necessary. I truly understand Webpack now. Thanks !

@bartek4210 2 жыл бұрын

Great tutorial, very well explained and I like the slow pace. In the newer version of the "webpack-dev-server" the "contentBase" have to be replaced with "static" and "watchContentBase" gives errors so I just removed it, and to make hot realoding work replace "dist" with "src" in the "static: path.resolve(__dirname, 'src')," ``` devServer: { static: path.resolve(__dirname, 'src'), port: 5001, open: true, hot: true, }, ```

@Fishamble Жыл бұрын

Thanks

@user-nl8ew6lg5w 11 ай бұрын

Hi Steve, special Thanks you save me alot of time. This was exactly what i am looking for. Very Good example for a beginner tutorial. With best regards from Germany

@alexmutschlechner8205 Жыл бұрын

The best tutorial that i have found.

@sagarkapr 2 жыл бұрын

Dude you are awesome!!! Thanks for creating this. Looking forward to more content!

@khaledoghli1894 3 жыл бұрын

Thank you so much ,i have been waiting this tutorial from someone good in explain .i will watch this now .and i hope you cover the important thing . when we work in real project 💙

@iwswordpress 3 жыл бұрын

Superb! Actually helped me understand and wanting to use webpack. Thanks.

@thewpwing 2 жыл бұрын

Awesom explanation and walk with step by step. This is the best Webpack Getting Started. Thanks a lot.

@sujatkamal 3 жыл бұрын

your service workers series was excellent lucidly explained.thanks

@meAnjani 8 ай бұрын

thank you so much Steve Griffith, it was very helpful and very easy to understand things that explained in this video.

@gektorix 2 жыл бұрын

The only lesson that helped me set up webpack. Thank you very much. Please, make another one video of current webPack!)

@elbekxatanboyev4584 2 жыл бұрын

Best tutorial about webpack I have ever seen Thanks bro

@kube-tech7384 2 жыл бұрын

from the deepest of my heart "THANK YOU "

@stefangriffin986 2 жыл бұрын

Super cool. Great in depth explanation. Thanks, I m good to go now 🤙🏻

@johnm8358 3 жыл бұрын

Great tutorial as always, more webpack please ;)

@prernamehra2343 2 жыл бұрын

Just loved it. 😍 Thanks for creating wonderful content. 🙏

@custercuster4918 Жыл бұрын

Wow, what an amazing video, really appreciate what you've done

@licokr 2 жыл бұрын

The best webpack tutorial EVER

@gyros9162 2 жыл бұрын

Thank you! I understand a lot from your video. As always laconic and meaningful. They say Node Sass deprecated and urge you to switch to Dart Sass, which is, anyway, available from npm by "npm install sass"

@user-nz7zs1sy9e 2 жыл бұрын

greate work! clear and concise, much better than reading the docs. tks!

@scoutn7370 2 жыл бұрын

I had no idea Alan Cross knew about Webpack. :) Thanks for the informative video!

@amithbhagat 2 жыл бұрын

Thank you very much 🙏. Great tutorial. It helped me a lot.

@essohanamalou7662 Жыл бұрын

thanks. You really made things easy to understand

@BogacGuven 3 жыл бұрын

As always amazing content. Thank you ❤

@mfrdbigolin 2 жыл бұрын

Really good introduction to webpack.

@ikamy 2 жыл бұрын

Thank you for not wasting my time, It's was super good

@laughing-out-loudhd996 Жыл бұрын

That is really well explained.. Thank you prof

@noni_shadow 2 жыл бұрын

Thank you so much for this great tuto ❤

@sab1102 2 жыл бұрын

OMG loooved it!! Thank you so much!

@josemunguia5660 2 жыл бұрын

Thanks for this great tutorial!

@awabelmahe9700 2 жыл бұрын

Thank you very much, this was really helpful.

@marcosotto8424 Жыл бұрын

Great tutorial....thanks Steve...

@fazzyakamello 3 жыл бұрын

Thanks Prof. Love your work

@VanHaleNNoodle 2 жыл бұрын

Thanks! Excellent video.

@abhishes Жыл бұрын

Thanks .. very good introduction.

@husanisant 2 жыл бұрын

Thanks! Nice! Great Tutorial!

@khaledfarghly6480 2 жыл бұрын

Thanks, professor Steve.

@hasnainabbasdilawar8832 2 жыл бұрын

Great explanation. Just a suggestion, adding timelines to your videos would be good.

@RamtinAlamdari 2 жыл бұрын

Well explained for beginners.

@serebniti 2 жыл бұрын

Hello from Russia! I love your diction! Very comfortable!

@ygvanz 2 жыл бұрын

You are the best of the best.

@bishwajeetpandey1570 Жыл бұрын

Wow sir you just clear the fundamentals of bundlers and it is really important to move forward . I request you 🙏 to make a video on parcel.js

@SteveGriffith-Prof3ssorSt3v3 Жыл бұрын

You can post video requests here - kzfaq.info/get/bejne/gqmVrcSpl9uyY5c.html

@marcinkalmar9964 2 жыл бұрын

When I was starting watching this tutorial I was knowing that I will understand finnaly what going on in web pack , i did not be wrong.

@webmasterdev8692 2 жыл бұрын

Excellent Awesome Great, I like man

@taofeeqomotolani2311 2 жыл бұрын

This was really a great overview to Webpack. I followed the steps in the video and everything works alright except that when I make changes to the template.html file, it doesn't reflect live on the webpage except if I manually reload the page but when I make changes to the SCSS or JS files it's changes reflect live.

@taofeeqomotolani2311 2 жыл бұрын

Okay, all I had to do was change the static folder path to src

@saalimmushtaq3472 Жыл бұрын

very helpful tutorial

@christopherpink842 2 жыл бұрын

THANK YOU VERY MUCH !!!!!!!!!

@mdosmanfarooque1415 2 жыл бұрын

Thank you very much!!!

@SykoSilver 2 жыл бұрын

If it's something you'd find useful for your classes, could you do a video on using Webpack with Express & EJS? Thanks.

@user-mo3cw6go7c 2 жыл бұрын

realy good video on this scary topic

@emrentoelluminiados Жыл бұрын

if you want to learn 'React', you should start with this content.

@mahendraverma3459 2 жыл бұрын

It is a great tutorial.

@nikza1936 2 жыл бұрын

real Professor !

@bizimungupascal4118 2 жыл бұрын

Thank you very much

@mohamedyoussef8835 2 жыл бұрын

Super Awesome explanation of very confusing topic ++++++++++ 🙂🙂

@coderjeet 2 жыл бұрын

Good tutorial!

@redisco100 2 жыл бұрын

Агонь, красава!

@BradleyKisia 2 жыл бұрын

Nice!!!

@eugeniogonzato 2 жыл бұрын

Thank you

@bornoahmed4004 2 жыл бұрын

good job.

@ajdinzutic 2 жыл бұрын

Hi thanks for the cool video :) How do you manage Header/Footer or other Menus, which you want to share in all *.html Sites? I currently use it with a custom .js File, but it isn't very recommend for SEO. Can i build something which is stable with webpack5? So that i can later on use also Style with CSS or Tailwind itself?

@CastleShield 3 жыл бұрын

Great

@xxxtalxx 2 жыл бұрын

Thanks!

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

I much overdue thank you. Sorry, the super thanks feature was just enabled and I missed the first couple that came it. Glad I was able to help you!

@stanislavschaefer3233 2 жыл бұрын

@25:34 replace "contentBase: path.resolve{__dirname, "dist"} => static: { directory: path.join(__dirname, "dist" }", otherwise you're gonna get an error and it won't compile.

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

The change is already made in the attached source and is discussed in the description.

@majdibrahem1399 2 жыл бұрын

I love you bro

@alexpr6157 2 жыл бұрын

If you get an error like "Invalid options object". Change ContentBase to static in devServer.

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

Static is the property that replaced contentbase

@abdullahalsakib7963 3 жыл бұрын

Hope sir will make some tutorial on Redux and Redux Toolkit too 😄. It will really be helpful

@SteveGriffith-Prof3ssorSt3v3 3 жыл бұрын

It's on my list... with about 800 other tutorials.

@RahulGupta-qo7fi 3 жыл бұрын

@@SteveGriffith-Prof3ssorSt3v3 thank you for your effort.

@ZenTechnologist 2 жыл бұрын

Thank you Steve for your easy to follow tutorial 🙏🏾. My setup is 80% done and I understand it. Is there a way to set it up so that the css file is copied separately to the dist folder?

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

You can set multiple entry and output points instead of just one. Often with webpack the CSS is being read and then injected directly into the HTML and/or imported through the JS. It gets compressed and injected.

@ZenTechnologist 2 жыл бұрын

@@SteveGriffith-Prof3ssorSt3v3 I ended up using the MiniCssExtractPlugin and loader, but I will explore this option too. Thanks

@ahmadreza2189 2 жыл бұрын

Thank you very much,please part youre videos

@christopherpink842 2 жыл бұрын

hello, if I have a html template ie temp.html that has multiple images , how do i import them to be bundled? cant find any solutions online, only solutions are single image, I have like 25 images, do i have to import into the app.js individually?

@sachindramohansahay187 Жыл бұрын

If we don't add webpack config file our file folder then it's important to add. Please complete webpack crash course video for ecommerce website.

@robertapostoiu2272 2 жыл бұрын

Why do I have to save both the temp.html changes and the index.html that is being outputted? If i just save temp it doesn't work

@laughxout9175 2 жыл бұрын

Thank you for awesome content! Is HtmlWebpackPlugin the same as pug? Can I use both?

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

Pug is a tempting tool the other is a webpack plugin they are not the same thing.

@laughxout9175 2 жыл бұрын

Steve can you please tell how I should write pug and sass in webpack.config.js.

@yuvrajbiswas9702 2 жыл бұрын

Sir I want to add different components of jsx, props,arrays,Router,link etc in main.js. can you explain me that how's that possible?

@heyyayesh 2 жыл бұрын

Great tutorial! I still have one doubt though. When I insert an element into the template html file it doesn't load on the webpage. Do i need another loader for that to work?

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

Images need to be imported through your JavaScript to get copied over to the distribution folder.

@heyyayesh 2 жыл бұрын

@@SteveGriffith-Prof3ssorSt3v3 Thanks for replying! I have imported in into the .js file and when i insert the image into the DOM from Js it works but when i add an img tag in the template html file and set the image path as the src of that tag it doesn't load on the webpage. However i do see an image in the dist folder with hashed name. I wish i could share more info about my query but I can't here. Any advice will be extremely helpful. Thanks.

@kamals185 2 жыл бұрын

how to use production mode in webpack

@Kanexxable 3 жыл бұрын

could you do a more in depth course i don't know the most optimal and professional way of setting up webpack. I mean mine does work but reading the docs is too confusing. I'm an aspiring front end dev.

@SteveGriffith-Prof3ssorSt3v3 3 жыл бұрын

The way you set up webpack depends entirely on the project you are building. There is not simply one way to set it up. It depends on the technologies that you are using. It the flexibility of webpack that makes it so powerful (and so challenging to learn). There is a good boilerplate linked in the description. A boilerplate is a good starting point.

@nematjonabdulloev3568 3 жыл бұрын

Is it worth to migrate from webpack 4 now? I mean those dependencies used in project. In my opinion it is pretty early yet. What do you think teacher?

@SteveGriffith-Prof3ssorSt3v3 3 жыл бұрын

Webpack 5 is now the official version. It went through a long beta period first. No need to change older projects but anything you start now should use version 5.

@nematjonabdulloev3568 3 жыл бұрын

@@SteveGriffith-Prof3ssorSt3v3 Got it. Now that's clear for me 👍.

@MikeNugget 2 жыл бұрын

I have a reasonable question: since this video tutorial literally is about 5th version of Webpack in 2021, why author writes options for devServer like `contentBase` and `watchContentBase`? There are no such options for Webpack 5 in official docs. So to make devServer work I had to remove `contentBase` and `watchContentBase` options and then I just added `static: path.resolve(__dirname, 'dist')`.

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

Yes those were devserver options from version 4 that I missed. It was changed in the code gist and discussed in the comments already.

@timtech9361 2 жыл бұрын

Everything that is passed 6months via tutorial videos is 99% outdated. That is just the world of software development. That is why it is very important to read official documentation before diving into any tutorial.

@MichaelSalo 2 жыл бұрын

16:07 Does this mean that plugins run before loaders?

@patrickoneill6498 2 жыл бұрын

One thing conspicuously absent from these video and all webpack tutorial videos - watching html files, recompiling and then live reloading. Am I right in thinking this is not supported in webpack?

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

It's not something that I would think to do with webpack. Generally speaking webpack is used with JS based projects that are generating the HTML. HTML templates are used or other tools that may have server-side rendering or generated static pages. But if my site was built with a bunch of static HTML files then I wouldn't think to try and bundle it was an app with webpack.

@rickyu1978 2 жыл бұрын

contentBase throws an error, it has been renamed to static. However, It seems with webpck 5.5 dev server is built in? am i wrong?

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

Yes. contentBase was the old setting. static is the new name for that. Thanks. I've updated that in my sample file. The dev server is part of webpack. webpack.js.org/configuration/dev-server/

@dumchik7290 2 жыл бұрын

If I use index.html, no issue. But if I change its name to app.html and open dev server, I see the listed directory in browser. From there I have to select app.html. How can dev server directly open app.html?

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

That is more an issue of how the web works. index.html is the default file name for every website on every server. If no file name is provided then the webserver will return index.html. This was created as a standard because people cannot be expected to guess the names of your webpages.

@techwriting6493 2 жыл бұрын

Excellent tutorial! Where can I download the folder

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

In the description. The link called "Code from video".

@chakibbensari1850 2 жыл бұрын

Thanks a lot for this tutorial.. it's a legendary tutorial for me ! i have just a question, i am not able to start the local server unless i remove the static propert from devSever configuration object Can you help me understand please ? This is my object config : devServer: { static: path.resolve(__dirname, 'dist'), port: 5001, //default 8080 open: true, hot: true, watchContentBase: true, } Thanks

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

are you importing the path module at the top of your file?

@chakibbensari1850 2 жыл бұрын

@@SteveGriffith-Prof3ssorSt3v3 yes all is as it was on the git. When i remove the static propert all goes fine but when it is there webpack tells me that no additionnal properties shoud be added to options (for devServer)

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

@@chakibbensari1850 not sure what is causing that for you

@fadhilh3931 2 жыл бұрын

Is webpack created for SPA type of website? Because it bundles up a ton of JS into single file. So it's perfect case for SPA.

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

Webpack works well for SPA but also for other types of websites too. All depends on what you are building and how you configure Webpack.

@fadhilh3931 2 жыл бұрын

@@SteveGriffith-Prof3ssorSt3v3 Thanks for answering, I'm a complete newbie in webpack, why we need to import css and svg into JS? For example, can we just put the css link stylesheet in the html and put the class name to JS? I don't really get the concept

@techwriting6493 2 жыл бұрын

How can I delete a folder in vs code that I've already imported to VS code?

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

Not sure what you mean. VSCode only shows files and folders that are on your operating system. If you delete a file from your OS it will disappear in VSCode.

@techwriting6493 2 жыл бұрын

Thank you

@devdude7607 2 жыл бұрын

I just don't understand the point of using Webpack over Parcel, other than the mighty deep configurations. There is just too much of config to start a project with. :/ What do you think? And Thank you so much for walking thorough this like no others!

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

I have no opinion about one over the other. Any build tool that you use is going to take time to learn. Once you have a solution that does everything that you need, stick with it.

@devdude7607 2 жыл бұрын

@@SteveGriffith-Prof3ssorSt3v3 Thank you!

@cigmaian7139 2 жыл бұрын

at minute 31:19 how he reset the server? how to call c^C?

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

CTRL + C

@husainmwasfi4262 2 жыл бұрын

"npm run build" not working npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

Are you in the right folder?

@husainmwasfi4262 2 жыл бұрын

[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options has an unknown property 'watchContentBase'. These properties are valid: object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, static?, watchFiles?, webSocketServer? }

@husainmwasfi4262 2 жыл бұрын

devServer: { contentBase: path.resolve(__dirname, 'dist'), writeToDisk: true, port: 5001, // default 8080 open: true, hot: true, // this is for server to refresh when you change files in /build (not required normally) watchContentBase: true, },

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

@@husainmwasfi4262 This was discussed in other comments and was updated in the code Gist.