我有一个基于品牌进行 webpack 构建的要求(使用特定于品牌的 css 来构建(。我想在构建时传递品牌作为一种感觉。例如，我有 2 个品牌 brandA 和品牌 B，我将有如下构建命令。
- npm build --brandA
- npm build --brandB
在 webpack 中，有没有针对这种品牌明智构建的解决方案？请帮忙。
是的，一旦你熟悉了它，webpack 就非常擅长这种事情。有几种不同的方法可以解决这个问题，但它们都与你如何设置 webpack 配置有关。
-
为每个"品牌"编写单独的 webpack 配置文件。这是与您的示例最匹配的，因为 webpack 有一个 CLI 标志，用于指定要使用的配置文件，例如
webpack --config webpack.config.brand-a.js -
但是对于每个品牌，您的大多数 webpack 配置可能是相同的(特别是如果只有 CSS 在更改(。因此，与其使用重复的代码，不如将每个品牌的配置文件中相同的部分拆分出来，也许可以将每个块作为单独的小JS模块放在项目根目录的/webpack目录中。因此，您有一个用于加载器配置的模块，一个用于插件配置等的模块，并且您的配置文件每个
require/import这些。现在，您的配置文件中的样板文件要少得多，并且大多只是因构建而异的部分。 -
一旦你开始拆分你的 webpack 配置，有很多方法可以组织它。虽然正常的 webpack 配置格式是导出单个配置对象，但它也允许您从配置文件中导出配置对象数组 - 在这种情况下，webpack 将为导出数组中的每个配置对象进行单独的构建。因此，实现这一点的另一种方法是单个
webpack.config.js文件，您可以在其中编写一些代码来迭代品牌，并为每个品牌将配置对象推送到数组中 - 然后导出整个数组。这样做的好处是您可以使用单个命令运行所有构建，因为 webpack 负责为每个构建创建单独的进程。 -
警告一句 - 构建时间可能会变得非常长。(尽管自 v1.x 以来我就没有深入研究过它，而且事情可能已经变得更好了。如果你构建了很多，你可能会发现值得研究 webpack 优化以加快这个过程。