使用Webpack建立品牌明智的

Question

我需要根據品牌進行webpack構建（使用品牌特定的CSS構建）。 我想在建造時將品牌作為一種傳承。 例如，我有兩個品牌brandA和brandB，我將具有以下構建命令。

• npm build --brandA
• npm build --brandB

Webpack中是否存在針對此類品牌明智構建的解決方案？ 請幫忙。

Answer 1

是的，一旦您熟悉了webpack，它真的很擅長這種事情。 您可以通過幾種不同的方法來實現它，但是它們都與您如何設置Webpack配置有關。

1. 為每個“品牌”分別編寫Webpack配置文件。 這是與您的示例最接近的匹配項，因為webpack具有CLI標志，用於指定要使用的配置文件，例如webpack --config webpack.config.brand-a.js

2. 但是，每個品牌的大多數webpack配置可能都是相同的（特別是如果只是CSS發生了變化）。 因此，您不必重復代碼，而是將每個品牌的配置文件中的相同部分分開，或者將每個塊作為單獨的小JS模塊放在項目根目錄的/ webpack目錄中。 因此，您有一個用於加載程序配置的模塊，一個用於插件配置的模塊，等等，並且您的配置文件每個都require / import這些模塊。 現在，您的配置文件中包含更少的樣板文件，並且大部分只是因構建而異的部分。

3. 一旦開始拆分webpack配置，就有許多方法可以組織它。 盡管正常的webpack配置格式是導出單個配置對象，但它也允許您從配置文件中導出配置對象的數組-在這種情況下，webpack會對導出的數組中的每個配置對象進行單獨的構建。 因此，另一種實現方法是單個webpack.config.js文件，您在其中編寫一些代碼來遍歷各個品牌，然后針對每個品牌，將配置對象推入數組中，然后導出整個數組。 這樣做的好處是，您可以使用一個命令來運行所有構建，因為webpack會為每個構建創建單獨的進程。

4. 提醒一下-建立時間可能會很長。 （盡管自v1.x以來我還沒有對此進行深入研究，而且情況可能會變得更好。）如果您進行了大量構建，您可能會發現值得研究一下webpack優化來加快這一過程。