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

Question

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处理这种​​情况？

Answer 1

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

对于每个页面，您需要首先包含公共/供应商包，然后包含特定于页面的包。

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

看看多入口点和多个公共块 。 Webpack可以自动提取公共deps并将它们捆绑在一起（第一个例子），或者你可以指定哪些deps应该进入哪个常见的chucks（第二个例子）。 还可以看看common-chunk-and-vendor-chunk ，它完美地解释了常见的chuck工作原理。

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

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

Answer 2

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

你想要的是webpack 正确地为你处理块优化 。 这个以及以编程方式确定您拥有的页面，应该允许您生成所有资产。