The Webpack documentation allows for the possibility of an object with arrays of strings for values being passed to the entry property of Webpack config.
e.g.
Usage: entry: {[entryChunkName: string]: string|Array<string>}
However the documentation does not discuss what this actually means. Is this the equivalent of multiple entry points? Does this cause any different behaviour?
Here is an example of it being used in a project serverless/aws-nodejs-typescript.
An entry point can be defined in 3 ways:
1)
entry: {
main: './src/index.js',
dashboard: './dashboard/dashboard.js'
}
This creates a file for every single property in the object.
2)
entry: './src/index.js'
The usual configuration, not much different.
3)
entry: ['@babel/polyfill', 'src/index.js', 'otherfile', 'other something']
The only difference between defining as an object and defining as an array is that as an object webpack creates more than one "main" bundle file, it is also a code splitting strategy.
When defining as an array, webpack will look for dependencies in all these files and put them into the same "entry" file, basically it is categorized as 1 single file.
What is happening with that project you linked is a combination of 1 + 3, which we could say it is a "4". That creates an object for each entry and each entry on that object is composed by an array of different other libraries.
Passing an object to the entry means that you want to provide more details to that entrypoint. So the question becomes: what's the different between providing single and multiple file(-path) to each entry?
And you also copy-paste the key info. to understand this topic:
Usage: entry: { <entryChunkName> string | [string] } | {}
Each entry will create a chunk, which can be thought of as just a file. This is why it uses the name entryChunkName. When you provide an array of paths to it, you're providing many modules that will be loaded into that chunk.