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

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:

Beatz:
Immortal Beats - Oh Wee - Creative Commons

Support Chris Courses Through Patreon:
--------------------------------------

Chris Courses Social:
---------------------

Christopher Lis Social:
-----------------------

[inolas]

Great tutorials.
It would be great if the volume of background music is low. Thanks

[BenThies]

i know this is 6 years old, but it really helped, thank you so much

[Zeiwon]

Based. This is exactly what I needed. Thank you!

[ankit]

This was a really helpful video
Thank you Chris

[madebyward]

Thank you so much! I was really stuck in my React app until I found your tutorial and your method of splitting the bundle.js solved it.

[sameerpatil]

can modules be specified dynamically, like for one build for only home and one build with both home and about, specifying which modules to build in build script ?

[muneebsha]

can we do for one bundle.js with two separate SCSS file for multiple page?

[truongtrinhvinh]

can i use this way to config mutiple page for react ?

[Mirzly]

Thank you so much. Just what I was looking for.

[mdjaman]

thank you so much :-) thank you so much :-) thank you so much :-) excellent tutorials

[Korutz]

What's the difference between keeping one config with multiple JS files in entry array like you did
vs
exporting from webpack.config.js an array of separate configs, with each config corresponding to one page only and with one JS file in its entry?

[denisfrolov]

Glad you back!!! Great job as always! I have a question that would be probably too long to answer here, thus I'm not expecting from you any deep detalization, but if you maybe could just point me to a right direction: I have Angular application, been bootstrapped from one file, which means index.html has only one bundle.js script tag. App has multiple pages (html files) controlled by multiple components(controllers) - .js files. Non of those html files has script tag. So how do I optimize here?

[nickwoodward]

Can you turn up the music slightly please, I'm still learning