What I love about this channel, is that the author does not bombard the viewers with a ton of different information thus confusing them and discourage them, since they understand so little. Instead, he takes it step by step, explaining simple things one at a time. This makes him stand out from 99% percent of "teachers" on RUclips, that just pour in all their knowledge, that they've learned through many years of experience on a novice, that just started to code. Anyway, Liked and Subscribed, and also for a couple of weeks ago bought his Wordpress course, one of the best purchases of my life, easily. THANK YOU SO MUCH.
I agree with you, in general, but with time I started to see the benefits of other approaches too. So for example - I watch videos that are more like showing-off rather than teaching lesson, because they cover a lot of info and provide little to no details. Barely scratch the surface, in a way. And then, if something gets my attention - I go to channel like this, where I gain the know-how and actually learn the stuff. Just sharing some thoughts :)
There she is. I loved her guest appearance. 😍 I pause the video, laughed for three mins when you asked her "Do you know what Webpack is?". As I took your Git a Web Developer Course, I knew much of content. A good revise though. What you are doing here, no tech RUclipsr will ever dare to do that for free. You are a Gem. Keep up the good work, Brad. Wish you a very healthy life. ❤️
😹 She's the star of the channel. Thank you so much for all the support! Wish you all the best too. One more video on JSX & Babel and then we'll be transitioning into the Servers chapter 🥳
The way you explain nearly everything worth mentioning using only simple words, the way you click and drag the mouse to create a blue square so that viewers know what are you talking about and the hints about advanced concepts e.g output file size,devServer generate files in memory for speed and hot reload; it is so so good. Thank you so much for the video.
Bro, you're simply awsome. I was ll this close to ripping my hair watching other youtuber explain webpack but you actually made it very simple to understand. GOD BLESS YOU
Very well explained; as somebody learning WebPack from RUclips I can't express how valuable it it for you to explain the reasons for the choices you're making in terms of default config, custom config, tools etc, from a wider perspective. Subscribed with pleasure!
Towel under keyboard. Love this guy! I have Brad's Wordpress course on Udemy since 2017? Still being updated from time to time! One of the most devoted lecturer met on RUclips ever! Keep it up!
Thank you so much! although the time has passed from making this video and some configurations are now different, the work you put into this video has really made me understand webpack so much better! you my friend just got a new Subscriber :)
Other webpack tutorials kinda skip why we need webpack which just explain how to setup and confgure brah brah brah. I finally understand why and benefits using webpack through this tutorial.
I loved your courses very much... you are a gem...🥰. Thank god.. I have got a job last year. please can you do an in depth course in js more in depth prototypal inheritance and functional programming courses. Also please can you share your experience while you have started as a developer before 15 years.. and what are the struggles you felt and how you tackled the problems... Thank you.... you are my life saver...🥰🥰..
Hi Brad, Thanks for this very useful video! I 'm curious to know in which video you learn how to deal with a conditional mode (development/production) in webpack config file as you said at the end.
Hi Brad! Is there any chance you can add HRM and webpack to your WordPress development course? I would like to combine WP development with your Modern Workflow course approach where we've set a hot reload functionality. I was trying to work this out but I really can't get this to work. I like how we set Node.js to automatically bundle our CSS and JS files at Wordpress Developer course, so I would like to just leverage this a bit by adding a hot reload feature. How should we approach WP theme development having HRM features? Many thanks and thank you for all you do for us!
@@Vespavandenberg I've actually gave up and used his approach from this video: ruclips.net/video/m-OFftNHNyc/видео.html&ab_channel=LearnWebCode and I was using this during my last project and all was working nice apart of a but slower response comparing to HRM from webpack. There is no response from Brad and this webpack thing is inconsistent across his other courses. Once he is using one approach and next time different one and the best and the easiest to setup is with React app because webpack and all bundling features are configured there automatically by default which is super convenient.
Impressive tutorial, everything seems clear to me, except one thing, How do we make browser refresh or update after we make a changes inside HTML or SCSS and save. For me it works for .js files, but not for HTML or SCSS. Do you know how to make this happen?
when I run npx webpack-dev-server I'm getting... Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options has an unknown property 'contentBase'. These properties are valid:
Hey I stubbled upon same error, Webpack has been updated to v4 since the release of this video and contentBase option is deleted. Instead, use static: { directory: path.resolve(....) } that should work :)
Hi brad, this is useful when we use server side rendering, am i right?? because i was thinking why in the world we need to serve node code in client side since i have only used react to make front end web apps and i never used webpack since all those stuff is done by npm run build (if i am not wrong from my understanding). please correct me if i am wrong. and can u please tell the difference between using webpack and express?
This was just for setting up a local dev environment with super fast injection of our latest code each time we save; 100% just front-end client-side. It may not have been very practical, because in the real world when you use "create-react-app" it handles all of the webpack / node preview/ dev server setup for you behind the scenes, so it's not very vital to learn how to manually configure webpack and webpack-dev-server like this.
@@LearnWebCode thank you for being such great tutor. I have never done in manual way. Every time I use "create-react-app" to setup my project. Some of my friends told me that they are using CRA for real production application in their company. So I never thought of doing it in manual way. Recently I went through ejs (node package) tutorial to make SSR application. I thought this tutorial is to make SSR apps without ejs. So many stuffs to learn now and I am bit confused. All these day i am having a wrong understanding of how all these works. Thank you so much for explaining it to me now. I am having some picture how React application and node env works.
Hi Brad, when working with webpack and Babel, we can use a forEach method wright? I'm working on a personal project with webpack, I was doing a simple functionality, add and remove a class on an active class. I used the forEach method and it doesn't work, no error message. The same code work without Webpack + Babel. Do I need to add something in my webpack.config, so that I can use JavaScript methods? I thought that, '@babel/preset-env', ' "useBuiltIns": "usage" ' and core js will allow the use of those methods.
Laravel is great, and if you're already in that space or really experienced with PHP... I always say don't worry about industry trends *too* much, you can only work so much in a week and there's definitely enough Laravel / PHP work opportunities to last several lifetimes 🙂 Having said that, if someone wasn't already established in any tech stack / framework I do recommend JavaScript because it's one language that can be used *everywhere* and is very in demand. Ultimately though, a PHP or Python back-end with superb front-end JS skills is obviously going to be in demand too! I don't think you can really go wrong, but JavaScript is nice because as your understanding of the language itself grows it benefits you both on the front-end AND back-end.
@@LearnWebCode Thank you for the reply Brad, I am not very well versed in PHP, but the Laravel framework seems more intuitive than other backend frameworks in my novice opinion? However I think I will stick with the JS. I have put too much effort in already to turn back now. I have your React, Node, & Git a Web Developer courses, and they are great. Thanks for all your efforts. You help many people. 👍
great video, very insightful! one quick issue I had, that other people may run into, was with the hot module not loading. I originally kept getting a console message saying "[HMR] Waiting for update signal from WDS" The issue was caused when I created a browserslistrc file, which essentially meant the hot module did not recognize my browser for whatever reason. This is fixed by adding "target: "web"," to the webpack config file. Hope this helps anybody who had the same issue as me
Hey, loving the videos but on this one I'm not getting the console to show anything. I have tried going through the Dev tools settings to make sure filter is off etc but nothing is being shown in the Console log.....any suggestions?
Hey , this is what I m looking for, but one this is in my mind , is there a possibility to inject the content to the browser without even hit "ctrl+s" ?
Correct me if I'm wrong. please, but don't browsers already do everything webpak does without any extra work or learning? Isn't this like compiling CSS, not adding enough benefit to be worth learning, choosing which specific details in use (like which version of which compiler) and using in 99.9% of cases?
If you're referring to modern browsers supporting native JS modules / import / export, yes that's true. But beyond that browsers don't do any of the things webpack offers. It's not *just* bundling up our imports for files we ourselves created, it's also keeping track of our dependency tree and automatically pulling in packages from node_modules for us. And as we'll see in the next video webpack can automatically run different types of files through different transpilers/processors (Babel/JSX for JS files, Sass/PostCSS for CSS files). I think compiling CSS adds lots of benefits and haven't been on a dev team in the last decade that didn't use a pre or post processor.
doesn't work keep getting errors around polyfils and each time run 'npx webpack' it doesn't update seems to keep first file cached even when i clear cach or set it to false in webpack.config etc?
hi, i watching this video and executing that npx webpack-dev-server, i got ([webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options has an unknown property 'contentBase'. These properties are valid: object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? }) what should i do now please reply ASAP.
thank you teacher . I have a question I am creating a website to watch animes. I used node js and I scrape the video urls from a website and when i finished scraping I saved the urls to a file json. So I create the front-end and on my js code I fetch the urls and put it on an tag . I start my server and on my computer it's start without any problem but when I see the web site from my mobile I see just the content without the videos or the episodes. What is the problem ??
hi at 25:43 of video npx webpack-dev-server , I got error message: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
so if you need to rerun npx webpack to see a change, should you only install and run it when you are ready to go live and not before? A manual page reload and using Live EServer doesn't update the console.
when I do npx webpack-dev-server it prompts this:We will use "npm" to install the CLI via "npm install -D webpack-cli". Do you want to install 'webpack-cli' (yes/no): and this is after I've installed it at thebeginning of the lesson. And when I enter yes it gave me this : Error: Cannot find module 'webpack-cli/package.json'. Thanks in advance
But at small to medium scale projects, why use webpack? The changed code is already being saved and updated and displayed its changing state? AM i missing something? Is it just good at minimizing code? Edit: I get it.. so mainly when we have bits of codes here and there, so it bundles it up well.
hi brother i am getting error while at command- npx webpack-dev-server can you pls help be to resolve Error: Cannot find module 'webpack-cli/bin/config-yargs'
@LearnWebCode Hi. Great content. I was having a minor issue. Hot module replacement only works when it detects changes in scss files.when I make changes in html files or JavaScript files, I need to refresh. I have made it auto refresh, but I couldn’t make it work like hot:true way of doing it
My bad. I was running a plug-in called hot module replacement plugin, and removed the if condition from the main. Now I replace it back with the hot module condition in man.js. I am still struggling to inject the same way for html files. If I use vscode live server extension then I have to run it in a different port. Lazy approach. There has to be a more dynamic way
Hey Brad. Can you please talk about security vulnerabilities with npm packages. More and more I am getting Dependabot alerts from Github warning me of high severity packages in my repos. It doesn't sound good! and makes me wonder how safe, secure and reliable Node is, especially as npm packages can have tons and tons of their own dependencies, no doubt leading to the regular warning of hazardous projects. Your thoughts?
It's a good question that I don't have a profound answer for. From what I've seen outright malicious "on purpose" code doesn't make its way into popular mainstream NPM packages very often at all, and it's usually just potential security vulnerabilities and those can be fixed with the "npm audit fix" command as they're discovered. Similarly to PHP / WordPress, if you don't keep your WP Installation up to date you can guarantee with 100% certainty that your site will be hacked. I'm not a security expert but I know a lot of huge companies with near limitless budgets use Node, and I can't imagine they'd use it if it was inherently insecure.
Hi nice tutorial, I have a question, thr are 3 files namely vendor.js,main.js,script.js. When we bundle it and minify they are genereated with hash in the end ,how can we retain the same name after minify? Thanks
Do you see "[hash]" anywhere in your webpack config? That's what's generating the hash in the filename; you can try removing it. I'd recommend keeping it though if possible, it's great for having visitor's web browsers know they should download the newest/changed version of the file. In the next lesson in this series we're going to look at something called "html-webpack-plugin" and "webpack-manifest-plugin" that help you use the unpredictable file names in your projects.
It will work perfectly either way, but yes, it's common to install it as a devDependency. However, I didn't want to introduce that topic (dep vs devDep) in this video/series yet. Once we get to server-side Node I feel like the difference between dep (e.g. express) and devDep (e.g. nodemon) is crystal clear; but when it comes to front-end tooling the difference feels super blurry. This thread on GitHub has interesting thoughts github.com/webpack/webpack/issues/520
Sir would you make a video of Hot module replacement with WordPress. I have tried with php server and it works with php sever but there is no way I was able to integrate webpack HMR with WordPress. Please please please make a video about wordpress and webpack HMR ❤️❤️❤️❤️
Hi, the updates that I made to my Udemy WordPress Dev course in 2020 have us now leveraging Hot Module Replacement in our local dev environment. I'd guess in the next week or two Udemy will run a big sale with low prices. Or if you'd like to try and set it up on your own I can point you in the right direction; really it's just a matter of setting up a conditional / if statement in your functions.php file where you enqueue your front-end JS file. If you're running on your local dev domain load the localhost:3000/bundle from the webpack dev server, otherwise/else load the "production optimized" static bundle file.
@@LearnWebCode I have done that. Condition thing but on console Im getting a msg of HMR waiting for response from WDM like this kind of message. Also the url localhost:8080 is redirecting to wordpress default url like localhost/ wordpress/
if you run to an Error running $ npx webpack-dev-server command. Do this: in package.json under "scripts" add property "start": "webpack serve" . In terminal type: npm start. You're welcome!
I want your web design course coupon brad please send to previous registered course users some coupon for your courses.. i registered in wordpress javascript course
What I love about this channel, is that the author does not bombard the viewers with a ton of different information thus confusing them and discourage them, since they understand so little. Instead, he takes it step by step, explaining simple things one at a time. This makes him stand out from 99% percent of "teachers" on RUclips, that just pour in all their knowledge, that they've learned through many years of experience on a novice, that just started to code.
Anyway, Liked and Subscribed, and also for a couple of weeks ago bought his Wordpress course, one of the best purchases of my life, easily.
THANK YOU SO MUCH.
Thanks! Your comment really explains why I make the videos the way I do!
I agree with you, in general, but with time I started to see the benefits of other approaches too. So for example - I watch videos that are more like showing-off rather than teaching lesson, because they cover a lot of info and provide little to no details. Barely scratch the surface, in a way. And then, if something gets my attention - I go to channel like this, where I gain the know-how and actually learn the stuff.
Just sharing some thoughts :)
@@peterveliki7918 well, sounds like a good strategy. I think I will try it too :)
Exactly as simple as that.
WOW this is hands down the best tutorial I've seen on webpack thank you for simplifying it and helping us understand how webpack works!!!
he has the most angelic voice in the whole web niche on RUclips by the way.
Learning from Brad always is "Aha now it makes sense " moments for me 😂 .. Brad is the only teacher that should teach programming .
You are one of my best teacher in RUclips.your explanation is amazing
Thank You for simply getting to the concepts and making it very clear. In short time I got to know from 0 to 100% on webpacks.
There she is. I loved her guest appearance. 😍 I pause the video, laughed for three mins when you asked her "Do you know what Webpack is?".
As I took your Git a Web Developer Course, I knew much of content. A good revise though. What you are doing here, no tech RUclipsr will ever dare to do that for free. You are a Gem. Keep up the good work, Brad. Wish you a very healthy life. ❤️
😹 She's the star of the channel. Thank you so much for all the support! Wish you all the best too. One more video on JSX & Babel and then we'll be transitioning into the Servers chapter 🥳
@@LearnWebCode I can definitely see that, she is a superstar. 😻😻😻 I will be waiting for you upload. 👨💻
@Shariar I also Do the same things that you do😂
I don’t like to comment but if whatever I want to learn pops up in your videos, I feel rescued. Love your style of teaching.
I like it how you explain everything separately and thoroughly
The way you explain nearly everything worth mentioning using only simple words, the way you click and drag the mouse to create a blue square so that viewers know what are you talking about and the hints about advanced concepts e.g output file size,devServer generate files in memory for speed and hot reload; it is so so good. Thank you so much for the video.
Thank you so much! This is one of the nicest comments I've ever received 🙂🥳
Bro, you're simply awsome. I was ll this close to ripping my hair watching other youtuber explain webpack but you actually made it very simple to understand. GOD BLESS YOU
Very well explained; as somebody learning WebPack from RUclips I can't express how valuable it it for you to explain the reasons for the choices you're making in terms of default config, custom config, tools etc, from a wider perspective. Subscribed with pleasure!
Brad is without any doubt one of the best web-dev teachers.
Brad, you are ever a very good teacher, very clear and concise
I love you so much, Brad. Your teaching technique, delivering approach is just awesome. You make difficult things simple. Again I love you.
Towel under keyboard. Love this guy! I have Brad's Wordpress course on Udemy since 2017? Still being updated from time to time! One of the most devoted lecturer met on RUclips ever! Keep it up!
Been watching different tutorials, this by far is all I needed
What an amazing tutorial!
Building webpack seems like an adventure with your narrative!
Thank you, that was fabulous :)
Thank you so much! although the time has passed from making this video and some configurations are now different, the work you put into this video has really made me understand webpack so much better! you my friend just got a new Subscriber :)
Other webpack tutorials kinda skip why we need webpack which just explain how to setup and confgure brah brah brah. I finally understand why and benefits using webpack through this tutorial.
Thank you Brad
You are the best
You have a way to explain things that makes them easy
I have all your Udemy courses and I’m waiting for your next one
Thank you so much! The next Udemy course is going to be about "WordPress + React" and how to create single-page-apps and plugins, etc...
Very clear explanation as usual thanks
I've learned so much from this video. Lately, webpack-dev-server has been giving me so many headaches ;D Thank you so much! :)
You're videos are very good! Thank you.
By far the best instructor!! Thanks for the content! Is there any advanced webpack course of yours or any recommended??
This video was made for me, Thanks alot.
Amazing video. I was always intimidated by webpack . You made it so easy. Thanks man👌
Man, it really helped me. Thank you so much!!!
Sir, Thanks for your Webpack Tutorial. Its one of the best Tutorial. It helps me a lot. Let me know that can we set a complete folder as Entry.
You’re a fantastic teacher!
I loved your courses very much... you are a gem...🥰. Thank god.. I have got a job last year. please can you do an in depth course in js more in depth prototypal inheritance and functional programming courses. Also please can you share your experience while you have started as a developer before 15 years.. and what are the struggles you felt and how you tackled the problems... Thank you.... you are my life saver...🥰🥰..
Thank you so much!! This is the best tutorial!
It did help me alot , appreciate the content! keep it up boy.
So beautifully explained.
Hi Brad, Thanks for this very useful video! I 'm curious to know in which video you learn how to deal with a conditional mode (development/production) in webpack config file as you said at the end.
Hi Brad! Is there any chance you can add HRM and webpack to your WordPress development course? I would like to combine WP development with your Modern Workflow course approach where we've set a hot reload functionality. I was trying to work this out but I really can't get this to work. I like how we set Node.js to automatically bundle our CSS and JS files at Wordpress Developer course, so I would like to just leverage this a bit by adding a hot reload feature. How should we approach WP theme development having HRM features? Many thanks and thank you for all you do for us!
Looking for the same thing actually, I can’t get this to work in the local Wordpress environment unfortunately
@@Vespavandenberg I've actually gave up and used his approach from this video: ruclips.net/video/m-OFftNHNyc/видео.html&ab_channel=LearnWebCode and I was using this during my last project and all was working nice apart of a but slower response comparing to HRM from webpack. There is no response from Brad and this webpack thing is inconsistent across his other courses. Once he is using one approach and next time different one and the best and the easiest to setup is with React app because webpack and all bundling features are configured there automatically by default which is super convenient.
Thank you, I'll use this with three js
Love your tutorial soooooooooo much! It helps a lot! Could u please do a tutorial of starting a vue cli project? Thank u!
Great and excellent video Brad !!! You are the best
I got a job thanks to your course in udemy on wordpress so thank you very much from Israel
That is awesome! Thanks for sharing the great news 🥳
מה קורה
@@MaxTheFireCat
טוב. מה הולך ?
Awesome as always Brad :-)
this was great, thank you
For anyone getting '- options has an unknown property 'contentBase' error, just change 'contentBase' to 'static' and it should work.
Thanks dood
I was going to write exactly the same. I think Brad shoud put that somewhere in the video description.
note: who use webpack v5 , in devServer object use static instead as contentBase is deprecated in latest Webpack v5
Hey Brad, how would this work for a WordPress theme? Or should we use WP scripts like you use it in your Wordpress course that i enjoyed very much
Great video!
Impressive tutorial, everything seems clear to me, except one thing, How do we make browser refresh or update after we make a changes inside HTML or SCSS and save. For me it works for .js files, but not for HTML or SCSS. Do you know how to make this happen?
when I run npx webpack-dev-server I'm getting... Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
- options has an unknown property 'contentBase'. These properties are valid:
Hey I stubbled upon same error, Webpack has been updated to v4 since the release of this video and contentBase option is deleted. Instead, use static: { directory: path.resolve(....) } that should work :)
@@tea42 yes, that's te way to do it
Thank you so much!!!
You sir are Goated 🐐
thanks , this is really helpful for me
localhost:8080 is not working.
Error: Cannot find module 'webpack-cli/bin/config-yargs'
Hi brad, this is useful when we use server side rendering, am i right?? because i was thinking why in the world we need to serve node code in client side since i have only used react to make front end web apps and i never used webpack since all those stuff is done by npm run build (if i am not wrong from my understanding). please correct me if i am wrong.
and can u please tell the difference between using webpack and express?
This was just for setting up a local dev environment with super fast injection of our latest code each time we save; 100% just front-end client-side. It may not have been very practical, because in the real world when you use "create-react-app" it handles all of the webpack / node preview/ dev server setup for you behind the scenes, so it's not very vital to learn how to manually configure webpack and webpack-dev-server like this.
@@LearnWebCode thank you for being such great tutor. I have never done in manual way. Every time I use "create-react-app" to setup my project. Some of my friends told me that they are using CRA for real production application in their company. So I never thought of doing it in manual way. Recently I went through ejs (node package) tutorial to make SSR application. I thought this tutorial is to make SSR apps without ejs. So many stuffs to learn now and I am bit confused. All these day i am having a wrong understanding of how all these works. Thank you so much for explaining it to me now. I am having some picture how React application and node env works.
Love you Brad!
I gave this video a thumb up before I watch it
Hi Brad, when working with webpack and Babel, we can use a forEach method wright? I'm working on a personal project with webpack, I was doing a simple functionality, add and remove a class on an active class. I used the forEach method and it doesn't work, no error message. The same code work without Webpack + Babel. Do I need to add something in my webpack.config, so that I can use JavaScript methods? I thought that, '@babel/preset-env', ' "useBuiltIns": "usage" ' and core js will allow the use of those methods.
Do you think the web is increasingly moving in the JavaScript direction Brad? Is it worth learning Laravel over Node in your opinion?
Laravel is great, and if you're already in that space or really experienced with PHP... I always say don't worry about industry trends *too* much, you can only work so much in a week and there's definitely enough Laravel / PHP work opportunities to last several lifetimes 🙂 Having said that, if someone wasn't already established in any tech stack / framework I do recommend JavaScript because it's one language that can be used *everywhere* and is very in demand. Ultimately though, a PHP or Python back-end with superb front-end JS skills is obviously going to be in demand too! I don't think you can really go wrong, but JavaScript is nice because as your understanding of the language itself grows it benefits you both on the front-end AND back-end.
@@LearnWebCode Thank you for the reply Brad, I am not very well versed in PHP, but the Laravel framework seems more intuitive than other backend frameworks in my novice opinion? However I think I will stick with the JS. I have put too much effort in already to turn back now. I have your React, Node, & Git a Web Developer courses, and they are great. Thanks for all your efforts. You help many people. 👍
hey! do I need to add if(module.hot) module.hot.accept() at the end of every file?
Muchas gracias amigo!
great video, very insightful!
one quick issue I had, that other people may run into, was with the hot module not loading.
I originally kept getting a console message saying "[HMR] Waiting for update signal from WDS"
The issue was caused when I created a browserslistrc file, which essentially meant the hot module did not recognize my browser for whatever reason.
This is fixed by adding "target: "web"," to the webpack config file.
Hope this helps anybody who had the same issue as me
Hey, loving the videos but on this one I'm not getting the console to show anything. I have tried going through the Dev tools settings to make sure filter is off etc but nothing is being shown in the Console log.....any suggestions?
Hey , this is what I m looking for, but one this is in my mind , is there a possibility to inject the content to the browser without even hit "ctrl+s" ?
Correct me if I'm wrong. please, but don't browsers already do everything webpak does without any extra work or learning? Isn't this like compiling CSS, not adding enough benefit to be worth learning, choosing which specific details in use (like which version of which compiler) and using in 99.9% of cases?
If you're referring to modern browsers supporting native JS modules / import / export, yes that's true. But beyond that browsers don't do any of the things webpack offers. It's not *just* bundling up our imports for files we ourselves created, it's also keeping track of our dependency tree and automatically pulling in packages from node_modules for us. And as we'll see in the next video webpack can automatically run different types of files through different transpilers/processors (Babel/JSX for JS files, Sass/PostCSS for CSS files). I think compiling CSS adds lots of benefits and haven't been on a dev team in the last decade that didn't use a pre or post processor.
Does it also watch .html files? (Or is it only .js files?)
Make more Webpack tutorial
doesn't work keep getting errors around polyfils and each time run 'npx webpack' it doesn't update seems to keep first file cached even when i clear cach or set it to false in webpack.config etc?
hi, i watching this video and executing that npx webpack-dev-server, i got ([webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
- options has an unknown property 'contentBase'. These properties are valid:
object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? }) what should i do now please reply ASAP.
Just change 'contentBase' to 'static'.
@@pedjastojiljkovic7717 Thanks a lot that works.
Это было круто бро!
thank you teacher .
I have a question I am creating a website to watch animes.
I used node js and I scrape the video urls from a website and when i finished scraping I saved the urls to a file json. So I create the front-end and on my js code I fetch the urls and put it on an tag . I start my server and on my computer it's start without any problem but when I see the web site from my mobile I see just the content without the videos or the episodes.
What is the problem ??
Do you need to log in to watch those animes?
@@jackwright7014 No thank you I fixed the problem.
hi at 25:43 of video npx webpack-dev-server , I got error message: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
so if you need to rerun npx webpack to see a change, should you only install and run it when you are ready to go live and not before? A manual page reload and using Live EServer doesn't update the console.
when I do npx webpack-dev-server it prompts this:We will use "npm" to install the CLI via "npm install -D webpack-cli".
Do you want to install 'webpack-cli' (yes/no): and this is after I've installed it at thebeginning of the lesson. And when I enter yes it gave me this : Error: Cannot find module 'webpack-cli/package.json'. Thanks in advance
In case anyone wants to still use webpack-dev-server, just run 'npx webpack serve' instead of 'npx webpack-dev-server'.
Hats off
But at small to medium scale projects, why use webpack? The changed code is already being saved and updated and displayed its changing state? AM i missing something? Is it just good at minimizing code?
Edit: I get it.. so mainly when we have bits of codes here and there, so it bundles it up well.
Brad, please add to the video description that according to webpack/webpack-dev-server#2958 (comment)
contentBase was renamed to static
Thanks!
Is module.hot.accept() call actually necessary? What would happen without it?
The last time I tested, the browser will actually perform a full traditional refresh instead of loading the new version of the assets on-the-fly.
contentBase has been replace by static
Thank you!
Seems to be working with webpack-cli v3 and not with webpack-cli 4. after reinstalling webpack-cli with v3 it was running.
Awesome brad,
May i know which keyboard you are using now?
It's an old Leopold model with Cherry MX Brown switches 🤓
Brad bhaiya zindabad.
But 20 mins still missing :D
Thanks, and it's true haha, I said 10 - 30 minutes in the series intro 😂
hi brother i am getting error while at command- npx webpack-dev-server
can you pls help be to resolve Error: Cannot find module 'webpack-cli/bin/config-yargs'
okay i got it @Jack Saat's comments
Thanks brad...
@LearnWebCode Hi. Great content. I was having a minor issue. Hot module replacement only works when it detects changes in scss files.when I make changes in html files or JavaScript files, I need to refresh. I have made it auto refresh, but I couldn’t make it work like hot:true way of doing it
My bad. I was running a plug-in called hot module replacement plugin, and removed the if condition from the main. Now I replace it back with the hot module condition in man.js. I am still struggling to inject the same way for html files. If I use vscode live server extension then I have to run it in a different port. Lazy approach. There has to be a more dynamic way
Thanks Man
I Love cat!!! It's a great star :D
Hey Brad. Can you please talk about security vulnerabilities with npm packages. More and more I am getting Dependabot alerts from Github warning me of high severity packages in my repos. It doesn't sound good! and makes me wonder how safe, secure and reliable Node is, especially as npm packages can have tons and tons of their own dependencies, no doubt leading to the regular warning of hazardous projects. Your thoughts?
It's a good question that I don't have a profound answer for. From what I've seen outright malicious "on purpose" code doesn't make its way into popular mainstream NPM packages very often at all, and it's usually just potential security vulnerabilities and those can be fixed with the "npm audit fix" command as they're discovered. Similarly to PHP / WordPress, if you don't keep your WP Installation up to date you can guarantee with 100% certainty that your site will be hacked. I'm not a security expert but I know a lot of huge companies with near limitless budgets use Node, and I can't imagine they'd use it if it was inherently insecure.
@@LearnWebCode Your feedback is valuable intel. and I appreciate you taking the time to reply. Thank you Brad.
so HMR does NOT show live changes in the index.html ???
Hi nice tutorial,
I have a question, thr are 3 files namely vendor.js,main.js,script.js.
When we bundle it and minify they are genereated with hash in the end ,how can we retain the same name after minify?
Thanks
Do you see "[hash]" anywhere in your webpack config? That's what's generating the hash in the filename; you can try removing it. I'd recommend keeping it though if possible, it's great for having visitor's web browsers know they should download the newest/changed version of the file. In the next lesson in this series we're going to look at something called "html-webpack-plugin" and "webpack-manifest-plugin" that help you use the unpredictable file names in your projects.
@@LearnWebCode thanks mate
In April 2022
This code will work after you change `contentBase` to `static`
this comment must be pinned
i have a job interview in one hour and i needed this thank u.
Good luck!
I just clicked on your wordpress series by accident. Is the udemy course up to date? If its please post a discount code.
Yep, the "Become a WordPress Developer" course was just updated a few months ago.
@@LearnWebCode udemy should have a buy all button. I have bought your js course, react course, now will buy the wordpress course.
Webpack should be install as dev depense, is it?
I mean npm i -DE
It will work perfectly either way, but yes, it's common to install it as a devDependency. However, I didn't want to introduce that topic (dep vs devDep) in this video/series yet. Once we get to server-side Node I feel like the difference between dep (e.g. express) and devDep (e.g. nodemon) is crystal clear; but when it comes to front-end tooling the difference feels super blurry. This thread on GitHub has interesting thoughts github.com/webpack/webpack/issues/520
hi brad . please make a video about ES7
Sir would you make a video of Hot module replacement with WordPress.
I have tried with php server and it works with php sever but there is no way I was able to integrate webpack HMR with WordPress.
Please please please make a video about wordpress and webpack HMR ❤️❤️❤️❤️
Hi, the updates that I made to my Udemy WordPress Dev course in 2020 have us now leveraging Hot Module Replacement in our local dev environment. I'd guess in the next week or two Udemy will run a big sale with low prices. Or if you'd like to try and set it up on your own I can point you in the right direction; really it's just a matter of setting up a conditional / if statement in your functions.php file where you enqueue your front-end JS file. If you're running on your local dev domain load the localhost:3000/bundle from the webpack dev server, otherwise/else load the "production optimized" static bundle file.
@@LearnWebCode I have done that. Condition thing but on console Im getting a msg of HMR waiting for response from WDM like this kind of message.
Also the url localhost:8080 is redirecting to wordpress default url like localhost/ wordpress/
@@LearnWebCode I'm trying to figuring out how to work properly without reloading in WordPress
Thanks Brad,I am Bangladeshi but I don't know why I understand Your English rather than most of the Bangla video tutorial ☺
if you run to an Error running $ npx webpack-dev-server command. Do this: in package.json under "scripts" add property "start": "webpack serve" . In terminal type: npm start. You're welcome!
I want your web design course coupon brad please send to previous registered course users some coupon for your courses.. i registered in wordpress javascript course
First view as usual! Lets watch😁
i am the third but fourth who liked it