Webpack 5 Crash Course - Full Tutorial for Beginners in 1h | Udacity in Arabic شرح

Опубликовано: 27 Август 2021
на канале: Mohammed Elzanaty

3,204

102

Learn Webpack from Colt Steele in this full tutorial course. It begins with a simple question: "What is a 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 :) the content inspired by Colt Steele's 🔗    / @coltsteelecode   but he is using webpack version 5

▬ Contents of this video ▬▬▬▬▬▬▬▬▬▬
⌛️ 00:00:00 - Motivation
⌛️ 00:00:51 - Pre-webpack version of our simple app
⌛️ 00:07:08 - Break code into separate scripts, no webpack
⌛️ 00:14:22 - Installed webpack
⌛️ 00:19:24 - Webpack now bundling all our app code
⌛️ 00:28:28 - Add webpack config file
⌛️ 00:38:00 - Add first loaders to handle css
⌛️ 00:48:08 - Add Sass loader, override bootstrap colors
⌛️ 00:56:00 - Cache busting , HtmlWebpackPlugin , html-loader, file-loader, and clean-webpack-plugin
⌛️ 01:11:00 - Add prod and dev configs, dev-server
⌛️ 01:14:32 - Minify JS, CSS, and HTML in production

▬ 🔗 Resources ▬▬▬▬▬▬▬▬▬▬
⭐️ Code: https://github.com/mohammedelzanaty/w...

▬ 🔥 Contact Me ▬▬▬▬▬▬▬▬▬▬

BIO: https://moelzanaty3.bio.link/
💖 Become a Patron: Show support & get perks!   / mohammedelzanaty
☕️ You Don't need to meet me to buy a coffee: https://www.buymeacoffee.com/moelzanaty3
🔗 GitHub: https://github.com/moelzanaty3
🔗 LinkedIn:   / moelzanaty3
🔗 Twitter:   / moelzanaty3
📪 [email protected]

▬ ⚙️ My Equipment Gear ▬▬▬▬▬▬▬▬▬▬
🌟 https://kit.co/mohammdelzanaty/my-you...

▬ 🎨 My Editor Settings ▬▬▬▬▬▬▬▬▬▬
🌟 I made a video for you about this    • My Code Editor:  Visual Studio Code, ...
🌟 Night Owl Color Theme
🌟 Dank Mono Font
⭐️ My Visual Studio Code Extensions https://gist.github.com/mohammedelzan...