WebPack: Multiple entry points without additional chunks

Question

I want to use WebPack to build my JavaScript application. The application is supposed to be deployed on several sites, in several different modifications. Therefore, I have set up the config to use multiple entry points, one per each site:

entry: {
  s1: "s1",
  s2: "s2",
  s3: "s3"
},

The application also uses several dependencies, which are loaded via AMD modules (I used RequireJS before):

c1
c2
...

Let's say that s1 requires both c1 and c2, whereas s2 needs only c1. The build works OK, and it creates s1, s2 and s3 as the entry points, and several chunks containing various combinations of the components, as the sites need:

/* s1 */
define(['c1', 'c2'], function(c1, c2) { ... }

The question I have is: What do I need to specify in the configuration in order to get each site package built as one standalone file? I appreciate the ability of WebPack to split the application into chunks, but right now I need every build to be one JS file (for various reasons).

I am able to achieve that easily when I configure only a single entry point (such as entry: "s1"), using the following:

webpack.optimize.LimitChunkCountPlugin({maxChunks: 1})

However, for multiple entry points, this configuration creates one additional chunk on top of all entry points. How can I make sure each built entry point (such as s1.bundle.js, s2.bundle.js, ...) contains all JavaScript inside that one file, and doesn't need to load any chunks on demand?

Answer 1

Sounds like the easiest way is to have multiple builds (each with one entry point) rather than a single build with multiple entry points. If your webpack.config.js exports an array of config objects instead of a single config object, webpack will automatically do a separate build for each config. So you could, for example, put your entry points in an array and loop through it, creating a config object for each. Now each config has only a single entry point, and the LimitChunkCountPlugin should give you the single file.