Webpack for Everyone
Webpack is a wonderful tool for bundling front-end assets. Having said that, it can sometimes be a bit confusing to newcomers who switch over from a more traditional "concatenate these scripts and libraries in this exact order" setup. However, considering the recent release of Webpack 2, there has never been a better time to dive in.
In this series, I'll show you how simple it is to bundle and optimize your assets for production.
Series episodes
Zero Configuration Compilation
7m 7sStart bundling JavaScript with Webpack—no config file needed! Learn to compile effortlessly using just the command line in this beginner-friendly guide.
A Dedicated Configuration File
2m 37sLearn how to set up a dedicated webpack.config.js file to customize your Webpack build and streamline your development process with ease.
Modules Are Simply Files
7m 26sDiscover how modules are simply files! Learn to import/export with ease and explore CommonJS vs ES2015 modules in this friendly guide.
Loaders Are Transformers
4m 51sExplore how Webpack loaders transform files—compile Sass, ES2015, or inject CSS—making your build process flexible and powerful.
ES2015 Compilation With Babel
4m 45sLearn how to write ES2015 JavaScript and use babel-loader with Webpack to compile it into browser-friendly vanilla JavaScript effortlessly.
Minification and Environments
3m 47sLearn how to minify JavaScript with Webpack and Uglify while managing separate configs for development and production environments.
Sass Compilation
4m 24sLearn how to easily compile Sass with Webpack, adding powerful CSS preprocessing to your build for cleaner, more maintainable stylesheets.
Extract CSS to a Dedicated File
5m 22sLearn how to use ExtractTextWebpackPlugin to extract CSS into a dedicated stylesheet, keeping your Webpack builds clean and efficient.
The Relative URL Conundrum
9m 52sUnderstand how Webpack and css-loader handle relative URLs in stylesheets to avoid common pitfalls and streamline your build process.
How to Strip Unused CSS
4m 49sLearn how to use PurifyCSS with Webpack to automatically remove unused CSS selectors, keeping your stylesheets clean and optimized.
Long-Term Caching
6m 5sMaster long-term caching with Webpack file hashing to boost performance by uniquely versioning files for efficient browser and server caching.
Webpack Manifests
3m 39sLearn how to use webpack’s manifest.json to dynamically reference hashed bundles, keeping your HTML up-to-date with changing file versions.
Automatic Image Optimization
5m 37sLearn how to install img-loader for automatic image optimization and cut asset sizes in half to boost your project's performance effortlessly.
Developing Webpack Plugins
8m 59sLearn how to build custom Webpack plugins easily—extend functionality beyond npm packages and tailor your build process to fit your needs!
