webpack : multiple entry points

Question

I was looking at this webpack config file and I don't quite understand what happens if more than one entry point is given (as in the example below).

Is it so that the entry points serve as starting points for the dependency search and then the union of the resulting dependencies is what ends up in the bundle ?

'use strict';

var webpack = require('webpack');

module.exports = {

    entry: [
        'webpack/hot/only-dev-server',
        './index.js'
    ],
    output: {
        path: __dirname + '/build',
        publicPath: __dirname  + "/build/",
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ]


};

I looked at the doc but it does not explain what the above config does.

Furthermore, here it is written:

If you pass an array: All modules are loaded upon startup. The last one is exported.

entry: ["./entry1", "./entry2"]

What is the difference between loading a module and exporting one ?

Answer 1

Exactly!!

As you can see on this example, with multiple entry points you create 2 or more bundles starting from entry point selected. However you probabliy duplicate (or more) your dependency code in your bundles. Your config, at the moment, perform this task without any kind of optimization.

In the example linked, it uses the common chunk plugin that creates another bundle with common code of entries (to include before the others), useful for multipage webapp.

If you want to add the common chunk plugin, you can simply add this code to your config:

plugins: [
    new CommonsChunkPlugin({
        filename: "commons.js",
        name: "commons"
    })
]

On this page can find more example (like multiple commons chunk)

Regarding entry argument:

• if you pass a String (entry: 'entry.js'), webpack create one bundle starting from it.
• if you pass an array (entry: ['entry1.js', 'entry2.js']), it create a bundle starting from entry2, named entry2, and load (and parse) entry1.
• if you pass an object (entry: {entry1: 'entry1.js', entry2: 'entry2.js'}), it create two different bundle starting from entries and named as entry key of object.
• if you use a mixed mode like this entry: {entry1: 'entry1.js', entry2: ['entry2_1.js', 'entry2_2.js'] }, webpack create a bundle named entry1 starting from entry1.js, and another bundle named entry2 strating from entry2_2.js, but loading firt entry2_1.js.

note that, passing an array of entry, only last is exported, the other js are only loaded.