❗❗ 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: kzitem.info/news/bejne/1W-l0Yl6pISGd5g ### 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: kzitem.info/news/bejne/zYShvKKahHWmoG0
@greenhermit6288
3 жыл бұрын
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
3 жыл бұрын
@@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
3 жыл бұрын
@@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
3 жыл бұрын
@@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
3 жыл бұрын
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
@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.
@shfunky
3 жыл бұрын
+1!
@mykolao
3 жыл бұрын
Thank you, Jesus! This is exactly what I was praying for :D
@riendlyf
3 жыл бұрын
Твой коммент сделал мой день!))
@shfunky
3 жыл бұрын
Haha xD I have the same feeling right now.
@kabs29
3 жыл бұрын
🤣🤣
@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.
@anthonymarquez2542
3 жыл бұрын
The best video that actually explains the webpack config properly, without assuming people's knowledge about the subject. ♥♥♥
@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.
@jtrjkgfjrdtje
3 жыл бұрын
Do you have video with routing - multi page project with templates (EJS for example)?
@SwashbucklingwithCode
3 жыл бұрын
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.
@jtrjkgfjrdtje
3 жыл бұрын
@@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.
@johnhenryjohnhenry-tz8xm
3 жыл бұрын
@@jtrjkgfjrdtje images stored in a folder not inside JS file would nice too - just something to reconsider, to fully understand Webpack 5 configuration options.
@damiannora6173
3 жыл бұрын
I cannot config webpack with ease either. Some more advanced approach are not well documented.
@SwashbucklingwithCode
3 жыл бұрын
@@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.
@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
@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.
@markuskraft6059
3 жыл бұрын
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.
@SwashbucklingwithCode
3 жыл бұрын
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.
@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.
@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.
@brod515
3 жыл бұрын
@1:17:51 for windows users, use the npm package rimraf. instead of "rm -rf dist" use "rimraf dist"
@SatyendraSingh-zt1nh
2 жыл бұрын
It was help me thanks alot...
@brod515
2 жыл бұрын
@@SatyendraSingh-zt1nh no problem
@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!
@TwanvB
3 жыл бұрын
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.
@SwashbucklingwithCode
3 жыл бұрын
Thank you. Someone else pointed this out as well but I haven't tried it out yet.
@danet9330
2 жыл бұрын
your advice is really priceless, thank you so much!
@nikhilkhatter4689
2 жыл бұрын
@@danet9330 i tried and got a success on it as well, thank u.
@saeedm9772
Жыл бұрын
I used it to refresh my memory. That was great tut with great information. Thank you. Keep it up.
@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.
@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.
@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.
@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.
@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
2 жыл бұрын
I'm watching this whenever I need webpack it's so explanatory. Thank you so much!!
@SwashbucklingwithCode
2 жыл бұрын
Awesome, thank you for saying so.
@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.
@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.
@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.
@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?
@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.
@andregomes7232
2 жыл бұрын
This is real nice stuff. Thanks and congrats man
@SwashbucklingwithCode
2 жыл бұрын
Thank you.
@Ayman-jz6xs
3 жыл бұрын
Honestly, I really liked the way you went through the commits too often after all the sections
@SwashbucklingwithCode
3 жыл бұрын
Good feedback, thank you.
@BrewskaySA
3 жыл бұрын
You did a great job on this video very informative and well thought out!
@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.
@aryansingh2105
2 жыл бұрын
Haven't watched the video, although youtube recommended. I just wanna say dude you look DOPE 😎🤟🏻
@SwashbucklingwithCode
2 жыл бұрын
Why thank you. Unfortunately the long hair is gone now, but I'll likely grow it back next winter.
you can use webpack merge, separate dev and prod config, but this tutorial is awesome. Thank for sharing, I learn a lot.
@SwashbucklingwithCode
3 жыл бұрын
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.
@iamprincemuel
3 жыл бұрын
@@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
@SwashbucklingwithCode
3 жыл бұрын
@@iamprincemuel That's good feedback, ty.
@raymondvu2173
2 жыл бұрын
Great video 👏👏👏
@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.
@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!
@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.
@mikebhart
2 жыл бұрын
thankyou so much for this, helped me out loads.
@luckyman5983
2 жыл бұрын
wow, I did don't know that John Wick quit killer work and become a programmer. Thanks much!
@thepopstudio2354
3 жыл бұрын
You are freaking awesome dude, keep doing this man!
@TobiasLorsbach-Mainz
2 жыл бұрын
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.
@SwashbucklingwithCode
2 жыл бұрын
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.
@sanghunlee6825
3 жыл бұрын
OMG you save my life THANK U SOOOOOOOO MUCH!!
@0x7A69
3 жыл бұрын
What a time saver. Thanks for this vid.
@ranvijaysingh7967
Жыл бұрын
Thanx man it really helped to get started with webpack and reactjs
@boxfreshpidge
3 жыл бұрын
Webpack Code splitting would be great!
@SwashbucklingwithCode
3 жыл бұрын
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!
@gredev
2 жыл бұрын
Amazing! You just solved one of my main problems man. Thanks a lot.
@SwashbucklingwithCode
2 жыл бұрын
Glad to help.
@vijaykumarreddyalavala3713
3 жыл бұрын
Just when I need it. Thank you so much
@TheRealFishForReal
Жыл бұрын
Thanks for this video , it was great!
@SwashbucklingwithCode
Жыл бұрын
Cool.
@domemvs
3 жыл бұрын
Everybody who uses create-react-app should see this at least once.
@PrajwolOnta
3 жыл бұрын
Awesome, tut!!!!!! Just one thing, apparently contentBase has been changed to static now.
@SwashbucklingwithCode
3 жыл бұрын
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!
@BuildBrightCoders
3 жыл бұрын
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?
@SwashbucklingwithCode
3 жыл бұрын
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.
@BuildBrightCoders
3 жыл бұрын
Ok, I will try that out. Thanks
@gal88b
2 жыл бұрын
Thank you so much. This video is absolutely fantastic.
@SwashbucklingwithCode
2 жыл бұрын
Thanks for saying so, happy to help.
@ynorouzi
3 жыл бұрын
It saved my life. Thank you a lot
@PabloMartinezfr
3 жыл бұрын
I love this tutorial and your Channel, congrats!!!
@flnnx
Жыл бұрын
Very helpful. Thank you!
@lecodefrancais
2 жыл бұрын
Thank you, Great tutorial, the most effectif i ever seen. On webpack 5.72 it seems that we don't have to add "Assets Modules" in order to load images from css or scss files! On this version when i add a background image url on my css file or scss file, image appears on browser with no rule or test for these kind of files (png, svg, jpg, etc.) I don't found information on webpack website. Since version 5.20 we can add the option module.exports = { //... output: { clean: true, // Clean the output directory before emit. }, }; in order to clean the dist folder without
@zivtamary
3 жыл бұрын
Amazing tutorial man, thank you! :)
@ВикторКосилкин
3 жыл бұрын
thx for this video!!!! but it doesn't work for me 'npm run build-dev". changed package.json and webpack.config.js as in video. but I have this error: "SERVE" is not internal or external command, executable program, or batch file. Help please!
@SwashbucklingwithCode
3 жыл бұрын
My guess is you are on windows, and if so, the pinned comment has the answer. You have to put `set SERVE` on windows.
@Loekasjenko
3 жыл бұрын
@@SwashbucklingwithCode I had this one too (using WIndows). Earlier in the tutorial, the use of 'set' also didn't do it for me. I used it like: "build": "set NODE_ENV=production webpack" but this worked for me "build": "cross-env NODE_ENV=production webpack" so i tried it on the start script aswel and worked like a charm "start": "cross-env SERVE=true webpack serve",
@williamm200
Жыл бұрын
bruuu this rocks muchas Gracias !!!
@anastasiiapedko3858
3 жыл бұрын
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.
@omar95net
Жыл бұрын
Great and wonderful explanation, I got to know the channel recently and I follow you. Thank you for everything A note in the Browserlist section, specifically 42:15, when I update, the changes appear immediately without adding anything Is it a new update in Webpack?
@khaledsaidi7709
3 жыл бұрын
Thanks for the great guide fire! Could you make a guide on your wsl setup?
@SwashbucklingwithCode
3 жыл бұрын
I've actually been considering that. I'll bump it up in the priority list.
@khaledsaidi7709
3 жыл бұрын
Thank you! A true swordsman!
@brunocmesquita
3 жыл бұрын
@@SwashbucklingwithCode yep, I will like it too.
@mohannedzbeda598
2 жыл бұрын
Thank you Webpack Jesus
@codiaji
2 жыл бұрын
For the last chapter of react refresh, If you change babel config file the plugins line to this plugins: [['react-refresh/babel', { skipEnvCheck: true }]] The build will work: , but when you execute yarn run build-dev, you'll get the following warning: [ReactRefreshPlugin] Hot Module Replacement (HMR) is not enabled! React Refresh requires HMR to function properly.
@jamieghoorbin4526
3 жыл бұрын
Thanks Jimmy! Great tutorial.
@softtech3172
3 жыл бұрын
thank you so much i really learned a lot from your channel thanks a lot
@SwashbucklingwithCode
3 жыл бұрын
It's awesome reinforcement to hear this, so thank you for taking the time to let me know.
@jdferreira
3 жыл бұрын
At 1:05:30, I did not get any error before adding the publicPath option in the CSS loader.
@lifeisbeautifu1
8 күн бұрын
Thank you!
@myomyint2221
2 жыл бұрын
Thanks a lot.
@SwashbucklingwithCode
2 жыл бұрын
My pleasure.
@PatrickCoffey777
2 жыл бұрын
Great video! Which VSCode theme is that?
@SwashbucklingwithCode
2 жыл бұрын
Thank you. It's this one: kzitem.info/news/bejne/1qKjrqmvpqKpaX4&lc=UgyvWofgFHPYM1kno1V4AaABAg
@Gohel95
3 жыл бұрын
Thanks, man for the lessons💖💕
@Modred_
3 жыл бұрын
hello swash pls everything works for me except my html do not reload on even when HMR IS ON what can i do without having to manually reload html page every single time?
@SwashbucklingwithCode
3 жыл бұрын
There's another comment floating around on this video where I mentioned that I don't typically need to live reload my html template because it shouldn't be changing too much. I imagine some setups are different, but especially with React the majority of your content will be coming from JavaScript. However, @Pavel mentioned that adding `watchContentBase: true` to the `devServer` object worked for them. When I tested that, it didn't work out for me but it might give you a place to start if you really need that behavior.
@Modred_
3 жыл бұрын
@@SwashbucklingwithCode yes i tried that but it still didn't work my work is mainly based around html and css don't know react that much so i constantly would need my html to reload every single time so i see the progress nothing seems to be working for now and its holding me back pls i need your work around for us
@zourdy697
3 жыл бұрын
damn man every time I watch your video, I feel like watching Jesus
@paveldub2241
3 жыл бұрын
great job, dude! Thank you!
@rajashekhar433
3 жыл бұрын
Thank you
@woket4730
3 жыл бұрын
great video, you look a bit lika a young version of saruman from lotr ;p
@SwashbucklingwithCode
3 жыл бұрын
haha, haven't heard that one yet.
@alym.aleksey
2 жыл бұрын
We know that the new Asset Modules has come to replace file-loader and 2 other loaders. For three days I tried to understand if Asset Modules is not able to put images and fonts in the necessary folders as the file loader did. I have not been able to find a solution. I would like the fonts and images to have conversion logic like this Images src/img/banners/img.jpg -> build/img/banners/ src/img/icons/user.svg -> build/img/icons/ Fonts src/fonts/Roboto/Roboto-regular.woff2 -> build/fonts/Roboto/Roboto-Regular.woff2 src/fonts/AnotherFont/AnotherFont-regular.woff2 -> build/fonts/AnotherFont/AnotherFont-Regular.woff2 We can specify only one folder for fonts and another for images, the structuredness of these images and fonts is lost. Sorry for my English, this is not my native language
@SwashbucklingwithCode
2 жыл бұрын
Curious if you ever figured this out. It's a good question, and I can see situations where you would care about the output structure as well. Unfortunately I don't have an answer readily available for you, as I typically have my images hosted on a CDN for larger projects that would require custom subdirectory structure.
@linkchen9047
3 жыл бұрын
1:04:22 I am not if this woks for your situation, but maybe you can try to add "assetModuleFilename" to "output" first. I didn't get error here. FYI: webpack.js.org/guides/asset-modules/#custom-output-filename
@SwashbucklingwithCode
3 жыл бұрын
Hmm interesting. The error seemed explicit about not supporting automatic publicPath, but if that works without it that's cool. Thank you for sharing that.
@southfrance_ahhao
Жыл бұрын
After i ran "npm run build-dev" i got a message " [ReactRefreshPlugin] Hot Module Replacement (HMR) is not enabled! React Refresh requires HMR to function properly." from terminal, but the React Refresh is still working.
@АндрейМаксименя
Жыл бұрын
Sorry but I don't get 29:40, if you add what? Are you talking about hot: true? Is that what happened there? And isn't hot a default now? I thought you don't have to write it out.
@Yue-lai-yue-ku
2 жыл бұрын
This is an awesome tutorial! everything is working great! one thing I found is when I run 'build' and push it to the server, it shows an error: 'Uncaught ReferenceError: $RefreshReg$ is not defined'. there is no issue when I review under 'start' mode. and if exclude react it will be fine. I guess something may relate to the react-refresh/babel. Have you heard about this?
@SwashbucklingwithCode
2 жыл бұрын
I have not seen that. Are you running the build on the server or just sending files? If you aren't using Netlify, or a service like it, I would try that since it's a very easy setup and common workflow for this type of project.
@southfrance_ahhao
Жыл бұрын
@@SwashbucklingwithCode I got this error too!
@gshan994
2 жыл бұрын
I have been using CRA fr react projects and want to know when to use this s etup as compared to CRA
@SwashbucklingwithCode
2 жыл бұрын
It essentially comes down to how much customization you need. You can get pretty far with CRA but it's easy to do a custom Webpack setup when you are doing a lot of things with it. You can stick to CRA until you really need a new loader or plugin that isn't easily addable with it.
@gshan994
2 жыл бұрын
@@SwashbucklingwithCode thanks for the explanation.
@who.is.jaytee
3 жыл бұрын
At 17:58 you ran "npm start" which ran the "webpack serve" script. How were you able to run this without the "run" keyword ("npm run start")? Does this work for other scripts keys?
@SwashbucklingwithCode
3 жыл бұрын
`npm start` and `npm test` are the only two I can think of that can be run without the `run` command. Their might be others but I don't use them.
@Panchito007able
3 жыл бұрын
Thanks! Great tutorial.
@TungTo-xp8rv
5 ай бұрын
thanks a ton bro.
@L0r3nz078
3 жыл бұрын
You remind me Ultima Online with this code :)
@SwashbucklingwithCode
3 жыл бұрын
haha, if you are referring to the recipes, it's actually Skyrim (which likely drew some influences from Ultima Online as many did, or it could be even further back)
Video is awesome, very well explained and so clear. I have just one question considering many plugins, package.lock.json become like way to big after installing all these plugins. Is there any way to reduce size of it? I don't think 25+ thousands of lines are good thing to do
@SwashbucklingwithCode
2 жыл бұрын
package-lock.json is something you really shouldn't worry about in general. You shouldn't ever edit it, or delete it, for example, as it is what npm is using to know what packages are installed. I wouldn't worry about the length at all, it's just a text file.
@marzukzarir
2 жыл бұрын
I have fix my errors. thanks
@MarkLanderyou
2 жыл бұрын
How can you clean up the dist folder by having CSS in a CSS folder and js in a js folder or is that not possible?
@jackhobbs91
3 жыл бұрын
Thanks Jimmy! Could you point me in the direction of getting HMR to work on changes on index.html? SCSS is reloading fine but changes to the HTML template give me the error of "Nothing hot updated."
@SwashbucklingwithCode
3 жыл бұрын
I'm typically not in a scenario where my HTML is changing often enough that I need hot reloading, so I couldn't say. I'd probably start by trying out this plugin: www.npmjs.com/package/html-webpack-hot-plugin
@pavel7650
3 жыл бұрын
@@SwashbucklingwithCode html-webpack-hot-plugin is not working for webpack 5 :(
@SwashbucklingwithCode
3 жыл бұрын
@@pavel7650 I've never needed my html to hot reload, because I'm rarely updating and when I do reloading is just fine.
@pavel7650
3 жыл бұрын
@@SwashbucklingwithCode I've already solved this problem. "watchContentBase: true" option for devServer works just fine!
@SwashbucklingwithCode
3 жыл бұрын
@@pavel7650 Awesome! Thanks for letting us know, I appreciate that.
@dexterdragons
2 жыл бұрын
hey, how to with babel-pofilly and stage-0?
@deeps9970
2 жыл бұрын
great video
@pavel7650
3 жыл бұрын
I have a problem with this setup. From image folder there's only one image been bundled. How to fix that?
@cagatayucer
2 жыл бұрын
I guess it must be; "if (process.env.SERVE | (process.env.NODE_ENV !== "production"))" instead of current condition in webpack.config. You can not execute "build-dev" because of ReactRefreshWebpackPlugin
@mirlanurzhanov
3 жыл бұрын
Great tutorial!!!
@SwashbucklingwithCode
3 жыл бұрын
Thank you.
@jamesmanalang7102
3 жыл бұрын
thank you for this! anyway, what font do you use?
@SwashbucklingwithCode
3 жыл бұрын
I switch it up, but this was Cartograph Mono.
@EmilYOo0
3 жыл бұрын
Amazing guide. one question though. Postcss dosent prefix "display grid". it said in the docs you need to add 'autoprefixer({ grid: true })' but i dont know where. can someone help me?
Пікірлер: 493