Getting Started with Webpack 5 in 2021
Вставка
- Опубліковано 15 вер 2024
- This tutorial walks you through everything you need to get started using Webpack in your projects. If you are doing React development it will also help you to understand the role that Webpack plays in that too.
The core concepts of Entry points, Output configuration, Loaders, Plugins, Development web servers, and hot reloading are all discussed in detail, PLUS some of the key improvements that Webpack 5 has over Webpack 4.
Code from video:
gist.github.co...
Webpack core concepts:
webpack.js.org...
Webpack official Guides:
webpack.js.org...
Webpack official Configuration settings and options:
webpack.js.org...
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
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!
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
The best tutorial for actually understanding
The best tutorial that i have found.
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
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"
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
from the deepest of my heart "THANK YOU "
Best tutorial about webpack I have ever seen
Thanks bro
Thanks so much professor, i just discover you and i think you are the GOAT🐐
the way you teach is clean in deep enough to get started.
I had no idea Alan Cross knew about Webpack. :) Thanks for the informative video!
thank you so much Steve Griffith, it was very helpful and very easy to understand things that explained in this 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 for not wasting my time, It's was super good
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.
Excellent tutorial! I'm so glad that I found your channel.
Dude you are awesome!!! Thanks for creating this. Looking forward to more content!
The best webpack tutorial EVER
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!)
your service workers series was excellent lucidly explained.thanks
This is the best tutorial I've watched on this topic. Thank you!
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.
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
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.
Okay, all I had to do was change the static folder path to src
Really good introduction to webpack.
That is really well explained.. Thank you prof
thanks. You really made things easy to understand
Superb! Actually helped me understand and wanting to use webpack. Thanks.
Hello from Russia! I love your diction! Very comfortable!
Wow, what an amazing video, really appreciate what you've done
Great tutorial as always, more webpack please ;)
greate work! clear and concise, much better than reading the docs. tks!
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 💙
Thanks .. very good introduction.
Just loved it. 😍 Thanks for creating wonderful content. 🙏
Super cool. Great in depth explanation. Thanks, I m good to go now 🤙🏻
if you want to learn 'React', you should start with this content.
Great explanation. Just a suggestion, adding timelines to your videos would be good.
Great tutorial....thanks Steve...
Thank you very much 🙏. Great tutorial. It helped me a lot.
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?
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
OMG loooved it!! Thank you so much!
@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.
Thank you very much, this was really helpful.
Excellent Awesome Great, I like man
Thank you so much for this great tuto ❤
As always amazing content. Thank you ❤
Super Awesome explanation of very confusing topic ++++++++++ 🙂🙂
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?
Well explained for beginners.
real Professor !
realy good video on this scary topic
Thanks!
Excellent video.
If you get an error like "Invalid options object". Change ContentBase to static in devServer.
Static is the property that replaced contentbase
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.
16:07 Does this mean that plugins run before loaders?
very helpful tutorial
Thanks for this great tutorial!
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?
Thanks Prof. Love your work
It is a great tutorial.
You are the best of the best.
THANK YOU VERY MUCH !!!!!!!!!
Thanks, professor Steve.
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!!!
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! Nice! Great Tutorial!
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.
Thank you very much
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/
how to use production mode in webpack
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.
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.
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!
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 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.
14:27 Are you sure? I think plugins is a list of objects, not a list of JavaScript functions..
at minute 31:19 how he reset the server? how to call c^C?
CTRL + C
Nice!!!
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
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 👍.
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😍💕💕
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 \
"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.
good job.
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
I love you bro
Good tutorial!
Thank you
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