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, }, ```
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?
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.
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?
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.
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.
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.
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 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.
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.
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.
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.
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 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.
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)
[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, },
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
The best tutorial for actually understanding
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
from the deepest of my heart "THANK YOU "
Best tutorial about webpack I have ever seen
Thanks bro
The best webpack tutorial EVER
the way you teach is clean in deep enough to get started.
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"
I had no idea Alan Cross knew about Webpack. :) Thanks for the informative video!
Thanks so much professor, i just discover you and i think you are the GOAT🐐
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 so much Steve Griffith, it was very helpful and very easy to understand things that explained in this video.
Awesom explanation and walk with step by step. This is the best Webpack Getting Started. Thanks a lot.
Thank you for not wasting my time, It's was super good
Really good introduction to webpack.
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.
The only lesson that helped me set up webpack. Thank you very much. Please, make another one video of current webPack!)
your service workers series was excellent lucidly explained.thanks
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
Dude you are awesome!!! Thanks for creating this. Looking forward to more content!
Excellent tutorial! I'm so glad that I found your channel.
That is really well explained.. Thank you prof
This is the best tutorial I've watched on this topic. Thank you!
Wow, what an amazing video, really appreciate what you've done
thanks. You really made things easy to understand
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.
Thanks .. very good introduction.
Hello from Russia! I love your diction! Very comfortable!
greate work! clear and concise, much better than reading the docs. tks!
Superb! Actually helped me understand and wanting to use webpack. Thanks.
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 - th-cam.com/video/LCezax2uN3c/w-d-xo.html
Great tutorial....thanks Steve...
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?
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"
Great tutorial as always, more webpack please ;)
Super cool. Great in depth explanation. Thanks, I m good to go now 🤙🏻
Well explained for beginners.
Thank you so much for this great tuto ❤
OMG loooved it!! Thank you so much!
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
Just loved it. 😍 Thanks for creating wonderful content. 🙏
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?
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 💙
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
Thank you very much 🙏. Great tutorial. It helped me a lot.
Thank you very much, this was really helpful.
Thanks!
Excellent video.
Great explanation. Just a suggestion, adding timelines to your videos would be good.
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.
if you want to learn 'React', you should start with this content.
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?
Super Awesome explanation of very confusing topic ++++++++++ 🙂🙂
realy good video on this scary topic
16:07 Does this mean that plugins run before loaders?
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
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/
Thanks for this great tutorial!
Thanks Prof. Love your work
Excellent Awesome Great, I like man
@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.
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.
As always amazing content. Thank you ❤
Thanks! Nice! Great Tutorial!
very helpful tutorial
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.
Thank you very much!!!
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 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.
THANK YOU VERY MUCH !!!!!!!!!
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!
If it's something you'd find useful for your classes, could you do a video on using Webpack with Express & EJS? Thanks.
If you get an error like "Invalid options object". Change ContentBase to static in devServer.
Static is the property that replaced contentbase
You are the best of the best.
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.
Thank you very much
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
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.
real Professor !
how to use production mode in webpack
It is a great tutorial.
Good tutorial!
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😍💕💕
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.
at minute 31:19 how he reset the server? how to call c^C?
CTRL + C
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.
Агонь, красава!
what is that arrow symbol at 20:53?
It is a / followed by a \
14:27 Are you sure? I think plugins is a list of objects, not a list of JavaScript functions..
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
Thank you very much,please part youre videos
"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.
Thank you
good job.
Excellent tutorial!
Where can I download the folder
In the description. The link called "Code from video".
Nice!!!