What is the purpose of Webpack's entry.main?

Question

I'm looking over the source code found in sound-redux, a repo found here on github: https://github.com/andrewngu/sound-redux. While looking through the webpack.config.js I wasn't able to figure out what entry.main was doing.

module.exports = {
  // ...
  entry: {
    main: [
        './scripts/main.js',
        'webpack-dev-server/client?http://localhost:8080',
        'webpack/hot/only-dev-server'
    ]
  }
  // ...
}

What is actually happening here and how is this being used by this app? The documentation is completely silent on this feature as far as I could find.

Answer 1

The entry inside module.exports signifies the entry point of the application. Now what main is is an example of multiple entry points. main is the key for the array in the object of entry point paths and is used as a name. Consider this Webpack configuration:

module.exports = {
    ...
    entry: {
        app: ['./path/to/main.js', './somewhere/else/index.js']
    },
    output: {
        path: "to/somewhere",
        filename: "[name].js"
    }
    ...
}

What this will do is set an entry point to an application to multiple files for Code Splitting and output to a single JS file named app.js, due to the label given, app.

Read more about it at the Webpack Docs.

Answer 2

    {
     context: __dirname + "/app",
     entry: "./entry",
     output: {
         path: __dirname + "/dist",
         filename: "bundle.js"
     }
  }

entry is the entry point for the bundle. If you pass a string: The string is resolved to a module which is loaded upon startup. So here in above example context: __dirname + "/app" is the directory of entry point and entry: "./entry" is the entry file name. The output of will be a bundle file filename: "bundle.js". You can give any name to bundle file.

Nicely explained here

http://ui-codeman.blogspot.in/2017/02/webpack.html?view=sidebar