Learn Webpack - Full Tutorial for Beginners

Learn Webpack from Colt Steele in this full tutorial course. It begins with a simple question: "What is webpack?" Quickly we move on to installing Webpack, configuring it, and adding loaders for CSS, SASS, HTML, and Files. The course covers cache busting, setting up a dev server, and splitting up your development and production config files. We incorporate multiple Webpack plugins including clean-webpack-plugin, mini-css-extract-plugin, optimize-css-assets-webpack-plugin, terser-webpack-plugin, and html-webpack-plugin. It's a lot of stuff :)

⭐️ Course Contents ⭐️
⌨️ (0:00:00) What Even Is Webpack??
⌨️ (0:08:12) Installing and Running Webpack and Webpack-CLI
⌨️ (0:22:18) Imports, Exports, & Webpack Modules
⌨️ (0:29:58) Configuring Webpack
⌨️ (0:38:57) Loaders, CSS, & SASS
⌨️ (0:53:55) Cache Busting and Plugins
⌨️ (1:07:13) Splitting Dev & Production
⌨️ (1:17:13) Html-loader, File-loader, & Clean-webpack
⌨️ (1:34:45) Extract CSS & Minify HTML/CSS/JS

--

[Elluzive]

Colt is responsible for me going down this web development rabbit hole. I have not seen daylight in a year.

[pouyajabbarisani]

It's about 4 years since I'm using webpack but today I've actually learned it!

[zionsandeep]

Just halfway through the video and I've already understood more than what I got from a paid Udemy course. Though this video is 2 years old, its a fantastic starting point for anyone willing to learn Webpack!
Colt, you're an absolute legend. Thanks!

[asoluka_tee]

The best video on webpack I have seen so far.

When following this video (in 2023), at the point where we use file-loader, you might experience a bug that causes your webpack to build two asset files and then link to the wrong one.
This is due to webpack 5 adding functionality to load assets by default.

To resolve that error, add this to the rules array,

{
test: /\.(svg|png|jpe?g|gif)$/i,
type: "asset/resource",
},

and remove the file-loader config completely.

[LyadhKhorEngineer]

Colt is the reason why I was able to get back into Coding. Thanks for being an awesome instructor in Udemy and everywhere.

[CalmedByNature]

Spent the whole day searching for a tutorial this good. Thank you.

[AshishKumar-UI]

This is one of those amazing tutorials I have watched so far in my entire career. Thank you so much for this detailed explanation. you are awesome...!!

[psychoedge]

Handy down one of the best tutorials I've seen on web technologies. Thanks for making me able to set up a webpack project in a glimpse

[CodeGoblin]

0:36:10 had to use "devtool": false, instead of none due to a breaking change in the latest webpack.
1:15:04 latest webpack 5 package.json script: "start": "webpack serve --config webpack.dev.js --open",
1:24:30 file-loader not needed in webpack 5: Add the following to your webpack.prod.js file
module.exports = merge(common, {
mode: "production",
output: {
filename: "main.[hash].js",
path: path.resolve(__dirname, "dist"),
assetModuleFilename: "./imgs/[name].[hash].[ext]",
},
});
1:42:05 not supporting webpack5, use css-minimizer-webpack-plugin instead per maintainers.<-- you don't need this however as webpack5 will minify for you.

[kevinwagner]

this is such an excellent introduction to the basics and theory of webpack, enough to get a person up and running with their own project or able to competently interact with a current webpack configuration. It's just under 2 hours of video time, however I spent probably a told of 5 hours setting things ups, coding along, etc. Very well worth it

[SameashY]

Always on point, Colt!
In my opinion, this is the only tutorial one would need to understand how webpack works.
Thank you for such a great tutorial.

[chiragparyani]

Best 2 hours spent on a video tutorial in months! Loved it. Thanks Colt!

[benjaminmoseslieb]

One of the best tutorials I've ever watched. And I've watched 15 years worth of tutorials. Thank you so much, subscribing.

[mehra.akshit]

Struggling to grasp the basic concepts of Webpack, I found this video! Best of the best step-by-step explanation. Thank you!

[lilrex]

Wow, this 2 hr video took me 5 days to get through, but I enjoyed every second of it and this helped me much.

[Spykereld]

If anyone is having problems with "merge-webpack"..

On Webpack +5 you must destructure the merge function and CleanWebpackPlugin from the package import:
const { merge } = require('webpack-merge')
const { CleanWebpackPlugin } =

Also, you may have problems with "webpack-dev-server". Instead, you can use "webpack-serve" (without the final 'r')

[matthewstaton]

Love this man. Introduced me to this industry. Appreciate it, Colt.

[mehulgala]

This guy is amazing! Thoroughly enjoyed the mini-course. I must confess I was always a bit intimidated by Webpack but this guy has taken away my mental demons. The content and structure of this course is amazing! Loved it! Thanks, Colt, you are amazing !!!

[joelfernando]

Thanks, thanks and thanks! Literally 2 weeks trying to learn Webpack and just with this course in one day i feel pretty confident to start my own projects and sticking with the docs to do awesome things with module bundling. As always Colt never fails :D

[dankokozar]

Best Webpack tutorial online. Right order of features and the right pace. Kudos!