webpack - 将引导代码包含在两个不同的 block 中

Question

对于特定的用例，我在使用 webpack 时遇到了一些困难，我想知道是否有人已经遇到了这个问题。

所以:

我有 3 个条目:

application: 'src/app.js'
seedFile: 'src/seed.js'
vendor: ['jquery', 'axios', 'otherLibs']

然后我使用 CommonChunksPlugin 作为 vendor 条目

new webpack.optimize.CommonsChunkPlugin
  name: 'vendor'
  minChunks: Infinity

该插件将删除对所选库的所有引用，并将它们仅捆绑在公共(public) block 中一次。

webpack 运行时/引导代码也被捆绑到 vendor.js 文件中，这意味着我必须在我的应用程序中包含两个文件才能使其工作:

<script src="vendor.js"></script>
<script src="application.js"></script>

那完全没问题。

现在我想做的(这就是我正在努力的地方)是 seed 条目将是“独立的”，这意味着我可以使用它而不必提供服务vendor.js 文件，以便实例化运行时/引导代码。

注意:seed 条目不包含对任何vendor 库的任何依赖项。包含该文件的唯一原因只是为了拥有 Web 包引导/运行时代码。

你们知道处理这种情况的最佳方法是什么吗？

谢谢!

Answer 1

我不确定这是否是您想要实现的目标，但您可以执行以下操作:

new webpack.optimize.CommonsChunkPlugin({
  names: ['commons', 'vendor', 'manifest'],
  minChuncks: Infinity
})

在 commons.js 中，您将拥有所有条目的所有通用代码(对于您的特定情况，它可能为空)。在 manifest.js 文件中，您将只有 webpack 引导代码。