Webpack 5 Full Project Setup

No video

Webpack 5 Full Project Setup

Рет қаралды 96,657

Күн бұрын

We are going for the big haul on this one. We'll start out creating a new Webpack 5 project, putting it on Github, and adding all the parts we need as we go. By the end we'll have a Single Page App (SPA) setup that is hosted with some basic continuous integration (CI) so that every time we push, or make a pull request, to the main branch our site automatically updates.
We'll be covering a ton of common functionalities needed in a Webpack project such as:
- Babel and @babel/preset-env for modern JavaScript transpiling.
- CSS, SASS, PostCSS with postcss-preset-env for CSS fallbacks for better cross-browser support.
- Browserslist config for customizing the browsers you want to support for JS and CSS, all in one place.
- Outputting all CSS to a file with mini-css-extract-plugin
- HTML templates with html-webpack-plugin
- Cleaning the output folder every build with clean-webpack-plugin
- React with the new automatic importing functionality supported in React 17+ through Babel.
- React Fast Refresh in Webpack: the new hot module loading tool supported by the React team.
- Outputting or bundling images with the new Webpack 5 Asset Module type.
- Quickly getting your app/site hosted on Netlify.
By the end of the video you'll be familiar with setting up plugins and loaders of varying types so that you can use this project as a starter for each project, as well as knowing how to modify it for your projects needs.
❗❗ IMPORTANT UPDATES ❗❗
webpack-dev-server update
`webpack-dev-server` released version 4 on 2021-08-18, which has a breaking change for this video. In the `webpack.config.js` file, under `devServer`, the `contentBase` property has been changed to `static`. If you use `contentBase`, like I do in the video, you'll get an error. You can either use `webpack-dev-server` ^3.11.0 (which is what this video uses) and just follow along with the video, or you can install the latest and update to the required change.
Here is the link to the webpack docs for this property:
webpack.js.org/configuration/...
And here is a link to the migration guide from v3 to v4:
github.com/webpack/webpack-de...
WINDOWS USERS
Some of the scripts I make to set environment variables will not work on Windows. I've made a video to fix that issue here:
• Windows development: F...
Hot Reloading issues
Your issue might be different, but just in case -- If you are having troubles with hot reloading check out this video, also in the Webpack playlist on my channel, which shows a fix:
• Solution for Webpack 5...
~~~~~~
00:00:00 - What we'll cover in the video
00:02:39 - Setting up the project and repo
00:14:13 - Babel
00:17:49 - Source Maps
00:22:12 - CSS, SASS, PostCSS, HMR
00:38:12 - browserslist
00:47:46 - React with JSX
01:00:17 - Images
01:19:42 - Automated cleaning and html template
01:31:59 - Hosting on Netlify
01:35:04 - React Fast Refesh
01:57:35 - Wrap up
~~~~~~
Webpack 5 playlist:
• Webpack 5
Repository for reference (left alone for historic reference purposes):
github.com/Jimmydalecleveland...
Branch for the latest updates to the previous repo code:
github.com/Jimmydalecleveland...
Follow Jimmy Cleveland's doings:
twitter: / jimmydcleveland
blog: blog.jimmydc.com/
#webpack #webpack5 #babel #react #fastrefresh #browserslist #toomanyhastags

Пікірлер: 495

@SwashbucklingwithCode 2 жыл бұрын

❗❗ IMPORTANT UPDATES ❗❗ ### webpack-dev-server update `webpack-dev-server` released version 4 on 2021-08-18, which has a breaking change for this video. In the `webpack.config.js` file, under `devServer`, the `contentBase` property has been changed to `static`. If you use `contentBase`, like I do in the video, you'll get an error. You can either use `webpack-dev-server` ^3.11.0 (which is what this video uses) and just follow along with the video, or you can install the latest and update to the required change. Here is the link to the webpack docs for this property: webpack.js.org/configuration/dev-server/#devserverstatic And here is a link to the migration guide from v3 to v4: github.com/webpack/webpack-dev-server/blob/master/migration-v4.md ### WINDOWS USERS Some of the scripts I make to set environment variables will not work on Windows. I've made a video to fix that issue here: kzfaq.info/get/bejne/qp-fnrh10Li5dJc.html ### Hot Reloading issues Your issue might be different, but just in case -- If you are having troubles with hot reloading check out this video, also in the Webpack playlist on my channel, which shows a fix: kzfaq.info/get/bejne/orSbidGVsKnZnWw.html

@greenhermit6288 2 жыл бұрын

Hi there, I have been following this tutorial recently, am up to the automated cleaning and html template and skipped the react section. I want to add one issue I have been having (and it could be me or a difference in the webpack versions) but when an image asset is bundled in the js file (if the type prop is "asset/inline") it appears to be included inside my "main.css" file not my main.js file as in yours. Not a big deal for me but could be worth noting. Similarly, I didn't have to add a separate rule in my webpack config for it to handle images, it loaded them all up by default. Cheers for the tutorial and also the diligence to keep it updated, is a very good thing to do.

@SwashbucklingwithCode 2 жыл бұрын

@@greenhermit6288 I'm not sure I follow, what does it mean to have an asset included in the css file? Do you mean just the link to the asset, like `background: url(imagelink.jpg)`?

@trungvu6814 2 жыл бұрын

@@SwashbucklingwithCode Hi, can I still use react refresh? it noticed that react refresh use webpack-dev-server v3 and can't resolve when installing. Thank you

@SwashbucklingwithCode 2 жыл бұрын

@@trungvu6814 I haven't used v4 of dev server on any projects so I couldn't say how it affects react refresh. If it's a peer dependency issue, you can always use --legacy-peer-deps, but for long term projects you usually want to avoid that.

@xxxtalxx 2 жыл бұрын

Thank you for being considerate enough to mention updates like this. Saved me a headache.

@k4qdex 2 жыл бұрын

jesus teaching us webpack. what a time to be alive

@mykolao 3 жыл бұрын

Thank you, Jesus! This is exactly what I was praying for :D

@riendlyf 3 жыл бұрын

Твой коммент сделал мой день!))

@amphibia95 3 жыл бұрын

Haha xD I have the same feeling right now.

@kabs29 2 жыл бұрын

🤣🤣

@i8ET 2 жыл бұрын

I was thinking a mix between Jared Leto and Jesus 🤣

@Ianmat55 2 жыл бұрын

Just saved me hours of banging my head against the wall trying to figure out why my images aren't loading. Thanks.

@claudiobaumgartner2760 3 жыл бұрын

Honestly I can't see any reason why you don't have thousands of followers by now. Quality content, nice pace, all for free! Amazing! Thx a lot.

@SwashbucklingwithCode 3 жыл бұрын

Thank you kindly. The channel is still relatively new so I'm content with the growth pace right now.

@amphibia95 3 жыл бұрын

+1!

@utsavojha2953 3 жыл бұрын

Than you so much! Amazing walkthrough! Learned alot!! I was stuck in a loop of errors cause I couldn't set babel up with webpack, this is just awesome, i learned why were doing some of these things!

@satyaspb1 2 жыл бұрын

Really appreciate your knowledge, teaching style and the patience to teach as depth as possible. thank you so much learn a lot from your single video.

@jjaxner 3 жыл бұрын

Thank u so much. I've learned so much from this video. Love how you don't just throw in a config-parameter but take time to explain what it does and show what it solves.

@iamprincemuel 3 жыл бұрын

This is awesome! Hard to find gems like this. Thanks a lot

@anuragnair5672 3 жыл бұрын

This is the best tutorial on the internet for webpack . Learned a lot from it!!!

@saeedm9772 Жыл бұрын

I used it to refresh my memory. That was great tut with great information. Thank you. Keep it up.

@BrewskaySA 3 жыл бұрын

You did a great job on this video very informative and well thought out!

@anthonymarquez2542 2 жыл бұрын

The best video that actually explains the webpack config properly, without assuming people's knowledge about the subject. ♥♥♥

@boribilder_sem_basal 2 жыл бұрын

Thank you bro, 1 year after and you still helping a lot of people!

@SwashbucklingwithCode 2 жыл бұрын

Happy to help. I have much more tools I need to cover but finding time has been quite difficult. It's always nice to get some positive reinforcement for making time, thank you.

@abdussamad0348 5 ай бұрын

Amazing knowledge, well explained. The transition to react is too smooth.

@skoodath 3 жыл бұрын

Although I am late to the party, this is the best explanation of webpack and how it works I have ever seen! I haven't even finished watching the video yet. Great job!

@romazahrypa 3 жыл бұрын

Subscribed, immediately after checking out a few of chapters! Descent quality!

@JoelRemix 3 жыл бұрын

More than decent. Superb!

@vijaykumarreddyalavala3713 3 жыл бұрын

Just when I need it. Thank you so much

@tylerduprey7355 2 жыл бұрын

I really enjoyed this course! Thank you.

@shvideo1 2 жыл бұрын

Great tutorial and content. I followed it all through and deployed to Netlify. I added Typecript as well. The process is a bit more smoother with most of the mentioned bugs fixed already. Thank you for your great effort for putting this together and the great tempo and your attitude -- relaxed! You did an excellent job!

@utsavojha2953 3 жыл бұрын

Rewatched this for the 3rd time, Jimmy youre videos are awesome and we all hope you keep uploading this amazing content on here.. You are really awesome for doing this, cheers!

@SwashbucklingwithCode 3 жыл бұрын

I really appreciate that, thank you. The time factor is always a battle, but I plan to keep trying for awhile.

@dpdoescode 3 жыл бұрын

Great video 👏 I love how you go through the git commits after each section to have a quick overview of what you've done. Great way of taking this in chucks instead of all in one go.

@SwashbucklingwithCode 3 жыл бұрын

Thank you, I was wondering how people would feel about that, as it does slightly add to video length.

@skdehuri 3 жыл бұрын

Maybe it's my lucky day I found your video on my recommendation. Thank you so much for this walkthrough. I was struggling to configure react fast refresh until I found this one. Great explanation and the small details and errors you focus on are really interesting.

@SwashbucklingwithCode 3 жыл бұрын

I had a lot of struggles with react refresh and the new Webpack+Babel versions. Thank you for letting me know the troubleshooting parts were useful, that's what I'm trying to balance the most right now in my videos.

@miray6497 Жыл бұрын

I'm watching this whenever I need webpack it's so explanatory. Thank you so much!!

@SwashbucklingwithCode Жыл бұрын

Awesome, thank you for saying so.

@thepopstudio2354 3 жыл бұрын

You are freaking awesome dude, keep doing this man!

@andrewperez7844 2 жыл бұрын

Wow man thank you so much for this content. This helped me getting a legacy project at my job more up to date with Webpack 5. You also helped me understand this whole complicated concept as well. Love your calm demeanor and explanations. New sub!

@SwashbucklingwithCode 2 жыл бұрын

Fantastic. Glad to be of help.

@ShubhamGupta-qk9uq 2 жыл бұрын

Thanks for all the knowledge! , really like your style of teaching

@PeteSchroederJr 2 жыл бұрын

Excellent video, thanks!! This will be my go to for set up!

@SwashbucklingwithCode 2 жыл бұрын

Nice.

@frontend.experiencetech 3 жыл бұрын

OMG, this is the best Webpack detailed tutorial ever. I wish it reaches millions of views and likes. Thank you for making this video with such details.

@SwashbucklingwithCode 3 жыл бұрын

Thank you, truly. It means a lot to me, and my motivation, for you to say so.

@mateusmiguel_ Жыл бұрын

Thanks a lot for this video/project! I spent the weekend on this and definitely it was worth!

@SwashbucklingwithCode Жыл бұрын

Very awesome to hear, thank you.

@mubashirwaheed474 3 жыл бұрын

I just hit gold. Thank you so much

@vikram87in 2 жыл бұрын

Such a clear and amazing video. Didn't even realise that it was 2 hrs long. Thanks a lot Jimmy 😍😍

@SwashbucklingwithCode 2 жыл бұрын

Thank you for the kind words. I'm happy it was useful.

@miray6497 3 жыл бұрын

I was watching your video "Webpack 5 CSS Walkthrough" to learn about webpack and I was confused about browserslist thing. Then you add a new video about that! This is my lucky day!

@SwashbucklingwithCode 3 жыл бұрын

I actually thought about doing a little video just for browserslist, but hopefully between these 2 videos there is enough on it. Let me know if not.

@hasantktl 2 жыл бұрын

Really priceless tutorial. You use state of the art dev methods and explain them step by step. You dont hide some of your knowledge and this is really deserves millions of like.

@SwashbucklingwithCode 2 жыл бұрын

very kind, thank you.

@andregomes7232 2 жыл бұрын

This is real nice stuff. Thanks and congrats man

@SwashbucklingwithCode 2 жыл бұрын

Thank you.

@lesiakutran3523 3 жыл бұрын

thank you for everything you do!

@bdk9830 2 жыл бұрын

thank you a lot covering this tutorial

@ruslanfreelancer7082 2 жыл бұрын

Never used webpack to build my projects so it looks a bit complicated for me. Thanks for the tutorial, some things became clearer now.

@0x7A69 3 жыл бұрын

What a time saver. Thanks for this vid.

@ranvijaysingh7967 Жыл бұрын

Thanx man it really helped to get started with webpack and reactjs

@omkarkulkarni3644 3 жыл бұрын

You just got a subscriber. Awesome tutorial. Concise and to the point .. best luck :D

@RyantheCanuckpirate 2 жыл бұрын

This is a tremendous resource. Webpack was super intimidating when I tried to use it for the first time (reading the official docs). Having someone explain all the basic features was definitely worth the hours it took me to get me through the entire video. Also as a first time viewer I was definitely not expecting the last 30 secs. Perfect ending!

@SwashbucklingwithCode 2 жыл бұрын

Thank you for the kind words and I'm always happy to hear the effort put into making the video was worth it.

@mikehart5395 2 жыл бұрын

thankyou so much for this, helped me out loads.

@arjunp6323 3 жыл бұрын

Cannot thank you enough mate ,not even a comprehensive course could cover what u have thought over here, I could never get a proper video for a complete configuration of webpack to know how it works, until I came across this video of yours. thank you once again for investing your time to share the knowledge ..

@SwashbucklingwithCode 3 жыл бұрын

I'm happy it helped, and thank you for letting me know.

@connerlinzy8889 3 жыл бұрын

Exactly what I needed. Thanks!

@MingLiHI 3 жыл бұрын

Really awesome work! I learned a lot of webpack knowledge from your video.

@SwashbucklingwithCode 3 жыл бұрын

Glad to hear it.

@oortcloud210 Жыл бұрын

Great video - the changes made in WebPack 5 can be difficult to unpick when trying to set up a project with babel, react, less, css, images, ESLint etc etc this really helped me find which options are still applicable and which are changed. Thank you.

@amphibia95 3 жыл бұрын

I feel like my life has gotten a little bit easier after watching this video. Thanks so much for sharing your knowledge! I'm working as a frontend dev for only 3 years now and I wish I knew half of what you know. Hope you get millions of likes and views.

@SwashbucklingwithCode 3 жыл бұрын

What a delightful compliment, thank you very much. And I assure you, I wish I knew much more than I do in a ton of areas and am always looking up to other devs, haha. It never ends.

@flnnx Жыл бұрын

Very helpful. Thank you!

@jamieghoorbin4526 3 жыл бұрын

Thanks Jimmy! Great tutorial.

@ram-bk4mu 3 жыл бұрын

Thanks dude, i like the way you explain stuff!

@SwashbucklingwithCode 3 жыл бұрын

I'm very glad to hear it!

@sairaj5660 3 жыл бұрын

Your videos are that bridge that transforms a person from an average developer to a 10X Developer, Thank you so much man ❤️

@SwashbucklingwithCode 3 жыл бұрын

That is quite the compliment, thank you.

@onlyformyselfcom 3 жыл бұрын

Wow, thank you for this tutorial!!! Webpack is entirely new world for me and after this video, it works!!! I can't believe it :) PS: I am so fascinated, so this is the first video on KZfaq I have ever put a comment 🤞

@SwashbucklingwithCode 3 жыл бұрын

Well, then I am honored to have earned the first comment.

@kozmikhero6749 3 жыл бұрын

Took a 18 month break from coding only to return to everything being so different. Thank you subbed for sure. Theres so many tiny gotchas for these libraries that most people don't even mention!

@SwashbucklingwithCode 3 жыл бұрын

It is certainly a blessing and a curse, how fast the industry moves. There are few days a week that I am not studying, and I still feel overwhelmed.

@boxfreshpidge 3 жыл бұрын

Great timing!

@remo7168 3 жыл бұрын

Great tutorial about Webpack 5!

@paveldub2241 3 жыл бұрын

great job, dude! Thank you!

@luiscortes6563 2 жыл бұрын

Thank you so much for this! I ran until a couple of “gotchas” that you mentioned and you dramatically reduced my downtime.

@SwashbucklingwithCode 2 жыл бұрын

Nice, glad it helped.

@lahirukariyawasam7865 Жыл бұрын

Great tutorial video. Thanks.

@greatauntmuriel 3 жыл бұрын

this is exactly what I needed rn thank you!!

@SwashbucklingwithCode 3 жыл бұрын

My pleasure.

@mikh218 3 жыл бұрын

Thank you for the webpack tutor! It would be so good to add the typescript at the end =)

@PabloMartinezfr 3 жыл бұрын

I love this tutorial and your Channel, congrats!!!

@joseortiz7239 2 жыл бұрын

Excelente video, bien explicado. Gracias.

@zivtamary 3 жыл бұрын

Amazing tutorial man, thank you! :)

@ynorouzi 2 жыл бұрын

It saved my life. Thank you a lot

@PeterFullen 3 жыл бұрын

I really appreciate these videos. This is the way they should be teaching React to beginners. Using create react app handcuffs some people. They do not understand how the code then gets bundled for production.

@gal88b 2 жыл бұрын

Thank you so much. This video is absolutely fantastic.

@SwashbucklingwithCode 2 жыл бұрын

Thanks for saying so, happy to help.

@raymondvu2173 2 жыл бұрын

Great video 👏👏👏

@Gohel95 3 жыл бұрын

Thanks, man for the lessons💖💕

@edwardbaldacchino5284 3 жыл бұрын

Awesome video, I've learned so much from it. In case anyone hasn't said it yet, publicPath just adds on to the path value in output (1:05:00)

@SwashbucklingwithCode 3 жыл бұрын

Fantastic to hear. And about publicPath, do you mean it is for appending more directories to place the CSS in?

@mosherube7904 3 жыл бұрын

Great video! I've been struggling with webpack so this video has been a real light! I actually encountered no issues npm run building when running and using my image at first. I didn't even need to use the rules in webpack. But I still plugged in your code and it broke for the jfif images when I used asset inline. Idk if things have changed for images on webpack since this video came out.

@gredev 2 жыл бұрын

Amazing! You just solved one of my main problems man. Thanks a lot.

@SwashbucklingwithCode 2 жыл бұрын

Glad to help.

@kevinbeckwith3770 Жыл бұрын

Hey Jimmy, First, I want to say that this is a fantastic resource, I'm a complete newbie when it comes to webpack, and because of how clearly you explain what you're doing I'm having no trouble understanding it. For anyone interested you can type W100% to avoid getting pixels.

@Panchito007able 3 жыл бұрын

Thanks! Great tutorial.

@user-ri5zr2rv1n Жыл бұрын

thanks for your effort

@akilkudil 3 жыл бұрын

Awesome friend. I agree with others that you deserve at least 100 times more subscriptions. Thanks for the knowledge share.

@SwashbucklingwithCode 3 жыл бұрын

I'm glad I could pass on some learnings, and even learn some new things in the making.

@DarkzarichV2 2 жыл бұрын

Thank you for the video, was willing to dive into Webpack 5 understanding long ago. Previously I had some basic understanding which was enough to achieve whatever I needed and understand most of whatever I copy-pasted from docs and stuff but now I understand it much better! Though, still something is left out, would be cool if you could go into optimizations like separating the code by chunks and stuff

@SwashbucklingwithCode 2 жыл бұрын

Thank you. There are a ton of paths you can go down with Webpack usage, and my short term goal was just to raise familiarity with the basics for the many developers that use frameworks with webpack magic under the hood that they don't feel comfortable fidgeting with. code-splitting/chunks and tree-shaking, as well as library creating are things I intended to get into eventually but the time sync to do them correctly is quite high.

@who.is.jaytee 3 жыл бұрын

@ 42:06 thank god for this note about the browserslist file and the bug. I literally spent 2 days trying to figure out wtf was wrong with my live reload/hmr. I have my webpack.config set up a little differently but this explains it. 🙏

@SwashbucklingwithCode 3 жыл бұрын

It got me good as well, so much so that I had to make a video just for solving it.

@TheRealFishForReal Жыл бұрын

Thanks for this video , it was great!

@SwashbucklingwithCode Жыл бұрын

Cool.

@suneetjena9788 2 жыл бұрын

5 mins into the video and I have subscribed him already !!

@SwashbucklingwithCode 2 жыл бұрын

Thank you.

@arjunsah8561 Жыл бұрын

Thank you so much for these amazing contents on webpack 5. If you could add some videos of integrating Material UI and or tailwindcss and or bootstrap 4/5, That will re really amazing because it will literally cover almost everything.

@SwashbucklingwithCode Жыл бұрын

I shall ponder on it when I start back up again. Thank you.

@bswill5077 3 жыл бұрын

This is certainly a god's work. Thank you again.

@RajKGupta639 2 жыл бұрын

Super awesome tutorial

@williamm200 Жыл бұрын

bruuu this rocks muchas Gracias !!!

@ThomasPoppeBE 3 жыл бұрын

Great tutorial, well explained.

@SwashbucklingwithCode 3 жыл бұрын

Thank you.

@subratopatnaik6361 3 жыл бұрын

Liked & subscribed Awesome video. This is everything I need to learn about webpack 5. I'll share this video once I understand all the things that you have explained. 😋🙈

@normanejm 2 жыл бұрын

Thanks bro. 💪

@sanghunlee6825 2 жыл бұрын

OMG you save my life THANK U SOOOOOOOO MUCH!!

@sithmech3803 3 жыл бұрын

After hours of trying to fix my webpack woes by googling each problem, I stumbled upon your excellent video. I normally don't watch videos of this length, but you delivered clear and concise information in an incredibly engaging way. Thank you.

@SwashbucklingwithCode 3 жыл бұрын

Thanks for letting me know. Video length is tough, since a lot of time is required for topics like this. It's hard to know if a long video is going to be worth the investment.

@iamprincemuel 3 жыл бұрын

@@SwashbucklingwithCode They'd just use the Pomodoro technique

@RyantheCanuckpirate 2 жыл бұрын

@@SwashbucklingwithCode This is how I discovered your channel, so you've got at least 1 sub as a result of this tutorial. I'm brand new to module bundlers and copy/pasting the instructions isn't satisfying. It works, but I like to have a basic understanding of how my tools work so I can troubleshoot errors with less stress. Spending a few hours on learning webpack has definitely made my life easier, so thanks again

@TungTo-xp8rv 3 ай бұрын

thanks a ton bro.

@user-zm2jm4gb5b Жыл бұрын

Thanks a lot!

@brod515 3 жыл бұрын

@1:17:51 for windows users, use the npm package rimraf. instead of "rm -rf dist" use "rimraf dist"

@SatyendraSingh-zt1nh Жыл бұрын

It was help me thanks alot...

@brod515 Жыл бұрын

@@SatyendraSingh-zt1nh no problem

@patsionly 3 жыл бұрын

OMG! This was my best course ever, I don't know why this video has dislikes. I'm a Mexican speaker but you're too good to specify everything! Commonly, It's too hard for me to understand English but I don't know why I could understand everything you said in this video. Thx a lot!

@SwashbucklingwithCode 3 жыл бұрын

Fantastic. I'm happy to hear it was easy to follow.

@jonasgraae5311 3 жыл бұрын

Thanks for a great tutorial ! This really helped me to understand the images/assets with react, and pickup some other nice tricks. I have not been able to find that many videos with webpack 5, so you should really consider during a tutorial on udemy, with an extended version of this video and a beginners build project in React!

@SwashbucklingwithCode 3 жыл бұрын

I'll definitely consider it. It's pretty tough keeping up with the videos as it is, so I'd probably have to take time off to pull that one off.

@_rachid 3 жыл бұрын

Thank you.

@mohamedhany2539 2 жыл бұрын

Just as I wanted in one video. Thanks man Maybe in a future video, you would make a video about MPA "Multi-Page app" with Webpack 5. It will be great.