Just for ones who new here. There is "static" instead "contentBase" since last update I think. Thank you for the great explanation. You have a new subscriber now.
Hi Steve, special Thanks you save me alot of time. This was exactly what i am looking for. Very Good example for a beginner tutorial. With best regards from Germany
Probably the best single tutorial video I've seen. From your pacing, to barebones explanations of WHY each line is needed, to your calming voice. Superb. I came here after webpack's official docs and they should hire you lol.
Loved this tutorial, very beautifully constructed , instead of installing evrything at once and overwhelming the students, concepts were introduced in an ordered fashion only when necessary. I truly understand Webpack now. Thanks !
Thank you Steve for such amazing explanation. Great started point to learn how webback works. Then it's up to the project needs what loaders and plug-ins to include.
Great tutorial, very well explained and I like the slow pace. In the newer version of the "webpack-dev-server" the "contentBase" have to be replaced with "static" and "watchContentBase" gives errors so I just removed it, and to make hot realoding work replace "dist" with "src" in the "static: path.resolve(__dirname, 'src')," ``` devServer: { static: path.resolve(__dirname, 'src'), port: 5001, open: true, hot: true, }, ```
Thank you! I understand a lot from your video. As always laconic and meaningful. They say Node Sass deprecated and urge you to switch to Dart Sass, which is, anyway, available from npm by "npm install sass"
This was really a great overview to Webpack. I followed the steps in the video and everything works alright except that when I make changes to the template.html file, it doesn't reflect live on the webpage except if I manually reload the page but when I make changes to the SCSS or JS files it's changes reflect live.
Thank you so much ,i have been waiting this tutorial from someone good in explain .i will watch this now .and i hope you cover the important thing . when we work in real project 💙
Thank you Steve for your easy to follow tutorial 🙏🏾. My setup is 80% done and I understand it. Is there a way to set it up so that the css file is copied separately to the dist folder?
You can set multiple entry and output points instead of just one. Often with webpack the CSS is being read and then injected directly into the HTML and/or imported through the JS. It gets compressed and injected.
Great tutorial! I still have one doubt though. When I insert an element into the template html file it doesn't load on the webpage. Do i need another loader for that to work?
@@SteveGriffith-Prof3ssorSt3v3 Thanks for replying! I have imported in into the .js file and when i insert the image into the DOM from Js it works but when i add an img tag in the template html file and set the image path as the src of that tag it doesn't load on the webpage. However i do see an image in the dist folder with hashed name. I wish i could share more info about my query but I can't here. Any advice will be extremely helpful. Thanks.
hello, if I have a html template ie temp.html that has multiple images , how do i import them to be bundled? cant find any solutions online, only solutions are single image, I have like 25 images, do i have to import into the app.js individually?
I have a reasonable question: since this video tutorial literally is about 5th version of Webpack in 2021, why author writes options for devServer like `contentBase` and `watchContentBase`? There are no such options for Webpack 5 in official docs. So to make devServer work I had to remove `contentBase` and `watchContentBase` options and then I just added `static: path.resolve(__dirname, 'dist')`.
Everything that is passed 6months via tutorial videos is 99% outdated. That is just the world of software development. That is why it is very important to read official documentation before diving into any tutorial.
Hi thanks for the cool video :) How do you manage Header/Footer or other Menus, which you want to share in all *.html Sites? I currently use it with a custom .js File, but it isn't very recommend for SEO. Can i build something which is stable with webpack5? So that i can later on use also Style with CSS or Tailwind itself?
Yes. contentBase was the old setting. static is the new name for that. Thanks. I've updated that in my sample file. The dev server is part of webpack. webpack.js.org/configuration/dev-server/
If I use index.html, no issue. But if I change its name to app.html and open dev server, I see the listed directory in browser. From there I have to select app.html. How can dev server directly open app.html?
That is more an issue of how the web works. index.html is the default file name for every website on every server. If no file name is provided then the webserver will return index.html. This was created as a standard because people cannot be expected to guess the names of your webpages.
@@SteveGriffith-Prof3ssorSt3v3 Thanks for answering, I'm a complete newbie in webpack, why we need to import css and svg into JS? For example, can we just put the css link stylesheet in the html and put the class name to JS? I don't really get the concept
could you do a more in depth course i don't know the most optimal and professional way of setting up webpack. I mean mine does work but reading the docs is too confusing. I'm an aspiring front end dev.
The way you set up webpack depends entirely on the project you are building. There is not simply one way to set it up. It depends on the technologies that you are using. It the flexibility of webpack that makes it so powerful (and so challenging to learn). There is a good boilerplate linked in the description. A boilerplate is a good starting point.
Not sure what you mean. VSCode only shows files and folders that are on your operating system. If you delete a file from your OS it will disappear in VSCode.
Webpack 5 is now the official version. It went through a long beta period first. No need to change older projects but anything you start now should use version 5.
I just don't understand the point of using Webpack over Parcel, other than the mighty deep configurations. There is just too much of config to start a project with. :/ What do you think? And Thank you so much for walking thorough this like no others!
I have no opinion about one over the other. Any build tool that you use is going to take time to learn. Once you have a solution that does everything that you need, stick with it.
One thing conspicuously absent from these video and all webpack tutorial videos - watching html files, recompiling and then live reloading. Am I right in thinking this is not supported in webpack?
It's not something that I would think to do with webpack. Generally speaking webpack is used with JS based projects that are generating the HTML. HTML templates are used or other tools that may have server-side rendering or generated static pages. But if my site was built with a bunch of static HTML files then I wouldn't think to try and bundle it was an app with webpack.
[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 'watchContentBase'. 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?, server?, setupExitSignals?, static?, watchFiles?, webSocketServer? }
devServer: { contentBase: path.resolve(__dirname, 'dist'), writeToDisk: true, port: 5001, // default 8080 open: true, hot: true, // this is for server to refresh when you change files in /build (not required normally) watchContentBase: true, },
Thanks a lot for this tutorial.. it's a legendary tutorial for me ! i have just a question, i am not able to start the local server unless i remove the static propert from devSever configuration object Can you help me understand please ? This is my object config : devServer: { static: path.resolve(__dirname, 'dist'), port: 5001, //default 8080 open: true, hot: true, watchContentBase: true, } Thanks
@@SteveGriffith-Prof3ssorSt3v3 yes all is as it was on the git. When i remove the static propert all goes fine but when it is there webpack tells me that no additionnal properties shoud be added to options (for devServer)
it's not working, please solve it...................... [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 'watchContentBase'. These properties are valid:
As per other comments in here there were a couple changes from version 4 to 5. DevServer has been supported since version 4, but there are a couple changes to the options. webpack.js.org/configuration/dev-server/ The code gist has been updated.
Just for ones who new here. There is "static" instead "contentBase" since last update I think. Thank you for the great explanation. You have a new subscriber now.
Huge help! Thanks!
thanks mate , your comment give my direction toward solve my problem :)
Also watchContentBase isn't necessary anymore, it's already enabled by default
The best tutorial that i have found.
Steve, I was on the verge of tears with webpack and you fixed it. I know this took time and effort to make so I thank you for it!
Hi Steve, special Thanks you save me alot of time. This was exactly what i am looking for. Very Good example for a beginner tutorial. With best regards from Germany
Probably the best single tutorial video I've seen. From your pacing, to barebones explanations of WHY each line is needed, to your calming voice. Superb. I came here after webpack's official docs and they should hire you lol.
I agree with the calming voice. Love it specially when you're dealing with this kind of source of headache lol
Update:
In webpack.config.js:
devServer:{
static: path.resolve(__dirname, 'dist'),
port: 5001,
open: true,
hot: true,
}
and in package.json:
"dev": "webpack serve --mode development ",
"build": "webpack --mode production"
The best tutorial for actually understanding
the way you teach is clean in deep enough to get started.
Best tutorial about webpack I have ever seen
Thanks bro
thank you so much Steve Griffith, it was very helpful and very easy to understand things that explained in this video.
I had no idea Alan Cross knew about Webpack. :) Thanks for the informative video!
Loved this tutorial, very beautifully constructed , instead of installing evrything at once and overwhelming the students, concepts were introduced in an ordered fashion only when necessary. I truly understand Webpack now. Thanks !
Thank you Steve for such amazing explanation. Great started point to learn how webback works. Then it's up to the project needs what loaders and plug-ins to include.
from the deepest of my heart "THANK YOU "
Great tutorial, very well explained and I like the slow pace.
In the newer version of the "webpack-dev-server" the "contentBase" have to be replaced with "static" and "watchContentBase" gives errors so I just removed it, and to make hot realoding work replace "dist" with "src" in the "static: path.resolve(__dirname, 'src'),"
```
devServer: {
static: path.resolve(__dirname, 'src'),
port: 5001,
open: true,
hot: true,
},
```
Thanks
Thanks so much professor, i just discover you and i think you are the GOAT🐐
Awesom explanation and walk with step by step. This is the best Webpack Getting Started. Thanks a lot.
The only lesson that helped me set up webpack. Thank you very much. Please, make another one video of current webPack!)
Dude you are awesome!!! Thanks for creating this. Looking forward to more content!
@25:34 replace "contentBase: path.resolve{__dirname, "dist"} => static: { directory: path.join(__dirname, "dist" }", otherwise you're gonna get an error and it won't compile.
The change is already made in the attached source and is discussed in the description.
your service workers series was excellent lucidly explained.thanks
Thank you for not wasting my time, It's was super good
The best webpack tutorial EVER
Really good introduction to webpack.
Excellent tutorial! I'm so glad that I found your channel.
This is the best tutorial I've watched on this topic. Thank you!
That is really well explained.. Thank you prof
Thank you! I understand a lot from your video. As always laconic and meaningful. They say Node Sass deprecated and urge you to switch to Dart Sass, which is, anyway, available from npm by "npm install sass"
thanks. You really made things easy to understand
Wow, what an amazing video, really appreciate what you've done
greate work! clear and concise, much better than reading the docs. tks!
When I was starting watching this tutorial I was knowing that I will understand finnaly what going on in web pack , i did not be wrong.
This was really a great overview to Webpack. I followed the steps in the video and everything works alright except that when I make changes to the template.html file, it doesn't reflect live on the webpage except if I manually reload the page but when I make changes to the SCSS or JS files it's changes reflect live.
Okay, all I had to do was change the static folder path to src
Superb! Actually helped me understand and wanting to use webpack. Thanks.
Great tutorial as always, more webpack please ;)
Hello from Russia! I love your diction! Very comfortable!
Super cool. Great in depth explanation. Thanks, I m good to go now 🤙🏻
Thanks .. very good introduction.
Thank you so much ,i have been waiting this tutorial from someone good in explain .i will watch this now .and i hope you cover the important thing . when we work in real project 💙
Wow sir you just clear the fundamentals of bundlers and it is really important to move forward .
I request you 🙏 to make a video on parcel.js
You can post video requests here - ua-cam.com/video/LCezax2uN3c/v-deo.html
Great tutorial....thanks Steve...
Just loved it. 😍 Thanks for creating wonderful content. 🙏
16:07 Does this mean that plugins run before loaders?
Great explanation. Just a suggestion, adding timelines to your videos would be good.
Thank you Steve for your easy to follow tutorial 🙏🏾. My setup is 80% done and I understand it. Is there a way to set it up so that the css file is copied separately to the dist folder?
You can set multiple entry and output points instead of just one.
Often with webpack the CSS is being read and then injected directly into the HTML and/or imported through the JS. It gets compressed and injected.
@@SteveGriffith-Prof3ssorSt3v3 I ended up using the MiniCssExtractPlugin and loader, but I will explore this option too. Thanks
Thank you very much, this was really helpful.
Super Awesome explanation of very confusing topic ++++++++++ 🙂🙂
Thank you so much for this great tuto ❤
Thank you very much 🙏. Great tutorial. It helped me a lot.
Well explained for beginners.
OMG loooved it!! Thank you so much!
If you get an error like "Invalid options object". Change ContentBase to static in devServer.
Static is the property that replaced contentbase
Thank you for awesome content!
Is HtmlWebpackPlugin the same as pug? Can I use both?
Pug is a tempting tool the other is a webpack plugin they are not the same thing.
Steve can you please tell how I should write pug and sass in webpack.config.js.
at minute 31:19 how he reset the server? how to call c^C?
CTRL + C
realy good video on this scary topic
what is that arrow symbol at 20:53?
It is a / followed by a \
Thanks!
Excellent video.
14:27 Are you sure? I think plugins is a list of objects, not a list of JavaScript functions..
Great tutorial! I still have one doubt though. When I insert an element into the template html file it doesn't load on the webpage. Do i need another loader for that to work?
Images need to be imported through your JavaScript to get copied over to the distribution folder.
@@SteveGriffith-Prof3ssorSt3v3 Thanks for replying! I have imported in into the .js file and when i insert the image into the DOM from Js it works but when i add an img tag in the template html file and set the image path as the src of that tag it doesn't load on the webpage. However i do see an image in the dist folder with hashed name. I wish i could share more info about my query but I can't here. Any advice will be extremely helpful. Thanks.
Excellent tutorial!
Where can I download the folder
In the description. The link called "Code from video".
if you want to learn 'React', you should start with this content.
hello, if I have a html template ie temp.html that has multiple images , how do i import them to be bundled?
cant find any solutions online, only solutions are single image, I have like 25 images, do i have to import into the app.js individually?
Thanks for this great tutorial!
As always amazing content. Thank you ❤
If it's something you'd find useful for your classes, could you do a video on using Webpack with Express & EJS? Thanks.
I have a reasonable question: since this video tutorial literally is about 5th version of Webpack in 2021, why author writes options for devServer like `contentBase` and `watchContentBase`? There are no such options for Webpack 5 in official docs. So to make devServer work I had to remove `contentBase` and `watchContentBase` options and then I just added `static: path.resolve(__dirname, 'dist')`.
Yes those were devserver options from version 4 that I missed. It was changed in the code gist and discussed in the comments already.
Everything that is passed 6months via tutorial videos is 99% outdated. That is just the world of software development. That is why it is very important to read official documentation before diving into any tutorial.
Hi thanks for the cool video :) How do you manage Header/Footer or other Menus, which you want to share in all *.html Sites? I currently use it with a custom .js File, but it isn't very recommend for SEO. Can i build something which is stable with webpack5? So that i can later on use also Style with CSS or Tailwind itself?
Thanks Prof. Love your work
Thanks! Nice! Great Tutorial!
Thanks, professor Steve.
contentBase throws an error, it has been renamed to static. However, It seems with webpck 5.5 dev server is built in? am i wrong?
Yes. contentBase was the old setting. static is the new name for that. Thanks. I've updated that in my sample file. The dev server is part of webpack.
webpack.js.org/configuration/dev-server/
Why do I have to save both the temp.html changes and the index.html that is being outputted? If i just save temp it doesn't work
If I use index.html, no issue. But if I change its name to app.html and open dev server, I see the listed directory in browser. From there I have to select app.html. How can dev server directly open app.html?
That is more an issue of how the web works. index.html is the default file name for every website on every server. If no file name is provided then the webserver will return index.html. This was created as a standard because people cannot be expected to guess the names of your webpages.
Excellent Awesome Great, I like man
Is webpack created for SPA type of website? Because it bundles up a ton of JS into single file. So it's perfect case for SPA.
Webpack works well for SPA but also for other types of websites too. All depends on what you are building and how you configure Webpack.
@@SteveGriffith-Prof3ssorSt3v3 Thanks for answering, I'm a complete newbie in webpack, why we need to import css and svg into JS? For example, can we just put the css link stylesheet in the html and put the class name to JS? I don't really get the concept
Hope sir will make some tutorial on Redux and Redux Toolkit too 😄. It will really be helpful
It's on my list... with about 800 other tutorials.
@@SteveGriffith-Prof3ssorSt3v3 thank you for your effort.
could you do a more in depth course i don't know the most optimal and professional way of setting up webpack. I mean mine does work but reading the docs is too confusing. I'm an aspiring front end dev.
The way you set up webpack depends entirely on the project you are building. There is not simply one way to set it up. It depends on the technologies that you are using. It the flexibility of webpack that makes it so powerful (and so challenging to learn).
There is a good boilerplate linked in the description. A boilerplate is a good starting point.
very helpful tutorial
How can I delete a folder in vs code that I've already imported to VS code?
Not sure what you mean. VSCode only shows files and folders that are on your operating system. If you delete a file from your OS it will disappear in VSCode.
Thank you
Sir I want to add different components of jsx, props,arrays,Router,link etc in main.js. can you explain me that how's that possible?
Is it worth to migrate from webpack 4 now? I mean those dependencies used in project. In my opinion it is pretty early yet. What do you think teacher?
Webpack 5 is now the official version. It went through a long beta period first.
No need to change older projects but anything you start now should use version 5.
@@SteveGriffith-Prof3ssorSt3v3 Got it. Now that's clear for me 👍.
I just don't understand the point of using Webpack over Parcel, other than the mighty deep configurations. There is just too much of config to start a project with. :/ What do you think? And Thank you so much for walking thorough this like no others!
I have no opinion about one over the other.
Any build tool that you use is going to take time to learn. Once you have a solution that does everything that you need, stick with it.
@@SteveGriffith-Prof3ssorSt3v3 Thank you!
One thing conspicuously absent from these video and all webpack tutorial videos - watching html files, recompiling and then live reloading. Am I right in thinking this is not supported in webpack?
It's not something that I would think to do with webpack. Generally speaking webpack is used with JS based projects that are generating the HTML. HTML templates are used or other tools that may have server-side rendering or generated static pages. But if my site was built with a bunch of static HTML files then I wouldn't think to try and bundle it was an app with webpack.
how to use production mode in webpack
"npm run build" not working
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Are you in the right folder?
[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 'watchContentBase'. 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?, server?, setupExitSignals?, static?, watchFiles?, webSocketServer? }
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
writeToDisk: true,
port: 5001, // default 8080
open: true,
hot: true,
// this is for server to refresh when you change files in /build (not required normally)
watchContentBase: true,
},
@@husainmwasfi4262 This was discussed in other comments and was updated in the code Gist.
If we don't add webpack config file our file folder then it's important to add.
Please complete webpack crash course video for ecommerce website.
Thanks a lot for this tutorial.. it's a legendary tutorial for me !
i have just a question, i am not able to start the local server unless i remove the static propert from devSever configuration object
Can you help me understand please ?
This is my object config :
devServer: {
static: path.resolve(__dirname, 'dist'),
port: 5001, //default 8080
open: true,
hot: true,
watchContentBase: true,
}
Thanks
are you importing the path module at the top of your file?
@@SteveGriffith-Prof3ssorSt3v3 yes all is as it was on the git. When i remove the static propert all goes fine but when it is there webpack tells me that no additionnal properties shoud be added to options (for devServer)
@@chakibbensari1850 not sure what is causing that for you
Good tutorial!
THANK YOU VERY MUCH !!!!!!!!!
You are the best of the best.
It is a great tutorial.
Thank you very much!!!
Thank you very much
it's not working, please solve it......................
[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 'watchContentBase'. These properties are valid:
As per other comments in here there were a couple changes from version 4 to 5.
DevServer has been supported since version 4, but there are a couple changes to the options.
webpack.js.org/configuration/dev-server/
The code gist has been updated.
@@SteveGriffith-Prof3ssorSt3v3 Thank you😍💕💕
Thank you very much,please part youre videos
real Professor !
Thank you
good job.
Агонь, красава!
Nice!!!