VehiclesFashionRecipesBlogsHuntTravelsSportFunHandmadeITEducation
Mini-Games
x

x
zakruti.com » IT - Software » freeCodeCamp.org
Learn Webpack - Full Tutorial for Beginners

Learn Webpack - Full Tutorial for Beginners

FBTwitterReddit

video description

Rating: 4.0; Vote: 1
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 :) - Code and commits: https://github.com/Colt/webpack-demo-app - Colt Steele's YouTube channel: https://www.youtube.com/channel/UCrqAGUPPMOdo0jfQ6grikZw - Colt Steele's Udemy courses: https://www.udemy.com/user/coltsteele/
Date: 2022-03-14

Comments and reviews: 10


I wanted to code along but to type the starting point is difficult when your switching between files and scrolling. Now I am in a detatched state --/dev/webpack-demo-app ( detached:master-11 - )- which is very fusterating because I want to code along and I know my changes would be ignored by git. This is why git fusterates me, it causes more headaches than I am sure webpack will provide.
reply

Sometimes I think I don't want to learn something because I understand it. Know I feel like I need to understand the versioning between webpack, eslint, and babel and I will have a great conceptualize understanding or webpack, building packages, and babel.
reply

Thanks for the video. I have one doubt, never understood this target property. I see target by default is web and it can be node as well. Does it mean I can write my library in commonJS format and then output it like a bundle so that it can run in browser?
reply

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!

reply

1:07 Is you are having problem with running webpack-merge, please notice that the syntax has been changed to: const - merge - = require('''webpack-merge');
If the curly braces are missing, your terminal will throw a type error merge is not a function.

reply

This really helped me! Thanks for taking the time to do this video tutorial!
On thing I would have loved to have seen is using multiple loaders for the same file type, however I am guessing you just have to tweak your regular expression.

reply

Hi! At 1:41:44 why do we install the optimize-css-assets-webpack-plugin with --save-dev if we need it only on production? Isn't the save-dev needed only in case when a package is used only for development? Thank you
reply

Seems like it would be easier just to write your own command line scripts to combine, transform, and bundle the assets. Webpack seems to require a lot code and plugins just to make a file bundle.
reply

When I npm start on webpack-dev-server my browser does not catch the rebuild I have to manually refresh it. What should I do to make my browser refresh itself when new build is done.
reply

Great course, and like many people have commented, you have really helped to demystify the webpack setup in such a simple way and also show us useful things we can do with it - top guy!
reply
Add a review, comment






Other channel videos