How to get polyfills with Babel 7 and Webpack

[@davidfromnorth7836]

I'm just going through all "Webpack 5" series, the quality of content is outstanding,,,

[@SwashbucklingwithCode]

Lovely to hear, ty.

[@ksorv]

Just wanted to let you know that what you've started is great. Please keep making these videos. I can see you getting the attention soo. ❤️

[@SwashbucklingwithCode]

I really appreciate that, and I shall keep doing my best.

[@9gager87]

I was about to buy a webpack course on Udemy but then I came across your channel and never looked back. Your videos are really awesome. Don't ever stop making them!

[@SwashbucklingwithCode]

Thank you, that's cool to hear.

[@alberuniazad4412]

Great explanation! This is what I was looking for all day!

[@johnthirlaway67]

Massive thank you, I had a CoreJS gotcha and couldn't work it out till I found your tutorial!

[@SwashbucklingwithCode]

Awesome!

[@dechobarca]

I don't comment often on videos, but honestly thank you so much for this and the previous 40 min video of the series. Started learning Babel a day or two ago, only to find out that I also need Webpack. But their documentation is not user-friendly or beginner friendly at all, like they tell you "do this, but also there are 3 separate ways to do this, and by the way while doing A, keeping in mind that it might require B for it to work properly, also here are a bunch of other tools we use that you also need to learn about". So it got overwhelming pretty fast. I think you've done an excellent job here explaining how to set this up properly while also covering many of the potential caveats and stuff, but MOST importantly what is actually going on behind the scenes which is really important, otherwise we're just hacking/cheating our way through. So cheers once again, you have no idea how much time and frustration this saved me.

[@SwashbucklingwithCode]

Thank you for taking the time to write this. I went through the same struggles awhile ago, and just carried on copy pasting things until they worked. At some point I decided I wanted to spend some time and try to understand what was going on so it wasn't all so mysterious. Well, it still is, but I figured I should try making the video I would have wanted back then.

[@dechobarca]

Copying and pasting configs from the docs until they all failed for one reason or another was pretty much where I got stuck as well, having really hard time to comprehend what exactly is going on. And I've read a couple of other tutorial articles online, but they either didn't go in such depth to explain how or why something is happening, or were outdated or related to React and so on, which only made things more complex for my case. Well now after watching this I rebuild my configs from scratch (they are almost the same as your github repo) and even learned how to use SourceMapDevToolPlugin, which would have been an absolute mind-f**ck before watching your video. So thanks once again, you did a pretty nice job at making the video you would have wanted, it happens that it worked great for me as well. Best of luck to your channel (which I will be keeping an eye on) :)

[@nishant.c]

Stumbled upon this channel while searching for webpack bundle optimisation tips, and I am highly impressed with the quality of content in this channel. It's certainly more than just "Yet another tutorial channel", You are doing a great job here, really appreciate your effort and time, looking forward to more from your channel.

[@SwashbucklingwithCode]

A lovely thing to hear on a Friday morning, thank you.

[@dynerushd7517]

These webpack series really helped me out, Thanks!

[@SwashbucklingwithCode]

My pleasure, thanks for saying so!

[@normamendonca]

Awesome! Really appreciate the areas you've focused on.

[@SwashbucklingwithCode]

Cool to hear, ty.

[@miladkarimi8112]

the quality of content is really excellent!👍

[@SwashbucklingwithCode]

Thank you.

[@smaragd_]

Very nice video and well covered topic with key issues occurring out of it. Thank you!

[@spondzi911]

Hey! Just wanted to tell you that I love your intro. Such a great climate.

[@SwashbucklingwithCode]

Thank you. I put a lot of effort into it so that means a lot to me.

[@cryptobrarry]

Thans for video. How do you think is it any sense to compile two main.js files? with polyfils and with polyfils? Second would be pretty small. And we can check on server side by user-agent the browesr and connect different main.js in the src attribute?

[@adconde1]

Just wanted to say thank you for sharing this knowledge. It is very good content, keep it up.

[@SwashbucklingwithCode]

You are welcome, and thank you the feedback.

[@WarriorPega]

This is incredibly thorough! Really appreciate all the insight you provided. I'm very new to bundlers, webpack, babel - the whole lot of them. This cleared up a lot of what was confusing to me about setting up specific targets and taking advantage of newer features!

[@SwashbucklingwithCode]

Awesome! Yah, it's a wild world to get into at first. I put off learning it for the longest time and I wish I had not. Thus the motivations for this series to teach others.

[@santhoshraghavpidathala3701]

Indepth tutorial, very very nice 👌. Please continue series on webpack with postcss, purifycss, corejs etc

[@thangha8289]

Hey dude, that is the exact thing I have to deal with. Thank you so much, really clear!

[@SwashbucklingwithCode]

Awesome, thank you for letting me know.

[@zoachim]

25:10 agree on the less anxiety :D funny. great vid, looking forward to the React stuff.

[@zoachim]

5:10 IE and their "document mode" has been a huge pain in my #. I was hoping to find some answers here :D my latest app at my job shifts document mode to IE10, while everyone else's to IE11. In your case though it's probably because of some missing html meta tags, try . IE=Edge means "The highest supported document mode of the browser"

[@SwashbucklingwithCode]

Oh, interesting. My work finally moved to just supporting Edge, now that it's all chromium, after we showed user percentages a bunch of times. So I, fortunately, don't have to deal with it much these days.

[@evalarumbe]

Thanks for the clear demo and explanations! This vid helps the docs make more sense, adding some useful background and detail

[@SwashbucklingwithCode]

Fantastic. Thank you for letting me know.

[@gimba9052]

your videos are exceptional, they are easy to understand even for beginners. keep up the good work❤❤

[@SwashbucklingwithCode]

Thank you.

[@yurirech9301]

I love you man, you saved my day!!! Thanks a lot!

[@SwashbucklingwithCode]

Awesome.

[@jsherborne92]

Fantastic content, very helpful.

[@SwashbucklingwithCode]

Glad to hear it.

[@shreshthmohan]

Thanks for making this video. Finding these things in the documentation isn't that easy.

[@augustom.gouveia9392]

Very insightful, thanks a lot!

[@SwashbucklingwithCode]

Awesome.

[@lukmankodir5838]

Thank you so much Mr.!

[@ivan89pln]

Great video, especially for the IE Emulation tab gotcha.

[@SwashbucklingwithCode]

Thank you for the feedback, glad it was useful.

[@ivan89pln]

@@SwashbucklingwithCode It really was, thanks!

[@ss.rajkgupta]

I was looking for just one minor solution and I already knew a lot of things in webpack 5 but then I ended up watching the whole playlist. I don't know why; probably the knowledge in your tutorials. Are you a Coding-Wizard from Gryffindor?😊

[@britti73]

This was really excellent! Thank you so much for sharing! ❤️

[@rinotovar327]

Very sweet content, thank you.

[@SwashbucklingwithCode]

noice.

[@KustomJulius]

Great video, helped me out a ton!

[@vivekranjan437]

Thank you for this explanation

[@kevinmorte3959]

Thanks. Greate video. As usual.

[@SwashbucklingwithCode]

Good to hear, ty.

[@Amir-zi1hj]

I need more of these videos 🤩

[@SwashbucklingwithCode]

haha, nice. have you already checked out the Webpack playlist?

[@Amir-zi1hj]

@@SwashbucklingwithCode Yeah I added some of them to my watch list, I like the ones that are explaining specific things, like this one and visualization ...

[@SwashbucklingwithCode]

@@Amir-zi1hj I see. They seem to be a little less popular but they are valuable things to know (at least I wish I knew them earlier).

[@vikram87in]

Thanks a lot. Great video again. 😍 Just one thing. Isn't the --save option the default while installing any package. Can't we just do 'npm install xyz'?

[@SwashbucklingwithCode]

Thank you. Good question, yes it is the default option now but that's a relatively recent change and many people don't update their Node or NPM very often.

[@vikram87in]

@@SwashbucklingwithCode thanks 😊

[@musedoom]

Thanks for the video. I had some troubles transpiling the code but that was because I named incorrectly the file .babelrc with babelrc (without the point)...silly me. I saw my mistake the next day and everything was perfect :D

[@SwashbucklingwithCode]

Easy mistake to make. There are so many things to keep in mind when covering a project setup, thanks for the reminder on that one.

[@gno3939]

4:26 - reason why you had to create .browserlistrc and add defaults query for webpack and not babel is because: entry property defaults to 'web' and when no browserslsit is configured it goes back 2 versions (doesn't resort to browsers list defaults).. when entry is 'node' it does the same. but when browserslist is configured webpack will look in there so it'll turn you bootstrap arrow func -> func declaration

[@SwashbucklingwithCode]

Interesting, thanks for the insight.

[@zoachim]

21:10 do you know if Create-React-App does this all of this for us? Would be interesting to understand what's going on under the hood

[@SwashbucklingwithCode]

Good question, I don't believe they put polyfills in automatically. But how I'd test it is just look at the final output before and after a method (e.g. object.values) similar to how I did in this video.

[@dmtoptech]

Thanks for great video. I get error when i use same project as yours with sass loader and post css specially when i use includes method in my JavaScript code can please suggest a solution cause i tried a lot of things but no one work the exact error appear in es.array.includes.js and this affect mini-css-extract-loader ans sass loader to not compile

[@SwashbucklingwithCode]

Strange, I don't have that issue at all, and I've double checked by adding all the css loaders and plugins to this branch just in case. This is happening while using `"useBuiltIns": "usage", "corejs": "3.8"` in your babel file like in this videos example?

[@dmtoptech]

@@SwashbucklingwithCode thanks i get your code from github and I get same error but after adding exclude node_modules in css/sass/scss loader in webpack config the problem solved and i realize that sass file which cause the error. Thank you for your videos i hope you make more cause you give details that we need as beginners

[@JoeBoo532]

Thank you for such a useful video! :D I have a question if you don't mind asking. What about spreads operator or optional chaining? how can we turn those on?

[@SwashbucklingwithCode]

Spread operators are part of the default syntax that has been included for awhile through `@babel/preset-env`. Optional chaining is new, but recently added to the latest version of ES, so it is also automatically included as far as I've seen. I don't use anything for my projects that is in earlier stages of proposal, but Babel has docs covering how to use "proposed" syntax now that they've deprecated the "stage-0" type plugins.

[@none0n]

My main.js is weirdly 39.5 KiB. Is there a reason why?

[@lcoronelp]

Cool functionality to avoid dead weight in the main.js. But i think, normally the polyfills will be for IE11 (not all but the worst), webpack can put the polyfills in another file and load only if is IE11? (to avoid the weight in the most of browsers that didn't need that polyfills)

[@SwashbucklingwithCode]

A good portion will but it totally depends on what ES version you are using, and sometimes browsers lag behind for various reasons as well. It's a great idea to serve only to IE, but the problem that arises is that you need a server to make that decision, and that also adds time. There are frameworks that do it but there are tradeoffs.

[@lcoronelp]

​@@SwashbucklingwithCode Could we use JS check to include the file (as the old times)? Something like: window.MSInputMethodContext && document.documentMode && document.write(''); Seeing those polyfills as a LOT of dead weight, i think maybe it would be worth. Thanks for share your knowledge and experience! :)

[@SwashbucklingwithCode]

@@lcoronelp Ah ok, so a script that will fetch and load depending on browser after document is downloaded. It may definitely be worth it, though it would need to fetch and run as it parses that script if I'm understanding it correctly. That could totally be fine, just depends on "when" the code needs to run. Thanks for sharing.

[@usmankiyani5209]

Thank you John Wick coding dude 👏🏻

[@SwashbucklingwithCode]

You are welcome. I will take this as a compliment.

[@zivtamary]

Instead of creating.browserlistrc you can add "browserslist" to package.json and it will work the same! :)

[@SwashbucklingwithCode]

You can, but I always prefer to have config files to keep package.json succinct and make it obvious with a glance at the files what types of packages are set up in the project.

[@grantmoss4937]

super useful vid. thanks

[@alibidjandy6313]

hi thank you for your video but I need to say you forgot to point in fetch because it doesn't work with core-js

[@SwashbucklingwithCode]

Not sure what you mean. You mean importing `node-fetch`? If so, I don't really see that as a polyfill concern, that's just a browser functionality that doesn't exist with node, but perhaps I'm misunderstanding you.

[@GauravKumar-ue7nz]

You are soooooooooo Good.

[@maksymdudyk1718]

Thanks a lot!!

[@SwashbucklingwithCode]

You are quite welcome.

[@lifeisbeautifu1]

Thank you!

[@Iammrunkown]

Your subscriber from India

[@SwashbucklingwithCode]

Thank you, and welcome!

[@babyloniane]

Hellooo, that's SO helpful, i spent a week to figure out how to make my shit work on ie11 lol. Huge time saving. btw do you know why template.content.cloneNode(true) dont work in ie11? what plugin are necessary to make it work ._.

[@SwashbucklingwithCode]

I have not worked with html content template's yet, sorry. That does seem like a tricky one if it isn't directly importable from 'core-js'. You might need to find another polyfill source.

[@babyloniane]

@@SwashbucklingwithCode I solved it by importing another polyfill. But thanks anyway, it's a nightmare to set up xD

[@SwashbucklingwithCode]

@@babyloniane Glad you got it figured out. It can be quite exhausting to configure.

[@mohamedyoussef8835]

Awesome Video ++++++++++++++

[@undercontr]

THANK YOU JESUS!