如何在不链接到其他所有资产的多个页面中捆绑 Webpack 资产？答案

【问题标题】：How to bundle in Webpack assets in multiple pages that don't link to every other assets?如何在不链接到其他所有资产的多个页面中捆绑 Webpack 资产？
【发布时间】：2016-10-31 11:28:09
【问题描述】：

关于 Webpack，我有一些不明白的地方。

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

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

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

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

【问题讨论】：

标签： javascript reactjs webpack

【解决方案1】：

听起来你的设置是一个典型的 webpack 多页面应用程序，它通常由公共/供应商包（入口点）和每个页面的单独包（入口点）组成，比如你的 PageA 和 PageB。

对于每个页面，您需要先包含通用/供应商捆绑包，然后再包含页面特定捆绑包。

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

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

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

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

【讨论】：

这是否意味着如果我有 5 个页面，我需要有 5 个多个入口点？如果我的网站继续增长，我还必须在配置中增加我的入口点列表吗？
@Carven 是的，如果你正在构建多页面应用程序，或者你可以构建一个单页面应用程序，它通常只有一个主条目，并且可以选择有一个供应商条目。或者，您可以使用 webpack.config.js 以编程方式扫描项目中的入口点 js 文件，并自动聚合条目列表，因为 webpack 由 node.js 运行。

【解决方案2】：

Webpack 的配置实际上是一个 JS 模块。这意味着您返回的对象可以通过编程而不是手动构建。

你想要的是将 webpack 发送到handle chunks optimization properly for you。这与以编程方式确定您拥有的页面一起，应该允许您生成所有资产。

【讨论】：