Getting Started with Webpack 5 in 2021

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

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

50% 1

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.co...
Webpack core concepts:
webpack.js.org...
Webpack official Guides:
webpack.js.org...
Webpack official Configuration settings and options:
webpack.js.org...

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

29 сен 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

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 3 года назад

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

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

Best tutorial about webpack I have ever seen Thanks bro

@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 2 года назад

Thanks

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

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

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

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

@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

@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"

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

real Professor !

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

Thanks! Excellent video.

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

Thanks for this great tutorial!

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

Thanks! Nice! Great Tutorial!

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

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.

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

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 3 года назад

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.

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

what is that arrow symbol at 20:53?

@SteveGriffith-Prof3ssorSt3v3 2 года назад

It is a / followed by a \

@vonwieckvonwieck Год назад

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

@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

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

@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.

@alexmutschlechner8205 Год назад

The best tutorial that i have found.

@meAnjani 11 месяцев назад

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

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

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

@cholo2605 11 месяцев назад

Thanks so much professor, i just discover you and i think you are the GOAT🐐

@stopstalkingme2023 Год назад

i hate webpack, the complexity of this too much for me. I might consider using parcel or other alternatives instead.

@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?

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

14:27 Are you sure? I think plugins is a list of objects, not a list of JavaScript functions..

@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

@pashabiceps95 3 месяца назад

The best tutorial for actually understanding

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

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

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

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

@laughing-out-loudhd996 Год назад

That is really well explained.. Thank you prof

@emrentoelluminiados Год назад

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

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

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

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

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

@kube-tech7384 2 года назад

from the deepest of my heart "THANK YOU "

@abhishes Год назад

Thanks .. very good introduction.

@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.

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

thanks. You really made things easy to understand

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

Excellent Awesome Great, I like man

@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 - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-LCezax2uN3c.html

@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.

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

Really good introduction to webpack.

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

Great tutorial as always, more webpack please ;)

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

how to use production mode in webpack

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

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

@ינוןאלבז-כ1ז 2 года назад

realy good video on this scary topic

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

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

@SteveGriffith-Prof3ssorSt3v3 3 года назад

Static is the property that replaced contentbase

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

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

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

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

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

Great tutorial....thanks Steve...

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

it's not working, please solve it...................... [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:

@SteveGriffith-Prof3ssorSt3v3 2 года назад

As per other comments in here there were a couple changes from version 4 to 5. DevServer has been supported since version 4, but there are a couple changes to the options. webpack.js.org/configuration/dev-server/ The code gist has been updated.

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

@@SteveGriffith-Prof3ssorSt3v3 Thank you😍💕💕

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

Thank you very much!!!

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

Sorry so if in my project I have 80 images. 80 imports? seriously? and in a real-world project you use 'document.body.append()??? please, can you make videos more 'realistic?? I've appreciated the video, really. But.. many real-world projects would be better. Thanks for the same.

@SteveGriffith-Prof3ssorSt3v3 3 года назад

No you wouldn't have 80 images when the page loads. There are other ways of loading images. Many images are loaded later on. Images can be loaded via fetch. Different images would like be connected with different components. Lazy loading needs to be taken into account. Caching and service workers too. Your not ever going to have one has file with 80 imports. This is a getting started video, not a full project video.

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

@@SteveGriffith-Prof3ssorSt3v3 service workers?? the cluster/pm2 module? can you make a full project video? or maybe, even better, how to implement express.js/ejs with webpack5. That would be really useful. Thanks for the fast answer :)

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

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

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

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

very helpful tutorial

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

Thank you very much

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

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 !

@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?

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

It is a great tutorial.

@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

@arysetansy5466 Год назад

Literally the most didactic tutorial I’ve seen in 2 years of programming

@SteveGriffith-Prof3ssorSt3v3 Год назад

Thanks?

@arysetansy5466 Год назад

Lol, is that a question? You’re awesome

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

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

@SteveGriffith-Prof3ssorSt3v3 3 года назад

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

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

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

@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?

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

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

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

I love you bro

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

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

@custercuster4918 Год назад

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

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

good job.

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

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

@SteveGriffith-Prof3ssorSt3v3 2 года назад

CTRL + C

@frontend_ko Год назад

thank you so much. it's really helpful. i bumped into some troubles for setting up webpack.config.js in this video. contentBase: directory in devServer -> static: {directory} watchContents: true in devServer -> watchFiles: "src/**/*"

@SteveGriffith-Prof3ssorSt3v3 Год назад

I pinned a comment thread that talks about this.

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

Nice!!!

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

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

@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"

@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.

@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.

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

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

@SteveGriffith-Prof3ssorSt3v3 3 года назад

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 3 года назад

Thank you

@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.

@王三运-s5c 2 года назад

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

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

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

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

Thank you very much, this was really helpful.

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

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

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

Thank you very much,please part youre videos

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

Thanks, professor Steve.

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

your service workers series was excellent lucidly explained.thanks

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

The best webpack tutorial EVER

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

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

@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.

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

OMG loooved it!! Thank you so much!

@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 💙

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

Good tutorial!

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

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 3 года назад

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/

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

Thank you so much for this great tuto ❤

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

Well explained for beginners.

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

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

@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.

@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.

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

You are the best of the best.

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

Thanks Prof. Love your work

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

As always amazing content. Thank you ❤

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

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 3 года назад

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 3 года назад

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