How to manage external library dependencies for multiple entries in webpack?

Question

In our projects, we have multiple webpack entries. They have dependencies for 3rd-party libraries (e.g. angularJS, fileAPI and so on). What we would like to achieve are:

• external dependencies will NOT be bundled together with the our own entries.
• external dependencies will be referenced separately. We don't want to reference them as a single bundle. As result, they can be loaded in parallel.
• these references could be fulfilled automatically. We hope to use require in our own entries and let webpack automatically load them for us.

Answer 1

You can achieve your first two bullet points.

1. Yes, external dependencies/libraries could be different entry point something like

   ...
   vendor: ["jquery", "underscore", ...],
   ...
   

   and add the CommonsChunkPlugin plugin to your plugin list.

   new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bundle.js")
   

2. Ok, if you don't want to bundle them, and want to reference as a separate file, you can make separate entry point for each libs/dependencies or you can use script tags to load them separately.

   ...
   dep1: 'dep1',
   dep2: 'dep2',
   ...
   

3. No, you can't achieve this point as webpack bundles whatever require-d with your own entry point and their reference files until unless you use code-splitting feature.