Learn Webpack Pt. 6: Cache Busting and Plugins

Показать описание

This 10-part course teaches Webpack from scratch. 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 :)

Рекомендации по теме

Комментарии

What cruel person could have downvoted this pure gold content? Must be a up-side-down-mobile issue or smth.

IWasHereFirst

This series has solved so many puzzles. So thankful.

ziekdesign

Awesome series first I was so Intimidated from loaders and plugins, but now its all making sense thanks you so much man :), just one Q please:
Does the browser cache CSS automatically?
Cheers

osherezra

why did you not use `html-loader`, isn't that supposed to be used for loading html?

frfou

In webpack 5, i believe you need to use [contenthash] with an "h" instead of an "H" or it won't work

diegoh.ohagan

If [contentHash] doesn't work for you try [contenthash] with lower h.

KarahannAe

This series is a punch in the face for me. I've been a React developer for 2 years, every time I start a new project, the configurations are already tackled by create-react-app. It makes me feel webpack is scary. Not now. Thanks a lot.

asadsalehumar

For those people whose [contentHash] is not working, use [contenthash] instead

shyamiy

If you're concerned that the script is being put in <head>, you can add parameter inject: 'body' to the config like this:
plugins: [new HtmlWebpackPlugin({
template: "./src/template.html",
inject: 'body'
})],

parampampam

In part6, be sure to use contenthash all lowercase instead of contentHash

mangaboss

Really this playlist has taken away all my fears about webpack. Thank You Colt!

official.mhm

Best Webpack course on YouTube. Thank you!

mohamedyoussef

Thank you so much, Colt! Your videos made me like web development. I really appreciate your valuable and professional content! And this video just helped me with browser caching issues after each deployment.

joseff

I am using requirejs, how to import dynanic filename in requirejs dependency?

techno_abhishek

Its nice Colt but I am lookig for the solution, how can we implement this in angular

KnownTechnical

hi, how would cashing work if your are using a cdn to host your site like cloudflare. cloudflare caches a version of your site on their servers, so when certain users request your site, they are getting the cache version of cloudflare. So how can you make cloudflare fetch your code updates and update its cache?

kandebabou

Thank you for this course. You have made webpack so easy to understand!

brunaleao

10:24 I don't think the <meta> tag that is being deleted is the bootstrap cdn link.

sydrawat

This series is awesome. I never thought of that I will understand webpack in such details. Thanks a lot. ❤️

PoojaSharma-btzh

You have answered a lot of questions running over my head. Awesom and Thanks.

navin-moorthy

Learn Webpack Pt. 6: Cache Busting and Plugins

Learn Webpack Pt. 6: Cache Busting and Plugins

Learn Webpack Pt. 1: What Even Is Webpack??

Learn Webpack - Full Tutorial for Beginners

Learn Webpack Pt. 10: Extract CSS & Minify HTML/CSS/JS

Learn Webpack Pt. 9: Multiple Entrypoints & Vendor.js

6. webpack и кеширование

Webpack 5 Crash Course | Frontend Development Setup

Learn Webpack Pt. 7: Splitting Dev & Production

Learn Webpack Pt. 8: Html-loader, File-loader, & Clean-webpack

Webpack caching pt 1 - Hashing

what is cache busting? #shorts

Learn Webpack Pt. 4: Configuring Webpack

Learn Webpack Pt. 5: Loaders, CSS, & SASS

Webpack caching pt 3 - Extracting the Webpack runtime

The HARDEST part about programming 🤦‍♂️ #code #programming #technology #tech #software #developer...

Leverage browser caching with webpack hash | Webpack tutorial

Everything you need to know about HTTP Caching

How To | Cache Buster | (SAP Edition)

Senior Programmers vs Junior Developers #shorts

Long-term asset caching with webpack

9. Webpack : Vendor Caching

The ultimate guide to web performance

Webpack-Dev-Server serves files from both cache and /dist/

Speed Up Your React Apps With Code Splitting