Creating and Understanding a Basic Webpack 5 Setup
ฝัง
- เผยแพร่เมื่อ 3 ส.ค. 2024
- Webpack can be a complicated beast, and I've encountered many developers that will just avoid anything to do with it. But if you take a little time to learn the fundamentals, I assure you that you'll save yourself some time and trouble in the future.
By the end of this video you should understand the minimal parts required to get Webpack working, as well as how to get modern Javascript transpiling and working with a default set of cross-browser support through Babel.
❗❗ IMPORTANT UPDATES ❗❗
webpack-dev-server update
`webpack-dev-server` released version 4 on 2021-08-18, which has a breaking change for this video. In the `webpack.config.js` file, under `devServer`, the `contentBase` property has been changed to `static`. If you use `contentBase`, like I do in the video, you'll get an error. You can either use `webpack-dev-server` ^3.11.0 (which is what this video uses) and just follow along with the video, or you can install the latest and update to the required change.
Here is the link to the webpack docs for this property:
webpack.js.org/configuration/...
And here is a link to the migration guide from v3 to v4:
github.com/webpack/webpack-de...
WINDOWS USERS
Some of the scripts I make to set environment variables will not work on Windows. I've made a video to fix that issue here:
• Windows development: F...
Hot Reloading issues
Your issue might be different, but just in case -- If you are having troubles with hot reloading check out this video, also in the Webpack playlist on my channel, which shows a fix:
• Solution for Webpack 5...
~~~~~~
00:00 - Introduction
02:42 - Creating the project
06:54 - Introducing Webpack to bundle our JavaScript
11:12 - Example of minimal output under the hood
14:40 - Babel transpiling through Webpack config file
22:25 - Switching between development and production modes
24:08 - Source maps for debugging
25:26 - Watch mode for rebuilding on save
26:40 - Development server for hot reloading on save
29:30 - Custom entry and output path
32:52 - Dynamically set development or production environment
36:37 - What is still missing with babel-preset-env
40:28 - Wrap-up
~~~~~~
Repository for reference:
github.com/Jimmydalecleveland...
Playlist for other Webpack 5 videos:
• Webpack 5
Follow Jimmy Cleveland's doings:
twitter: / jimmydcleveland
blog: blog.jimmydc.com/
#webpack #babel
❗❗ IMPORTANT UPDATES ❗❗
### webpack-dev-server update
`webpack-dev-server` released version 4 on 2021-08-18, which has a breaking change for this video. In the `webpack.config.js` file, under `devServer`, the `contentBase` property has been changed to `static`. If you use `contentBase`, like I do in the video, you'll get an error. You can either use `webpack-dev-server` ^3.11.0 (which is what this video uses) and just follow along with the video, or you can install the latest and update to the required change.
Here is the link to the webpack docs for this property:
webpack.js.org/configuration/dev-server/#devserverstatic
And here is a link to the migration guide from v3 to v4:
github.com/webpack/webpack-dev-server/blob/master/migration-v4.md
### WINDOWS USERS
Some of the scripts I make to set environment variables will not work on Windows. I've made a video to fix that issue here:
th-cam.com/video/t9okUDkRUDc/w-d-xo.html
### Hot Reloading issues
Your issue might be different, but just in case -- If you are having troubles with hot reloading check out this video, also in the Webpack playlist on my channel, which shows a fix:
th-cam.com/video/lNkVndKCum8/w-d-xo.html
Thanks for the update.
put this instead
var path = require('path');
module.exports = {
...
devServer: {
static: {
directory: path.join(__dirname, 'dist'),
},
}
}
for "build": "NODE_ENV=production webpack" error on build
install:
npm install -g win-node-env
@@reycoseguma2492 thank you so much :)
@@reycoseguma2492 or you could use `directory: "./dist"` without `path`
Jesus teaching me Webpack 5. What a time to be alive.
Haha 😂
This is so true.
true
actually made me laugh
Nooooooo… it’s CAT STEVENS
GREAT Vid.... Straight to the points with examples and demonstration. I've watched many others on this full of BS that don't really understand what they are doing and just talk about it.
Thank you. I still feel like I hardly know what I'm talking about, but that never ends in this field.
totally agree. this video is way better than many other webpack videos that have much more views and likes
I love how do you, stare, like "Today you will learn how easy it is came from the stone era to land on Mars"
I have watched both your two videos on webpack and I'm extremely grateful for the great content you have put out there! Thanks mate!!!
Thank you for saying so, I am always happy to hear it. I actually have 4 videos now in the playlist (not counting the dev server bugfix).
You deserve growth. I will share this video with all my friends and tell them to share it more. I'll always be thankful for your gatsby tutorial. Helped a lot.
That's very cool of you. I appreciate all the help I can get, and even better, I love hearing that the videos are helpful!
Man, thank you so much for this video. You took the mystery and magic out of webpack, I can’t thank you enough!
Thanks for letting me know. Always nice to hear I got it right for some people.
I loved it! you have the skill of teaching complicated subjects in a simple language.
This video was so helpful, I didn't wanna click on it because of the length, but I actually understood stuff and I'm glad I did, thanks!
Thanks Jimmy. This is excellent. I have been using Webpack but still learned important new things here.
That is awesome, thank you for letting me know.
Glad I found this channel. No bs straight-to-the-point tutorials that cover many nuances that other tuts skip. Subscribed.
I'm happy to hear that. The balance of getting straight to code and giving some explanation has been challenging for me.
I think this is the most easiest video on webpack, by far the best one I've seen. Can't thank enough. I was struggling to understand webpack, babel with this video I was able to do it by myself. Thanks again.
Great video. Learning webpack from scratch for work and I like how he takes you from zero to understanding the basics.
Nice. Ty for the feedback.
Very good explanation, I was always struggling with webpack, but this entry gave me hope.
I'm excited to go through the whole playlist.
Awesome. Let me know how the playlist is once you've gone through it.
This guy makes me understand webpack in the deepest level. Keep up the good work bro!
probably not the "deepest" but I'm certainly pleased if it pulled back the veil a bit.
out of all the tutorials i viewed, this was the one that got me up and running with webpack AT ALL. tysm! know just when to explain and how to explain it, dude!!
Thank you for the kind words, and I'm glad it helped.
This deservers alot of attention !! Very well explained ! Thanks
Great video! You have a concise, but thorough presentation style. I also really appreciate your calmness, so many dev channels go a mile a minute which is frankly annoying.
I really appreciate you saying so, thank you. It's easy to feel like your own videos are getting too long and to want to speed through parts, so I am always happy to hear that someone appreciates the time spent on clarity.
The balance is really tough.
Really a gorgeous video And special thanks for the hint about 'static'
Thank you.
Great tutorial Jimmy. I've had to go back to the drawing board with my Webpack setup and this has cleared up a lot of confusion for me.
Very happy to hear that. Configs can indeed get wild over time.
This really helped break down the fundamentals of webpack. So helpful I've been looking for the answer and this was it!
Awesome to hear, thank you.
The way this video proceeded, initially without webpack, then bare minimum requirement, and then incremental approach, itself shows how crystal clear the concepts of this guy are. Totally loved the video.keep up the good work. Subscribed!! 😍😍
Damn, I already was so angry with webpack because I felt like I would never get behind it and see its benefits. You explained the basics so neatly and simple that it all makes sense now. Thank you so much for this! You got my sub!
I can already see this channel getting big
These are the type of comments that motivate me to keep taking the time to create videos. Thank you for letting me know.
Amazingly explained, very practical approach and smoothly delivered. I am right now setting up webpack for my brand new React Typescript project. This is very helpful. All the best for your future works!
Thank you for the thoughtful message.
looked into documentation, looked other info sites and couldn't understand what that thing actually does. This video just have put everything on it's places. Thanks!
Thanks man, love your style of presentation.
Must understanding video I came across, thank you man!
Awesome, thank you.
I'm hooked! I am a new subscriber!
1) You did NOT spend the first 7 to 10 minutes talking about yourself
2) You speak clearly and are relatable
3) Your points are not verbose but concise
Just Thank You
Thank you for the feedback, much appreciated.
GREAT and CLEAR Explanation !! TOP! :)
looking forward for a React Typescript setup using Webpack 5 and Babel
Many many thanks for explaining the topic with such clarity. I am grateful for your minimal approach to building a final result, rather than "let me show you how cool I am by demonstrating this very complex gibberish".
That's my goal, thank you very much for the feedback!
thanks man, hope to see more videos on web development :)
You saved my days.
Thank you
Thank you for step by step explanation. Great video.
Anytime, and thanks!
A very goo video. For those who are following along ("now") and having some issues with the dev server (webpack-dev-server), try to downgrade your version. Before I downgraded my version from 4.X to 3.X it wouldn't work.
The error message I got was:
Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
Date: 2022/04
Thanks for the heads up for everyone. I put this issue in the pinned comment but unfortunately I can't annotate a video after it's up anymore (youtube changed that some time back)
Thank you very much for posting this video. I found it really helpful.
Glad to hear it, thanks.
Whoa! Great stuff, thank you so much.
Thank you this guidance. Webpack was always a bit of a struggle for me.
I think the majority of us have felt that way. Respect for taking the time to improve at it.
Keep up the good work, You'll get there brother hang on!
D&D themed coding. Immediately subscribed. That's brilliant!
Haha, I think you are the first person to mention it. I'll have to step up the RPG vibes, I guess.
Great straight to the point video. Actually clicked off of the freeCodeCamp video to here since he was barely talking about webpack 20 minutes into the video.
finally someone shoing the SRC folder thing, i spent a whole day trying to fix it and tutorials dont show it, subscribed, these things are so complex, i thought not even jesus could help me
Awesome mate, thanks 🙏
your chanel deserves to grow .. great video, helped a lot !
Thank you for the kind words. I will keep trying!
@@SwashbucklingwithCode could you be so kind sir and do part 2 and include setup with typescript + sass combination ?
@@matejbeber8892 Sure. I have a quick setup with JSX planned currently, but I could do some other variations.
Love this video! Very Helpful!!
Awesome!
Thanks for your concern on updates that has breaking changes
Great video, thank you!
Well explained, helped a lot!
Glad to be of service.
Very informative, thank you very much for your time and your effort. Excellent tutorial.
Awesome, thank you for letting me know.
this is exactly what i needed thank youuu
Glad to hear it!
Very good explanation. Thanks for the video :)
Delightful! Glad it could help.
Very nice explained!
Thank you.
Really helpful! Webpack / babel from gradle to grave.
Wow you are playing "John Wick as a Software Developer" Hehe. Thanks for awesome explanations I like the way you are coding and yes I was stuck in setting up webpack for a while now.. It was really helpful!
Thank you for the kind words.
Dude you explain very clear and succinctly. Gained a new sub from me. Looking forward to watching more of your videos
Nicely done, dude!
Thank you!
You are a life saver, thanks for this video!
Glad it was useful.
Awesome video!
love the quality
Thank you, You're breathtaking!
Haha, thank you.
Thank you so much!
Thanks man! Appreciated!
finally a webpack video I can make sense of. This greatly helped my comprehension.
Better watch out Colt Steele, Swashbuckling with code is coming for you!
Happy to help. Best of fortune in your webdev adventures.
Thank You for sharing. It is incredible. I follow and understand every word. I wish I did find You before I bought a bunch of courses that gave me exactly nothin but frustation. Thank You
It is quite the pick-me-up to hear this, thank you.
Also, sometimes those frustrating studies that seem to give nothing are a needed period for your brain to start loading up a subject until you find a clear source. Just my 2 cents and something I consider when being frustrated at no results.
@@SwashbucklingwithCode smart & humble 🎉
very helpful, thanks!
Sweet! Thanks for letting me know.
This video is simply amazing 😍
this was great, thanks!
No problem, thanks for the feedback!
Your videos are amazing, its swashbuckling amazing, thank ye cap’n 🌎💯
Thank you, and you're welcome.
u a doing my day, ty!
Holy crap, I'm learning Webpack from Jared Leto
Points for a new one to my ears.
Hey, You're amazing. Just wanted to mention that
Why, thank you.
Thanks for the video! I'm a fan of the style of explanation. You've got yourself a new subscriber and I've shared the video.
I also dig your simple terminal setup. I browsed your blog in the hopes I'll see a walkthrough of how you set it up, but it's not there. What did you use? I especially like the way the command you write turns from red to green (guessing it happens when it finds a valid one?)
Also, happy new year! 🥳
Thank you, kindly. I'm in the process of re-working my blog and I plan to have a post about all my settings.
For now, I'm using .zsh with these 2 lines in my .zshrc file
source ~/.config/git-prompt.zsh
PROMPT='%F{cyan}%~%f $(gitprompt) %(?.%F{green}$%f.%F{red}$%f) '
The `git-prompt.zsh` can be found here:
github.com/git/git/blob/master/contrib/completion/git-prompt.sh
great content! ty
I'm that type of guy that never comments on anything, just scrolls, but maaan... I must say, you've really impressed me, you have a gift for sharing knowledge, great content quality it would be a pleasure to see you grow. Ofc i've subbed and ringed the bell immediately. You are truly a knowledgeable man.
@Edit I've noticed you are using quite a few keybindings and tricks when dealing with the code, would love to see a video explaining how to setup vs code or what vs code tricks and tips are worth mentioning
Best Regards
Friend from Poland
Thank you, I truly appreciate the kind words, especially as a lurker myself. I hope to keep seeing you around as I improve, then. Take care!
@@SwashbucklingwithCode just started my first job as a React developer so will certainly hang around !
Fantastic! 👏🙌
Thanks for saying so.
Thank you so much. I like your channel, immediately subscribed 🔔 , and like 👍👏❤
I appreciate it. Best of fortune in your future swashbuckling.
Thank you so much!!!!!!!!
Happy to help.
As you said in the beginning Angular or Vue.js make it easy to start developing web apps since they hide the complexity of tools like webpack. But after some time you will ask yourself, how the content of the dist folder is generated. This video uses the minimum setup to provide an answer to that question. Simply reproduce the steps shown and you will have a much better understanding of web apps. I am a professional web developer but I have to admit that I learned a lot from that video!
Awesome. Thanks for the extra perspective. I even learned some things making the series, which is always a nice bonus.
Thanks for this really helpful and informative video🔥
Btw you look a lot like Christian bale
Well that is a first, it's usually Keanu or Jesus.
I always thought of webpack as a "compiler" for web development.
First time I make webpack work fine and I understand what it does. The only problem I had was that I couldn't use "NODE_ENV=production" in the script, it returned "'node_env' is not recognized as an internal or external command" but I fixed it using --mode=production. Thanks a lot.
Sweet! I also linked to a video in the notifications for ways to handle `NODE_ENV` not recognized issues.
But I'm glad you figured it out.
thank you!
You are welcome, glad it was helpful.
@Swashbuckling with Code i have been issues trying to get this through the documentation, your tutorial is on points, thanks man, now I can move on.
The docs were pretty tough for me in areas as well, thus the video. I'm glad it fulfilled it's purpose.
very good work , i"ve started with the official webpack documentation ( since it's good practice ) and it was a little confusing because they explain every detail. a simplified explanation like this may be good start to dive deep in the docs later.
ps: i've noticed that you're using oh my zsh with the vim ext for vscode! would you please make a video about tips, enhancing productivity and best configs ?
nice work again thks!!!
Glad it worked for ya. For oh-my-zsh and general terminal tricks I have a short video on the channel th-cam.com/video/Xpp8DW2eUUA/w-d-xo.html
It's a good suggestion overall, I'll have to think of a digestible format for Vim+VSCode. Thanks.
Excelent!
Thank you
Amazing 😙😙😎😍
Awesome Video ++++++++++++++
I watched this vid, then my hand just click subscribe
MAN you look like Keanu Reeves. I can't wait to see you in next John Wick😍.
Lets circle back to the webpack again audience.👻
Hey Swashbuckling,
You just made my day :-). Now a subs.
Happy to help.
Great tutorial! I'm wondering - what theme are you using for vscode?
2:59 went down hour-long rabbit hole to figure out what witchcraft was used to have a "take" command mkdir and cd. Still not completely clear, but realized it wasn't really mission critical.
Yah, in hindsight I regret using that without a disclaimer. I have a video covering that and other commands here:
th-cam.com/video/Xpp8DW2eUUA/w-d-xo.html
@@SwashbucklingwithCode Old dog is not compatible with new tricks. I've spent most of the day trying to figure out how jquery and jquery plugins like jquery validate work with webpack. I came upon webpack looking to get away from grunt and gulp for minifying/uglifying js, compiling sass and minifying css. The more tools that are made to make life easier for developers, it seems that the workflow gets more and more complicated until it's the furthest thing from easier.
@@thebassuniversity Things have gotten pretty complex for many setups, and it's very intimidating when you don't work with them consistently. But when you take into account all the complications that browsers introduce to a language updating, it starts to become clear why the tools are so complex.
If you are looking for simplicity, Parcel is is pretty amazing and does a lot for you. I prefer Webpack for more complex stuff, but Parcel is great for many projects.
@@SwashbucklingwithCode My big issues isn't really the complication, it's the learning curve for the utility time. Seems like I'm changing workflows completely every couple of years, which can leave me with legacy projects over 3 different task runners/bundlers. Thankfully I did stumble upon the answer to my jquery issue. I can continue to use the jquery CDN with
externals: {
jquery: 'jQuery'
}
Now I can continue my test implementation.
@@SwashbucklingwithCode Zipping right along with webpack now. Your video helped get me in the right direction. The missing link for me was that, out-of-the-box, webpack bundles and minifies js. Once you specify things, you are undoing some default behavior. For instance, a custom entry point removes src as the default entry point, a custom minifier for css removes tercer for js. This seems obvious once you realize that these are not additive, but they replace, so you need to add the defaults back. To a new user, when everything was working automagically, it seemed like I broke something, so I was looking for fixes to things that weren't broken.
🔥🔥🔥🔥
AWESOOOOOOOOME!!!!!! :D :D :D
Very happy to hear you enjoyed it. Cheers.
For modes you can also add a flag to your command, like "webpack --mode=development" :)
Thank ya. That's actually in the latest video clip that's linked in the card on this one.
@@SwashbucklingwithCode Oh, sorry bout that! I stopped at the Babel part as that was less relevant for me.
I love your teaching style buddy, just not a fan of most of the subjects currently present on your channel. Are you planning on doing any of these: Modern WordPress Development (with Roots.io stack), Laravel, PHP OOP, Docker, Laravel Mix, Vagrant, deploying to DigitalOcean?
@@tomdevisser8150 No need to apologize at all, I love when people leave tips for me and the rest of the viewers.
I was just mentioning it was there because I just put it up a few days ago.
@@tomdevisser8150 I am not planning on covering any of that besides Docker and maybe Digital Ocean at some point. I'm not into the PHP side of the world, sorry.
@@SwashbucklingwithCode Ah, that's too bad, thanks for letting me know though :)
TOOPPPP Content
ty
Thanks for the knowledge.
Please you can zoom your text editor a little bit so that those of watching with small screen phone can follow along as you type out the codes.
I have to switch to my laptop to be able to follow.
Thanks so much.
I'll definitely look into it and consider it more in the future. Right now it already is zoomed in about 300% of my norm and the balance between code real-estate and readability is tough.
If you have multiple examples of other channels that do this well I'd love to take a look, as I actually see most other channels having similar or smaller zoom than mine.
@@SwashbucklingwithCode thanks for your kind response
Thank you for the greatest video for the newbie! I did not understand one thing though: You manually copied index.html to ./dist folder, but you never mentioned index.html when working with ./public folder. Apparently it must have worked, but how did index.html get there (within the bundle file?), and if not, from where was it served? And how it is supposed to be served? I am working on Typescript Aurelia project now, and while all the resulting .js files are copied to the ./dist folder, .html files are not, and nothing works obviously.
When I get to 28:09 I get 404 failed to load resource(Not Found) main.js:1. All files are the same as yours, did something change in the last year?
This is very useful content. I am from that school of thoughts where I would like to remove all the magic that happens behind the scene and would really want to understand the things. Kind of start from the scratch with minimal dependencies and then try to build on that. So your content is awesome. If you could unwrap the mysteries about web typography, rendering and other performance things in this space by some series, that will be great.
Thank you. I'm the same, which is why I decided to start making videos.
Could you elaborate on what you want to know about web typography a bit?
I've got some web performance focused content planned but it's been challenging to get the pacing and length right.