❗❗ 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: ruclips.net/video/t9okUDkRUDc/видео.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: ruclips.net/video/lNkVndKCum8/видео.html
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.
@@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)`?
@@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
@@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.
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.
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.
I stopped coding this time last year because of how lonely it can be for a person like me. I've been wanting to pick up the gauntlet again , and this video is one of the first resources I used to review. Just as valuable as the first time I watched it! 🙌🏾 I hope you don't get discouraged by the low subscriber count...this is serious one of the best resources I've ever come across! THANK YOU!!!
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!
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.
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.
@@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
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 ..
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!
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.
If you have problems deploying: If you are developing on Windows add cross-env and rimraf to your project. Then use "build": "cross-env NODE_ENV=production webpack", and "clean": "rimraf dist" to your package.json . I was going crazy because I did not keep in mind to check my platform(netlify is using a different shell)^^ Thanks for the nice Project Setup! I had a lot of fun following along.
Thanks for helping, I wish I could edit something back in to the video but I have been so removed from Windows development that it slipped my mind during the making.
This is great! Im trying to understand webpack and your tutorial is really helpfull. Minor thing im able to add: you can set, clean: true, inside output. This will clean your dist folder without any extra plugins. Might save you some time.
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.
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.
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!
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.
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.
Do you mean single page app routing, like react-router, or something else? I don't have one for that currently. I don't use templating languages anymore, there isn't much need with the modern JS frameworks, so I haven't covered them, but I used to use them all the time.
@@SwashbucklingwithCode Thanks! I know there are many roads (webpack/libraries config) and it is hard to cover them all. What I have in mind is simple node.js express multipage app with use of some templates (EJS/handlebars/jade etc.). For example - stackoverflow.com/questions/68246882/webpack-5-express-ejs-templates - there are so many questions on this subject, and most videos/articles do not cover them. You as an expert, could explain these steps - how to bundle/not bundle, how to have addition css files/or use them (css styling) inside js files, how to convert templates without modifying it's syntax, etc. I think many ppl would benefit from your explanations/presentations.
@@jtrjkgfjrdtje images stored in a folder not inside JS file would nice too - just something to reconsider, to fully understand Webpack 5 configuration options.
@@jtrjkgfjrdtje Well I certainly don't consider myself an expert. Some of the setups you have mentioned, I haven't dabbled with in quite some time. Though I do agree some more thorough walkthroughs for all the types of combinations in the JS ecosystem are highly needed. I spent a lot of time confused on the topics and not knowing where to turn. I'll think on it, ty for the suggestions.
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!
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.
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!
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!
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.
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.
@ 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. 🙏
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.
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!
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!
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.
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 RUclips I have ever put a comment 🤞
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
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.
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.
I've found separate configs to be a bit too complicated for most people learning Webpack. It's useful as your project grows though. If you have an implementation you think is simple I'd love to take a look, though.
@@SwashbucklingwithCode Ah, but I'm a newbie also new to webpack and on watching previous video before this one, I did understand the separate config method. Just uses the DRY principle. Anyways, I like your explanation better. Thanks
if you're getting the error `'NODE_ENV' is not recognized as an internal or external command` on windows then use this build command `SET NODE_ENV=production`
For anyone using Windows and applying this solution, be aware that most servers you would host on are going to be Linux and this command won't work. There are a few ways you can make this work, and the most standard is setting up a local ".env" file. An easier solution is to just make a separate script for running on Windows, but using the one I show in the video for building on the server (i.e. Netlify). Netlify also has environment variables you can set if you want to go the ".env" route: docs.netlify.com/configure-builds/environment-variables/
For anyone else on windows still having problems like I was, the final 'build' script that worked for me was: "set NODE_ENV=production&& webpack" Notice how there is no space between the words 'production' and the '&&', apparently if you set it like 'set NODE_ENV=production && webpack' it will add a trailing space to the variable, which will cause the if statement to fail.
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!
I'll likely do some more advanced Webpack vids in the future, but I need a break from it for a little bit and I need to get some variety out there. Thank you for the suggestion!
So, so helpful! Btw, I`m using browsersync instead of webpack-devserver, works great also on remote hosts with proxy for app testing on multiple devices. You just need the webpack plugin.
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!
Thanks for a great tutorial and that you take time to read and respond to the comments. I noticed that when I added a background image in the css file, covered around 1:02:30, it seems to work without adding any extra rules to the webpack config. Do you know where support for this comes from?
One other person mentioned this, and after a quick look I didn't see mention of it in the docs, or recent release notes, though I could have easily missed it. It seems like they might have set it as a default in some update. You could always try and install the version of webpack from the video to see if you get the same behavior if you are curious.
It definitely is. It is a very powerful toolset that has greatly improved ease of use but it can still be a lot to take in. I highly recommend giving Vite a try if it's your own or a newer project.
This video solved my build problems. Amazing presentation and explanation. Thank you! But to load pictures from a html-file, I used html-loader. Just added to rules : { test: /\.html$/, use: 'html-loader' } Without this, the images from the tag in html-file were not parsed.
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.
❗❗ 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:
ruclips.net/video/t9okUDkRUDc/видео.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:
ruclips.net/video/lNkVndKCum8/видео.html
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.
@@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)`?
@@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
@@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.
Thank you for being considerate enough to mention updates like this. Saved me a headache.
jesus teaching us webpack. what a time to be alive
Thank you, Jesus! This is exactly what I was praying for :D
Твой коммент сделал мой день!))
Haha xD I have the same feeling right now.
🤣🤣
I was thinking a mix between Jared Leto and Jesus 🤣
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.
Thank you kindly. The channel is still relatively new so I'm content with the growth pace right now.
+1!
Just saved me hours of banging my head against the wall trying to figure out why my images aren't loading. Thanks.
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.
Thank you, truly. It means a lot to me, and my motivation, for you to say so.
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.
very kind, thank you.
I stopped coding this time last year because of how lonely it can be for a person like me. I've been wanting to pick up the gauntlet again , and this video is one of the first resources I used to review. Just as valuable as the first time I watched it! 🙌🏾 I hope you don't get discouraged by the low subscriber count...this is serious one of the best resources I've ever come across! THANK YOU!!!
Thank you for the kind words. I still plan on making more videos, I just had too much going on and needed a break.
@@SwashbucklingwithCode yay! Notifications are turned on...looking forward to more videos! 🏴☠️
@@Phreshie91 Thanks again for the support.
The best video that actually explains the webpack config properly, without assuming people's knowledge about the subject. ♥♥♥
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!
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.
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.
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.
@@SwashbucklingwithCode They'd just use the Pomodoro technique
@@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
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 ..
I'm happy it helped, and thank you for letting me know.
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!
Thank you for the kind words and I'm always happy to hear the effort put into making the video was worth it.
@1:17:51 for windows users, use the npm package rimraf.
instead of "rm -rf dist" use "rimraf dist"
It was help me thanks alot...
@@SatyendraSingh-zt1nh no problem
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.
Thank you, I was wondering how people would feel about that, as it does slightly add to video length.
If you have problems deploying: If you are developing on Windows add cross-env and rimraf to your project. Then use "build": "cross-env NODE_ENV=production webpack", and "clean": "rimraf dist" to your package.json . I was going crazy because I did not keep in mind to check my platform(netlify is using a different shell)^^ Thanks for the nice Project Setup! I had a lot of fun following along.
Thanks for helping, I wish I could edit something back in to the video but I have been so removed from Windows development that it slipped my mind during the making.
This is great! Im trying to understand webpack and your tutorial is really helpfull. Minor thing im able to add: you can set, clean: true, inside output. This will clean your dist folder without any extra plugins. Might save you some time.
Thank you. Someone else pointed this out as well but I haven't tried it out yet.
your advice is really priceless, thank you so much!
@@danet9330 i tried and got a success on it as well, thank u.
I used it to refresh my memory. That was great tut with great information. Thank you. Keep it up.
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.
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.
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!
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.
Thank you bro, 1 year after and you still helping a lot of people!
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.
Do you have video with routing - multi page project with templates (EJS for example)?
Do you mean single page app routing, like react-router, or something else? I don't have one for that currently.
I don't use templating languages anymore, there isn't much need with the modern JS frameworks, so I haven't covered them, but I used to use them all the time.
@@SwashbucklingwithCode Thanks! I know there are many roads (webpack/libraries config) and it is hard to cover them all. What I have in mind is simple node.js express multipage app with use of some templates (EJS/handlebars/jade etc.). For example - stackoverflow.com/questions/68246882/webpack-5-express-ejs-templates - there are so many questions on this subject, and most videos/articles do not cover them. You as an expert, could explain these steps - how to bundle/not bundle, how to have addition css files/or use them (css styling) inside js files, how to convert templates without modifying it's syntax, etc. I think many ppl would benefit from your explanations/presentations.
@@jtrjkgfjrdtje images stored in a folder not inside JS file would nice too - just something to reconsider, to fully understand Webpack 5 configuration options.
I cannot config webpack with ease either. Some more advanced approach are not well documented.
@@jtrjkgfjrdtje Well I certainly don't consider myself an expert. Some of the setups you have mentioned, I haven't dabbled with in quite some time.
Though I do agree some more thorough walkthroughs for all the types of combinations in the JS ecosystem are highly needed. I spent a lot of time confused on the topics and not knowing where to turn.
I'll think on it, ty for the suggestions.
Your videos are that bridge that transforms a person from an average developer to a 10X Developer, Thank you so much man ❤️
That is quite the compliment, thank you.
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!
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.
I just hit gold. Thank you so much
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.
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!
Fantastic. Glad to be of help.
I'm watching this whenever I need webpack it's so explanatory. Thank you so much!!
Awesome, thank you for saying so.
Amazing knowledge, well explained. The transition to react is too smooth.
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!
Fantastic. I'm happy to hear it was easy to follow.
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.
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.
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.
Never used webpack to build my projects so it looks a bit complicated for me. Thanks for the tutorial, some things became clearer now.
@ 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. 🙏
It got me good as well, so much so that I had to make a video just for solving it.
5 mins into the video and I have subscribed him already !!
Thank you.
This is the best tutorial on the internet for webpack . Learned a lot from it!!!
Subscribed, immediately after checking out a few of chapters!
Descent quality!
More than decent. Superb!
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.
Thank you for the webpack tutor! It would be so good to add the typescript at the end =)
Thank you so much for this! I ran until a couple of “gotchas” that you mentioned and you dramatically reduced my downtime.
Nice, glad it helped.
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!
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!
I really appreciate that, thank you. The time factor is always a battle, but I plan to keep trying for awhile.
This is real nice stuff. Thanks and congrats man
Thank you.
This is awesome! Hard to find gems like this. Thanks a lot
Honestly, I really liked the way you went through the commits too often after all the sections
Good feedback, thank you.
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)
Fantastic to hear. And about publicPath, do you mean it is for appending more directories to place the CSS in?
Excellent video, thanks!! This will be my go to for set up!
Nice.
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.
thank you a lot covering this tutorial
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.
I shall ponder on it when I start back up again. Thank you.
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 RUclips I have ever put a comment 🤞
Well, then I am honored to have earned the first comment.
Thanks a lot for this video/project! I spent the weekend on this and definitely it was worth!
Very awesome to hear, thank you.
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
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.
What a time saver. Thanks for this vid.
Great video 👏👏👏
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.
You did a great job on this video very informative and well thought out!
you can use webpack merge, separate dev and prod config, but this tutorial is awesome. Thank for sharing, I learn a lot.
I've found separate configs to be a bit too complicated for most people learning Webpack. It's useful as your project grows though. If you have an implementation you think is simple I'd love to take a look, though.
@@SwashbucklingwithCode Ah, but I'm a newbie also new to webpack and on watching previous video before this one, I did understand the separate config method. Just uses the DRY principle. Anyways, I like your explanation better. Thanks
@@iamprincemuel That's good feedback, ty.
thankyou so much for this, helped me out loads.
if you're getting the error `'NODE_ENV' is not recognized as an internal or external command` on windows then use this build command `SET NODE_ENV=production`
Thank you, this was one of the things in my notes that I forgot to include when recording, for those not using Mac or Linux.
@@SwashbucklingwithCode thanks a lot you for making this video, specially on webpack
For anyone using Windows and applying this solution, be aware that most servers you would host on are going to be Linux and this command won't work. There are a few ways you can make this work, and the most standard is setting up a local ".env" file. An easier solution is to just make a separate script for running on Windows, but using the one I show in the video for building on the server (i.e. Netlify).
Netlify also has environment variables you can set if you want to go the ".env" route: docs.netlify.com/configure-builds/environment-variables/
For anyone else on windows still having problems like I was, the final 'build' script that worked for me was: "set NODE_ENV=production&& webpack"
Notice how there is no space between the words 'production' and the '&&', apparently if you set it like 'set NODE_ENV=production && webpack' it will add a trailing space to the variable, which will cause the if statement to fail.
@@PazarX Oh really? Nice find, thank you for letting us know!
Such a clear and amazing video. Didn't even realise that it was 2 hrs long. Thanks a lot Jimmy 😍😍
Thank you for the kind words. I'm happy it was useful.
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!
OMG you save my life THANK U SOOOOOOOO MUCH!!
Thanks for all the knowledge! , really like your style of teaching
Thanx man it really helped to get started with webpack and reactjs
Webpack Code splitting would be great!
I'll likely do some more advanced Webpack vids in the future, but I need a break from it for a little bit and I need to get some variety out there. Thank you for the suggestion!
You are freaking awesome dude, keep doing this man!
Really awesome work! I learned a lot of webpack knowledge from your video.
Glad to hear it.
Amazing! You just solved one of my main problems man. Thanks a lot.
Glad to help.
Just when I need it. Thank you so much
Awesome friend. I agree with others that you deserve at least 100 times more subscriptions. Thanks for the knowledge share.
I'm glad I could pass on some learnings, and even learn some new things in the making.
1:20:58 terminal vscode rm -rf not working. Windows: 'rd /s /q dist' .
Or 'rimraf dist'
Thank you so much. This video is absolutely fantastic.
Thanks for saying so, happy to help.
this is exactly what I needed rn thank you!!
My pleasure.
Great timing!
Exactly what I needed. Thanks!
Thanks for this video , it was great!
Cool.
Great tutorial about Webpack 5!
can't believe I'm learning webpack from John Wick!!!
So, so helpful!
Btw, I`m using browsersync instead of webpack-devserver, works great also on remote hosts with proxy for app testing on multiple devices. You just need the webpack plugin.
Browsersync is really great for that. I haven't used it in a bit but I used to use it a ton when I did more of that work.
Thanks dude, i like the way you explain stuff!
I'm very glad to hear it!
Excelente video, bien explicado. Gracias.
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!
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.
Haven't watched the video, although youtube recommended.
I just wanna say dude you look DOPE 😎🤟🏻
Why thank you. Unfortunately the long hair is gone now, but I'll likely grow it back next winter.
in webpack 5 we can use output.clean option and set it to true. We no longer need the clean web pack plugin
ty for sharing.
thank you for everything you do!
I really enjoyed this course! Thank you.
Awesome, tut!!!!!! Just one thing, apparently contentBase has been changed to static now.
Ah, looks like that may indeed be the case. I'll have to see if we get a deprecated warning then. Thanks for letting us know!
It saved my life. Thank you a lot
wow, I did don't know that John Wick quit killer work and become a programmer. Thanks much!
bruuu this rocks muchas Gracias !!!
You just got a subscriber. Awesome tutorial. Concise and to the point .. best luck :D
Thanks for a great tutorial and that you take time to read and respond to the comments. I noticed that when I added a background image in the css file, covered around 1:02:30, it seems to work without adding any extra rules to the webpack config. Do you know where support for this comes from?
One other person mentioned this, and after a quick look I didn't see mention of it in the docs, or recent release notes, though I could have easily missed it.
It seems like they might have set it as a default in some update. You could always try and install the version of webpack from the video to see if you get the same behavior if you are curious.
Ok, I will try that out. Thanks
Thank you for the video. Webpack configuration is a nightmare for newbies
It definitely is. It is a very powerful toolset that has greatly improved ease of use but it can still be a lot to take in.
I highly recommend giving Vite a try if it's your own or a newer project.
Watched liked, subscribed as I really learned from you..
Thank you for letting me know and the like+sub.
This video solved my build problems. Amazing presentation and explanation. Thank you! But to load pictures from a html-file, I used html-loader. Just added to rules :
{
test: /\.html$/,
use: 'html-loader'
}
Without this, the images from the tag in html-file were not parsed.
Very helpful. Thank you!
Amazing tutorial man, thank you! :)
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.