Learn Webpack Pt. 9: Multiple Entrypoints & Vendor.js

This 10-part course teaches Webpack from scratch. It begins with a simple question: "What is 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 :)
Find all the code and commits for this course in this Github repo: github.com/Col...
If you're ready to launch your career as a software engineer, check out my job-guaranteed bootcamp with Springboard: springboard.co...

[@michellefernandez805]

All the videos were very well explained. Thank you Colt, first time seeing your content and very happy to have found this.

[@jinwookkim8511]

Best web pack lecture ever already :)

[@firezdog]

"In webpack version < 4 it was common to add vendors as separate entrypoint to compile it as separate file (in combination with the CommonsChunkPlugin). This is discouraged in webpack 4. Instead the optimization.splitChunks option takes care of separating vendors and app modules and creating a separate file. Do not create an entry for vendors or other stuff which is not the starting point of execution." (???)

[@ignaciodelamadrid]

Very nice presentation man. I certainly did understand the objective of different entry points with this. Kudos.

[@mohitdas5292]

Best series on Webpack!

[@kirkanos771]

Very nice series. Kudos to you.

[@cheng6523]

Wondering why put the bootstrap, jQuery and popper.js into dev dependencies?

[@naveenkosgi5640]

I have the same question.

[@ignaciodelamadrid]

Also, I enjoyed this a lot so I think I'll check your whole tutorial from video 1.

[@soyebansari1433]

best tutorial on webpack... correct me If I am wrong, vendor.js should be placed before main.js

[@surbhikohli9682]

I had to import "bootstrap". as well as import 'bootstrap/dist/css/bootstrap.min.css' explicitly .Why does normal import as in the video does not work

[@DK-ox7ze]

If I have multiple bundles, and each bundle has a dependency on some common module (non-vendor), then will that common module be duplicated in both the bundles?

[@filippetkovski9957]

Thank you Sir. Quality content!

[@sharatha6533]

Colt can you please add videos for RX.js

[@nickwoodward819]

It works, but any idea why i'd get this error in Firefox?
Source map error: request failed with status 404 Resource URL: localhost:8080/main.bundle.js Source Map URL: sockjs.js.map

[@LodPod]

Hi colt can you help me, what is the best way to config webpack for bunch of jquery plugins, my config for jquery it self is fine but I want to npm install 2 jquery plugins like mixitup.js and owl.carousel.js, how to import them? Do I need imports-loader or script-loader? Hoping the best suggestions from you

[@LodPod]

Hi, I take back my question, I just need to import the plugins, have a good day

[@bijitashyabirinchi1721]

HI, whats the use of vendor.js file?

[@jinwookkim8511]

I think it's where you put 3rd party libraries like bootstrap, jQuery etc in. Since those libraries are kinda static, (I mean, don't change often.) that's the place to put them in.

[@bijitashyabirinchi1721]

@@jinwookkim8511 I thought we can put them as dependency in package.json file

[@likelupiniii3466]

If anyone runs into an issue with bootstrap not working, try using jquery 3.4, not 3.5. I ran into this issue.

[@likelupiniii3466]

Jquery 3.5.1 is also working now.. Just installed it and all js/dropdowns are working..

[@oscarmoncayo9638]

👌🏻

[@Jubinmail]

The only reason I'm here is because my npm install is still running. meh

[@legnaaasbenoit]

first