Webpack 5 and Typescript Project Setup Walkthrough

[@k4qdex]

jesus teaching us typescript. what a time to be alive

[@lyubenhorozov3293]

Please, please, please never stop making content! Thank you!

[@SwashbucklingwithCode]

Happy to help. I've been super busy with a work project but I plan on starting back up with more consistent videos next month.

[@lyubenhorozov3293]

@@SwashbucklingwithCode Think about some subscription based content (like givemeacoffee, patreon etc). I'm fine giving you some dollars every month to learn consistently from you.

[@SwashbucklingwithCode]

@@lyubenhorozov3293 Thank you, I shall consider it.

[@matejbeber8892]

there is only one kind of approach: "just do it, and see if it produces an error" , its so true ... great video

[@peterhirt991]

Excellent way to explain how to do things step by step!!!

[@gerompauel]

This is an extremely useful video! Tons of gratitude to the author!

[@SwashbucklingwithCode]

Thank you, I'm glad I could help.

[@ChaiPark]

This is the best video so far to learn about the Webpack setup for TypeScript! Thank you so much!

[@gayunlee8862]

This is the best video about webpack and typescript setting. I've been looking for this! Thanks a lot :)

[@SwashbucklingwithCode]

Thanks for saying so.

[@top6tamil285]

loved the way you show the errors and teach

[@SwashbucklingwithCode]

I appreciate you saying so.

[@shaunhayward]

Brilliant tutorial. I love your TDD approach

[@SwashbucklingwithCode]

Ty for the feedback.

[@RDWize]

Thanks allot for this. I knew allot of the config already from the docs, but seeing someone going through it really helps solidify the concepts.

[@AnthonyFinix]

Man your intro is soooooo cool. love it

[@SwashbucklingwithCode]

A lot of time was spent on it so I really appreciate you saying so.

[@Maxwellpaulwall]

this channel is dope. hope you keep making videos, great content!

[@SwashbucklingwithCode]

Thank you, I hope it continues to be so.

[@raymonweave7157]

Pretty well explained, simple to understand, and step by step. Like the TDD approach as well, keep up the vids!

[@niclasaiken9142]

Really enjoyed watching this, gave a great overview! Keep it up!

[@SwashbucklingwithCode]

Thank you!

[@bilich7651]

I have to say it, I just watched your video and it's a really good content, you explain really well

[@SwashbucklingwithCode]

Thank you.

[@a_m_dev]

0:58 -D is for --save-dev for npm, its --dev for yarn

[@SwashbucklingwithCode]

Correct, and -D works for both.

[@seanjones4528]

Awesome Learning!!!!! Keep up the Great Videos!

[@hyfydistro]

I'm here because the company I will work for require I learn TypeScript. I didn't think I'd have to touch it till now. I think I like it. Although, I'm trying to set it up with Eslint, Pettier and React... and it's a rope in a twist!

[@SwashbucklingwithCode]

TS is growing at a rapid pace. I'd have more videos on it now if I was more confident in the setups I've tried. I have solved the Eslint + Prettier + React many times so that's probably something I should work into a video.

[@timurakhalaya6289]

keep on what you doing man , good work

[@hollowwolf88]

Such a good video, thanks maaaaane!

[@SwashbucklingwithCode]

Glad to help, and thank you.

[@kristinarassoshenko735]

Great! Thank you! I wish you many subscribers!

[@SwashbucklingwithCode]

Thank you kindly!

[@bakaleisanich]

Thank you ☺️

[@alanthomasgramont]

Thanks for the videos. You've been a great help. BTW, Jimmy Cleveland is a great name for a bookie. If only you have a hard NY accept.

[@SwashbucklingwithCode]

I'm glad to hear it. And I usually hear it's a "rock star" or "mafia" name.

[@lifeisbeautifu1]

Thank you

[@sukhsingh7057]

Love your videos.. do you recommend using the Babel typescript loader?

[@SwashbucklingwithCode]

I don't know enough to have an opinion on it, I've only used it once as an alternative to this setup. It seems like the way the TS team might want to move forward, but it does seem to work a bit differently when it comes to compiling.

[@ajdinzutic]

Thank you so much for that! Can you please create a webpack 5 series and what kind of unit tests do you use?

[@SwashbucklingwithCode]

I imagine you've discovered this by now but I do indeed have a webpack 5 playlist, and some videos on testing. The ones I don't have videos on, but use, are Cypress and Testing Library.

[@ajdinzutic]

@@SwashbucklingwithCode wow thanks a lot! just what i needed. Thank you so much for your time and effort. Do you also got documentation solution like UML / flowchart in VS Code itself? And what are your vs code plugins?

[@SwashbucklingwithCode]

@@ajdinzutic I don't do any flowcharting in VSCode but have seen a couple cool plugins some time back. I switch my VSCode plugins all the time, I don't really have a set list. Some of the ones I always use are: prettier, gitlens, quokka, and my theme, everset.

[@omarciano42]

If I add babel-loader to the loaders of TS and JS files, is it gonna work?

[@kevinmorte3959]

nice video!

[@ray3369]

Awesome video man. Thanks.

[@NesSumSimpson]

Why no mention of Babel or does TypeScript loader do this for you?

[@SwashbucklingwithCode]

Short answer is yes. But it does get a little more nuanced than that when you want cutting edge features.

[@NesSumSimpson]

@@SwashbucklingwithCode Understood, keeping it simple here, no need for the cutting edge features just yet, lol. Thanks!

[@tomaszcomasz2083]

Hi, when I comment scss code with //, I'm getting error unknow word //. Do you know why?

[@SwashbucklingwithCode]

There is a pinned comment, as well as other comments, about this in the css Webpack video. Can't be sure it's the same problem but that's one solution: kzbin.info/www/bejne/iXmZipKDht95jNk

[@lunamoonfang8169]

Hi i have followed your steps, but for some reason i cannot call my functions in html, is there an additional set up for this? Does anyone have this issue

[@SwashbucklingwithCode]

You typically wouldn't in this type of setup, unless you want to bundle it more universally. You would run all your functions from the main entry point, and the subsequent files that are imported.

[@lunamoonfang8169]

@@SwashbucklingwithCode hi thank you so much for the reply, can you explain this to me " run all your functions from the main entry point" in a beginner way, right now my work around is exposing my function using the window object, but im not sure if it is a good practice.

[@SwashbucklingwithCode]

​@@lunamoonfang8169 It's a bit too difficult for me to do through messages, as there is a lot to unpack here. I would not consider using window as a good practice, to be brief. In most situations, the script being loaded into the html is the only time you would reference javascript in your html. You'll want to look into modern JavaScript workflows before getting too in depth into Webpack. Frameworks are one way (React, Vue, Svelte) but there are plenty of others. The main entry point is typically your `index.ts`, and that basically kicks off your scripts. That's the best I can do here, and just my 2 cents on the whole situation. GL.

[@lunamoonfang8169]

@@SwashbucklingwithCode would you be kind enough to point me to an article/blog post on how to achieve this, I badly needed it. Currently I'm finding way to achieve this, but im not sure which is which.

[@SwashbucklingwithCode]

@@lunamoonfang8169 The best thing you can do is look at other projects on github, or perhaps setups in blog posts. This all seems very cart before the horse to me. Start by asking yourself what you need, and why you need it, and start piecing things together from there. It's the best path for learning development, imo, and everything else just leaves me confused when I try to rush it.

[@hyfydistro]

I was reading on the Webpack documentation that build performance may degrade in with TypeScript (i.e. as you have more scripts, it will be slower to compile). Then there's a workaround suggested at their site about adding an option `transpileOnly: true`. It has something to do with typechecking and linting that slows it down. One solution they have given is to have it done in another process with `ForkTsCheckerWebpackPlugin`. 😃 And here I was worried about adding too many subsets, preprocessors and other libraries.

[@SwashbucklingwithCode]

It gets quite overwhelming. As you learn each tool, it gets easier, but I try not to overoptimize if I haven't felt the pain that a tool is solving for. It's very alluring to have the optimal, idiomatic, modern setup right from the start, but you won't really know "why" you need those things unless you feel the pain of not having them first.

[@mohamedyoussef8835]

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

[@NesSumSimpson]

I was a little confused about why and what was going on when you used "npx webpack" as we had just downloaded webpack as a development dependency( "npm i -D webpack"). Why install it and then use npx? You didn't need it globally as it was installed locally? You are right, it didn't install the cli at all...hmm.. I assume that is because our builds would not have any need for a cli tool. I would of thought this cli tool would of been downloaded, at the very least locally, considering npx squawked about it, but it did not? Why didn't it download it locally if the cli was a dependency of webpack? Oh and thanks for these videos, I fix bugs and write scripts but come from a DevOps/SysOps background. Your videos have helped me alot to understand the dev side of things, thanks again!

[@SwashbucklingwithCode]

The reason to install it and then use npx is because we hadn't set up a script to run it locally in package.json yet, which is a useful tool to know for testing things out or if you don't do something often enough to make it a script. npx will first look for a local install and then a global. I'm not clear on the remaining questions since it all seems to be packed into one question with separate focuses.

[@xVecna]

Why do we need Ts?

[@SwashbucklingwithCode]

The npm package?

[@xVecna]

@@SwashbucklingwithCode typescript in general im currently learning react :)

[@SwashbucklingwithCode]

@@xVecna Oh, you do not need it at all. It might actually be too much to learn at the same time as React. Typescript gives you more robust and maintainable code at the expense of the simplicity and flexibility of JavaScript. Choosing Typescript for a project depends on the scale and scope and how familiar you and your team are.

[@gamerclips8895]

Jared leto in a multiverse as a front-end engineer

[@omkarkulkarni3644]

Jesus teaching webpack xD

[@madara_u_chiha]

Jared Leto?

[@egorlazuka8211]

water \

[@aminsoraya]

You are extremely dominant

[@SwashbucklingwithCode]

Thanks?