Webpack的entry.main有什么作用？

Question

我正在研究在github上发现的sound-redux仓库中的源代码：https://github.com/andrewngu/sound-redux。当我查看webpack.config.js时，我无法弄清entry.main是做什么用的。

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

这里实际上发生了什么，这个应用程序如何使用它？据我所知，文档中完全没有提及此功能。

- sloansparger

Answer 1

module.exports中的entry表示应用程序的入口点。现在，main是多个入口点的一个示例。 main是入口点路径对象数组中的键，并用作名称。考虑以下Webpack配置：

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

这将会把应用程序的入口点设置为多个文件，以实现代码分割并输出到一个名为app.js的单个JS文件中，由于给定的标签是app。

在Webpack文档中了解更多信息。

- Andrew Li

Answer 2

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

entry是打包的入口点。如果传递一个字符串：该字符串将解析为在启动时加载的模块。在上面的例子中，__dirname + "/app"是入口点的目录，entry: "./entry"是入口文件名。输出将是一个捆绑文件，文件名为："bundle.js"。您可以给捆绑文件任何名称。

这里解释得很清楚

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

- Raj Rj