One of my favorite things about Webpack is creating aliases so I can import something like "shared/..." instead "../../shared/...". Webpack is powerful, and there's so much you can add to your configurations to make life easier. I don't regret staying up all night reading the documentation.
Yesterday I used live-server and webpack-watch together using concurrently. I did this because webpack dev server didn’t work on my phone for some reason nor did it automatically reload the webpage when a CSS file was changed. Feels good to figure little things out like this when you’re a beginner.
Thanks for this vid. Im a slow learner but I took months studying webpack and gulp to create a starter kit that can work with express, adonis, ejs, handlebars, react etc. Essentially ready for any node project give or take adding or removing a few packages and changing a few lines. I did not like being constrained by create-react-app. It was fun and I feel more comfortable in terms of creating production ready code
Unfortunately I did not get an answer to the original question: why do I need to use webpack? What is my incentive to add more complications to my backend setup and more points that could fail? To me npm problems are the worst backend problems because of the cryptic error messages and the fact that different versions do not work well together you always need npm, webpack and node to be in a just right version. Is it worth it?
What are the green and the orange logo in your task bar with the letter C in them? I have a feeling that the orange one is some sort of screen recorder but I know it's not any of the ones I'm familiar with.
Webpack is good for a stable site with few changes to the javascript and css. If not, then it tortures your users on slow connections as every little change to any of your packed files. Because, it creates relatively large files that always have different names, so the users' caches are completely useless. Further, if you're pulling standard libraries - the CDN repositories are bypassed and clumped together - thereby obviating the users' caches again. Fonts from google? nah, put a local copy, screw the cache. I had LOTS of problems with Webpack and a multi-sub-domain application. Sure, if you want, you can stipulate what to include and what not, but, especially in node, it's just another layer with yet another syntax.
@@realchrishawkes Are you saying that create-react-app is too opinionated? Should I attempt to convert my preexisting app into using a custom webpack config?
I use Webpack for bundling and cache busting and Gulp for everything else. I will probably transition to Webpack and VS Code extensions, like Tanzim Ibthesam suggests, unless a bundling and cache busting extension comes out. I currently have the Live Server and SASS VS Code extensions installed. Some people just use Webpack and NPM scripts.
I would love to see a RNG bot pick a project theme, a programming language/framework combo and a 45 minute challenge for Chris to build it. Something like: Link shortener - DENO/Svelte Or Mortgage Calculator - Blazor/.NET But first, we need the RNG app with Python/Django and projects scraped with beautiful soup.
Screw that. I'll never get into all of this modern js bullshit. I tried it, I actually began my programming journey with it, but it's all bullshit. My websites are all simple html, js and css files that the browsers can read and understand. I will not use a compiler, I will not use a package manager, I will not use a task automator or whatever other bullshit solution looking for a problem. I will use simple libraries that I need as long as they provide a nice .min.js file that I can simply embed and a nice documentation. Keeping my code sane, clean and simple from all the insanity you guys are doing out there.
One of my favorite things about Webpack is creating aliases so I can import something like "shared/..." instead "../../shared/...". Webpack is powerful, and there's so much you can add to your configurations to make life easier. I don't regret staying up all night reading the documentation.
That is nice. The import paths in node can be really ugly. Ive seen ../../../ stretch for miles it seems like.
I legitimately never knew that was part of webpack. That is so extremely helpful to know
Webpack + TypeScript = Gold!
Yesterday I used live-server and webpack-watch together using concurrently. I did this because webpack dev server didn’t work on my phone for some reason nor did it automatically reload the webpage when a CSS file was changed. Feels good to figure little things out like this when you’re a beginner.
In the next video: Why you need to breath
*breathe lol. We do need that though. You may be onto something? 🤔
Thanks for this vid. Im a slow learner but I took months studying webpack and gulp to create a starter kit that can work with express, adonis, ejs, handlebars, react etc. Essentially ready for any node project give or take adding or removing a few packages and changing a few lines. I did not like being constrained by create-react-app. It was fun and I feel more comfortable in terms of creating production ready code
Congrats! I think that's a much better route than create-react-app
If I have an app already running on create-react-app, how difficult would it be to convert it into a custom webpack setup?
You can use npm run eject in create-react-app
Unfortunately I did not get an answer to the original question: why do I need to use webpack? What is my incentive to add more complications to my backend setup and more points that could fail? To me npm problems are the worst backend problems because of the cryptic error messages and the fact that different versions do not work well together you always need npm, webpack and node to be in a just right version. Is it worth it?
next up videos: => why you should not use webpack => do we still need webpack in 2021 -
What are the green and the orange logo in your task bar with the letter C in them? I have a feeling that the orange one is some sort of screen recorder but I know it's not any of the ones I'm familiar with.
Camtasia
Webpack is good for a stable site with few changes to the javascript and css. If not, then it tortures your users on slow connections as every little change to any of your packed files. Because, it creates relatively large files that always have different names, so the users' caches are completely useless. Further, if you're pulling standard libraries - the CDN repositories are bypassed and clumped together - thereby obviating the users' caches again. Fonts from google? nah, put a local copy, screw the cache. I had LOTS of problems with Webpack and a multi-sub-domain application. Sure, if you want, you can stipulate what to include and what not, but, especially in node, it's just another layer with yet another syntax.
How difficult is it to convert a create-react-app based app into using a custom webpack setup?
They have tons of configuration as I've shown. Its too much opinion in my book.
@@realchrishawkes Are you saying that create-react-app is too opinionated? Should I attempt to convert my preexisting app into using a custom webpack config?
I think create react app wraps around web pack. Pretty sure it uses it under the hood.
if you understand webpack and babel, it’s straight fwd. not that difficult to find tutorials on accomplishing this btw.
@@mishasawangwan6652 cool. Thank you.
I use Webpack for bundling and cache busting and Gulp for everything else. I will probably transition to Webpack and VS Code extensions, like Tanzim Ibthesam
suggests, unless a bundling and cache busting extension comes out. I currently have the Live Server and SASS VS Code extensions installed. Some people just use Webpack and NPM scripts.
VS code does a lot of things now minifying css,converting scss to css,hot reload but still it has a lot of used cases
Nice. With extensions?
@@realchrishawkes Yup lots of extensions
Webpack is crazy
It is
Good video Chris, keep up the good work.
Thanks, will do!
Great video!!!!!! Thank you so much!!
No problem. Codehawke.com has my latest stuff
Why not parcel?
How to host on a domain server?
Skip the basics... Show some unique Tips and Tricks... Great idea for your next video
True
Yeah, showing things not obvious in the docs is usually very interesting
I would love to see a RNG bot pick a project theme, a programming language/framework combo and a 45 minute challenge for Chris to build it. Something like:
Link shortener - DENO/Svelte
Or
Mortgage Calculator - Blazor/.NET
But first, we need the RNG app with Python/Django and projects scraped with beautiful soup.
Why not gulp
Nobody uses it anymore. Webpack killed it.
@@realchrishawkes I like how the web dev community goes by popularity. It's more pop culture and less engineering.
Basically tar
What do you mean?
@@realchrishawkes Just that it seems like tar for the web, at first glance. Minus the dependency handling - I guess that makes it more like rar
Screw that. I'll never get into all of this modern js bullshit. I tried it, I actually began my programming journey with it, but it's all bullshit. My websites are all simple html, js and css files that the browsers can read and understand. I will not use a compiler, I will not use a package manager, I will not use a task automator or whatever other bullshit solution looking for a problem.
I will use simple libraries that I need as long as they provide a nice .min.js file that I can simply embed and a nice documentation.
Keeping my code sane, clean and simple from all the insanity you guys are doing out there.
No.
3:30 npx is also used for calling cli node dependencies from your terminal
Thank you for clearing that up
@@realchrishawkes great content man, especially like all the discussion about the industry itself and what not