Include bootstrap code in two different chunks

Question

I'm struggling a bit with web pack for a particular use case and I was wondering whether somebody already faced this problem.

So:

I have 3 entries:

application: 'src/app.js'
seedFile: 'src/seed.js'
vendor: ['jquery', 'axios', 'otherLibs']

And then I'm using the CommonChunksPlugin for the vendor entry

new webpack.optimize.CommonsChunkPlugin
  name: 'vendor'
  minChunks: Infinity

The plugin will remove all the references to selected libraries and bundle them just once in the common chunk.

The webpack runtime/bootstrap code gets bundled into vendor.js file as well, which means I have to include two files in my application in order to make it work:

<script src="vendor.js"></script>
<script src="application.js"></script>

And that is totally ok.

Now what I would like to do (which is where I'm struggling) is that the seed entry would be "self-contained", which means I can use it without having to serve the vendor.js file in order to get the runtime/bootstrap code instantiated.

Note: the seed entry does NOT contain any dependency to any vendor library. The only reason to include that file is simply to have the web pack bootstrap/runtime code.

Do you guys know what would be the best way to handle this scenario?

Thanks!

Answer 1

I am not sure if that what you want to achieve, but you can do the following:

new webpack.optimize.CommonsChunkPlugin({
  names: ['commons', 'vendor', 'manifest'],
  minChuncks: Infinity
})

Where in commons.js you will have all common code for all of your entries (it may be empty for your particular case). And in manifest.js file you will have only the webpack bootstrap code.