Creating Multiple Bundles for Multiple Pages with Webpack - Ep. 7

Chris Courses

code splitting efficient entry point javascript multiple bundles multiple entry points web perf webpack

description

🚀View more development courses and content at https://chriscourses.com/

Typically, webpack will store our code in one big bundle which can be good because it decreases the amount of requests made to our server—however—if we’re putting everything into one file, we’re forcing the user to load excess code that the page may not need in order to function.

So how do we make use of module bundling while still creating specific scripts for specific pages? The answer is having multiple entry points that compile into multiple bundles. In this tutorial, I’ll teach you exactly how to implement this using web pack.

Timeline: 0:10 - Why we’d want to create multiple bundles 0:32 - Project overview 1:14 - Adding multiple entry points 2:20 - Using webpack to compile multiple bundles 3:36 - Adding bundles to our HTML 5:21 - Outro

Resources: https://webpack.github.io/docs/multiple-entry-points.html

Beatz: Immortal Beats - Oh Wee - Creative Commons

For updates on the progress of chriscourses.com and future videos, join the Chris Courses mailing list at http://chriscourses.com.