javascript - Webpack 中具有多个 vendor bundle 的多个入口点

Question

我有几个“单页应用程序”需要在一个总体应用程序中并排运行。为此，我使用 webpack 触发 jsx 和 scss 的转换，捆绑生成的 css 和 js，并将我们编写的应用程序代码与来自第三方来源的应用程序代码分开。

不幸的是，webpack 似乎对它如何捆绑 vendor 文件非常固执己见——它想为我的所有入口点创建一个单一的大型 vendor bundle ，而不是像这样更合理的拆分:

- app1
    - app1.bundle.js
    - app1.vendor.bundle.js
    - app1.bundle.css
- app2
    - app2.bundle.js
    - app2.vendor.bundle.js
    - app2.bundle.css

我特别不想遇到这样的情况:我将一些大型(例如 JQuery)库导入到应用程序 2 中，并将它包含在 vendor bundle 中以供其他不需要它的应用程序使用。我们的许多页面使用完全不同的前端堆栈，如果我为整个 Web 应用程序使用单个 vendor.js 文件，我会很快看到这种膨胀失控。

我还希望自动完成这项工作——webpack 应该能够扫描我的入口点，检测正在导入哪些第三方库(可能通过引用 Node 模块？)，并且只包含那些在该应用程序的 vendor 文件。我不想在我的 webpack 配置 和 require() 我的入口点将第三方依赖项添加到数组中。这似乎很多余。

我同意 app1.vendor.bundle.js 和 app2.vendor.bundle.js 有重叠(即，如果它们都导入 React，它们可以两者都将该代码包含在各自的包中)。我认为这比处理在我网站上运行的某些应用程序子集之间共享的公共(public)文件更容易管理。

有没有办法在 webpack 中单独执行此操作，或者我是否必须编写某种围绕它的自定义解决方案来执行此操作？我见过的所有示例都让人们为他们的整个应用程序编译一个单一的总体 vendor 包。

Answer 1

值得一提的是，webpack 支持一系列配置。在那种情况下，你会写这样的东西:

webpack.config.js

module.exports = [
  {...}, // Your first config
  {...}, // Your second config
]

使用这种方法，您可以为每个页面编写一个配置。

要生成条目 HTML，您可以使用类似 html-webpack-plugin 的东西或 mini-html-webpack-plugin .

如果您以其他方式将 bundle 注入(inject) HTML，那么提取 list ( webpack-manifest-plugin 、 webpack-assets-manifest )会很有用。这为您提供了一个 JSON，然后您可以使用它在您的主机环境中注入(inject)您需要的 HTML。