Introduction to Webpack

Learn the fundamentals of Webpack, a powerful module bundler for JavaScript applications, through this comprehensive video tutorial series spanning nearly 2 hours. Master the installation process and configuration file setup while discovering how to minify JavaScript code effectively. Explore essential Webpack loaders for handling CSS, SCSS, ES6, and JSHint integration to streamline your development workflow. Understand how to extract CSS using the extract-text-webpack-plugin and implement autoprefixing for cross-browser compatibility. Dive into source maps implementation for better debugging capabilities and learn to create multiple bundles for multi-page applications. Discover the CommonsChunkPlugin for optimizing shared code across bundles and implement automatic page refreshing using Webpack with Browsersync for both static and dynamic sites. Get introduced to Webpack Dev Server functionality and its advanced features to enhance your development environment and build modern, efficient web applications.

Syllabus

Introduction to Webpack: What is Webpack? - Ep. 1
How to Install Webpack, Setup a Config File, and Minify JavaScript - Ep. 2
Webpack Loaders for CSS, SCSS, ES6, and JSHint - Ep. 3
Export Your CSS with the extract-text-webpack-plugin - Ep. 4
Autoprefixing CSS with Webpack - Ep. 5
Source Maps 101 + Webpack - Ep. 6
Creating Multiple Bundles for Multiple Pages with Webpack - Ep. 7
CommonsChunkPlugin Tutorial - Ep. 8
How to Refresh Your Pages Automatically with Webpack and Browsersync | Part 1 (Static Sites)
How to Refresh Your Pages Automatically with Webpack and Browsersync | Part 2 (Dynamic Sites)
Introduction to Webpack-Dev-Server
Intro to Webpack Dev Server - Part II