javascript - 如何在不链接到所有其他 Assets 的多个页面中捆绑 Webpack Assets ？

Question

Webpack 有一些我无法理解的地方。

大多数 webpack 示例显示了一个主要入口点 app.js，它导入 所有 Webpack 的其他 React 组件以递归构建结果文件。如果有多个入口点，比如 pageA.js 和 pageB.js，我们将它们放入入口参数的数组中。

然而，我的问题是我的“主要”入口点没有使用和导入每个组件。也许只是一些。在 PageA 上，我可能只导入 ComponentA 和 ComponentB。在 PageB 上，我可能只导入 ComponentB 和 ComponentC。然后在我的 MainPage 的 main.js 中，我可能只导入 ComponentD。

我可以将 main.js、PageA 和 PageB 全部放入我的入口点。但是这是否意味着我每次有新页面时都必须添加到 webpack 配置中的条目列表？

我应该如何使用 Webpack 处理这种情况？

Answer 1

听起来您的设置是一个典型的 webpack 多页面应用程序，它通常由公共(public)/vendor 包(入口点)和每个页面的单独包(入口点)组成，例如您的 PageA 和 PageB。

对于每个页面，您需要首先包含通用/vendor 包，然后包含页面特定包。

<script src="common.js">
<script src="PageA.js">

看看multiple-entry-points和 multiple-commons-chunks . Webpack 可以自动提取公共(public) deps 并将它们捆绑在一起(第一个示例)，或者您可以指定哪些 dep 应该进入哪些公共(public) chucks(第二个示例)。也看看 common-chunk-and-vendor-chunk ，这完美地解释了普通卡盘的工作原理。

根据您的描述，您的设置与第一个示例(多入口点)非常相似。

是的，当您有一个新页面时，您可能需要添加一个新条目，例如 PageC。