多页面应用的 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 文件中使用导入和导出，并有 1 个 webpack 查看的主文件