I was advised to use webpack because at one point I would’ve eventually ended up with lots of scripts and webpack would’ve saved me time by requiring me to only use one script tag to import the final bundle.

Let’s say I have script1 which imports pkg1 and script2 which imports pkg2. Webpack will create a vendor bundle which contains both packages. Now if I only need script1 in one page, that means webpack will load both pkg1 and pkg2 because they’re bundled together. Pretty obviously this is bad for performance.

Reading online I found that you can create different bundles for different packages, but then that would defeat the purpose why I started using webpack because I’d have to add a script tag for each bundle.
Using html-webpack-plugin is not an option because I’m working with Razor views.

As if that wasn’t enough, webpack changes the vendor bundle’s file name to mention all contained packages which means that if I add or remove a package import, the name will change and I’ll have to update the script tag.

Can’t I simply make it so that webpack will load packages on-demand based on ES6 import statements?