What are the point of webpack "runtime" files

user_1416438 0
Viewed 13753

I am using webpack today for transpiling just my core business logic code, but are still using a CDN for all external libraries like jQuery, AngularJS, etc. I want to move these vendor libraries into webpack by using the SplitChunksPlugin, but when I followed an example I found here at SO I got the vendor bundle to get created, but at the same time it also created some extra files I am not sure about.

For every entry module I have declared in the webpack config, webpack not also creates a "runtime" version of these files"

For example I have a company.productA.core.bundle.js taht I have been using for a while but after adding the config for the split chunks I now also get a company.runtime~productA.core.bundle.js. Webpack has done the same for the other 8 modules I have being created.

I have tried searching for what these are but don't see anything about them on both the webpack documentation and SO.

Can someone explain to me what these files are meant for?

webpack
2 Answers

Each of the runtime files contains code that enables loading of your chunks. If you open any of those runtime files, you will see code that loads your chunks via Jsonp. Since you have asked webpack to split chunks, you are now free to load any chunk any time. Hence for each chunk, webpack emits these runtime files so that it can handle requires correctly.

user_39552830

If you split bundle to multiple chunks (e.g. for each page), and for some reasons want to use several chunks on one page, you could faced with some problems. For example, by default, when you need singlton, especially when import the same library in both chunks, each of chunk would have different instance of singlton or library and it could be a problem. To solve this and have only one instance shared between chunks, you need to use runtimeChunk: 'single' inside webpack optimization section.

So, webpack docs has this warning:

Imported modules are initialized for each runtime chunk separately, so if you include multiple entry points on a page, beware of this behavior. You will probably want to set it to single or use another configuration that allows you to only have one runtime instance.

More info

user_106587090
Related