Creating and Understanding a Basic Webpack 5 Setup

preview_player
Показать описание
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

Here is the link to the webpack docs for this property:

And here is a link to the migration guide from v3 to v4:

### 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:

### 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:

~~~~~~

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:

Playlist for other Webpack 5 videos:

Follow Jimmy Cleveland's doings:

#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:

And here is a link to the migration guide from v3 to v4:

### 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:

### 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:

SwashbucklingwithCode
Автор

Jesus teaching me Webpack 5. What a time to be alive.

aliasalias
Автор

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.

shivanshpratap
Автор

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.

srikanthathikari
Автор

Glad I found this channel. No bs straight-to-the-point tutorials that cover many nuances that other tuts skip. Subscribed.

leonelramos
Автор

I love how do you, stare, like "Today you will learn how easy it is came from the stone era to land on Mars"

emiliano
Автор

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!!!

emmanuelfabiani
Автор

Man, thank you so much for this video. You took the mystery and magic out of webpack, I can’t thank you enough!

johnnycat
Автор

I loved it! you have the skill of teaching complicated subjects in a simple language.

simpleprogramming
Автор

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!

Zazza
Автор

This deservers alot of attention !! Very well explained ! Thanks

akashtakawale
Автор

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!! 😍😍

vikramin
Автор

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.

npn
Автор

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

rosendotorres
Автор

Very good explanation, I was always struggling with webpack, but this entry gave me hope.
I'm excited to go through the whole playlist.

imadmachi
Автор

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 <3

yaboi
Автор

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.

RAZR_Channel
Автор

GREAT and CLEAR Explanation !! TOP! :)

looking forward for a React Typescript setup using Webpack 5 and Babel

jeloi
Автор

This guy makes me understand webpack in the deepest level. Keep up the good work bro!

devorockz
Автор

Great video. Learning webpack from scratch for work and I like how he takes you from zero to understanding the basics.

kurtheimerman