Thursday, 11 May 2017

How does Webpack dependency graph make life easier?

I'm not sure if I'm grasping the dependency graph correctly, so I would like to explain it and be corrected if I'm not seeing it right:

Before webpack, developers would put a lot of script tags at the bottom of their index.html and that would be bad because:

  1. global variables such as jquery might be rewritten by a plugin in script #2 but would not work with script #3 because script #3 needs vanilla jquery
  2. All the scripts were served and ran by the client regardless of what page they were on. So even if you only needed scripts A, C, and D, you would have to get scripts A, B, C, and D

Webpack solves these problems by:

  1. scoping out each javascript file (module) so that script#2 was only rewrite jquery in its own scope and will not taint the original jquery object, which is needed by script#3
  2. The dependency graph means that if your page only needs scripts A, C, and D, it will only run those scripts


via mangocaptain1

No comments:

Post a Comment