用于多页面应用程序的Webpack配置文件

Question

我的团队在多页网站上工作，到目前为止我们使用了JS和一些angularjs。 我们考虑尝试Reactjs，因此我们添加了一个用jsx编写的页面，我们还使用webpack进行捆绑（由babel编译）。

现在我们有了这个页面，我们想用Reactjs扩展我们的工作。我们首先考虑的是分割那个（相当长的）文件。它究竟意味着什么？我们在其中定义了一些组件，第一步我们希望将每个组件都放到一个单独的文件中。我的问题是关于Webpack的输入部分。我找不到比将jsx中明确写入的每个文件明确添加到条目部分更好的方法。它甚至在Wepback文档中进行了描述：https://webpack.js.org/concepts/entry-points/#multi-page-application

这真的是唯一的方法吗？ 几个星期后，我希望我们至少有50个包含页面，组件和其他内容的文件。大项目中的webpack文件是否包含所有文件？

感谢。

Answer 1

您不需要将每个jsx文件添加到条目部分。您只需要添加条目点。

对于您正在构建的组件，您可能拥有主要组件（最顶层，例如App.js）导入或需要其他（子）组件。您只需要将顶级或主要组件添加到条目部分。

webpack所做的主要工作是遍历模块图（每个import或require），并根据顶级组件（通常是整个应用程序）将所有内容整合到一个包中。

Answer 2

在js文件中使用导入和导出，并拥有webpack查看的1个主文件