的WebPack普通模塊更換爲品牌

我工作的一個品牌化的產品，我有如下文件夾結構：的WebPack普通模塊更換爲品牌

-> default js folder 
-> brands folder 
----> a brand 
--------> js 
------------> brand specific js file

我想重寫一個品牌特定的Javascript默認文件文件（這兩個文件都具有相同的名稱 - 例如，我在每個文件夾中都有一個profile.js文件），而Webpack上的捆綁正在進行中。我發現了一種正常模塊替換的方式，但我無法實現。

我該怎麼辦？有人可以分享一個示例Webpack配置嗎？

來源

2017-06-05 Okan Vurdu

根據我的理解，您需要分別捆綁每個品牌，那麼如何簡單地使用'resolve.alias'並將品牌名稱作爲環境變量？ –

如果能行，解決方案目前並不重要。那麼我怎麼能做到@EvanSebastian？ –

另外，我想強調一點：我有所有品牌的默認js文件。但是如果需要的話，我應該覆蓋品牌的默認品牌。 –

您可以使用解析別名來覆蓋基於配置解析文件（在本例中，品牌名稱或回退爲默認值）。下面是一個簡單的例子：

const path = require('path'); 
const brand = process.env.BRAND; 

// Then add this to your Webpack config 
{ 
... 
resolve: { 
    alias: { 
    brand: brand 
     ? path.resolve(__dirname, 'src', brand) 
     : path.resolve(__dirname, 'src', 'defaultDirectory'), 'profile.js') 
    } 
} 
}

之後，當你需要捆綁了一定的品牌，只是在環境變量設置BRAND=somebrand。無論何時你做import Profile from 'brand/profile'和import Contact from 'brand/contact'，它將分別解析爲./src/somebrand/profile.js和./src/somebrand/contact.js。如果未定義BRAND，它將回退到缺省值./src/defaultDirectory/profile.js和./src/defaultDirectory/contact.js。

你可以看到documentation

來源

2017-06-05 13:08:18

感謝您的幫助埃文，但我不知道哪個文件是需要重寫，它可以是另一個文件，如'posts.js'那麼呢？有沒有一種通用的方法來解決它？ –

是的，放下$並將其更改爲「品牌」。然後所有相關的導入都會被覆蓋，我會更新答案 –

爲了完整起見更多的使用，我想補充一點，對於路徑的WebPack重寫插件：path-override-webpack-plugin。他們明確提到皮膚作爲使用它的主要目的。它允許你定義一個覆蓋路徑，插件將在覆蓋目錄中查找文件的所有實例，並回退到缺省路徑。

在你的情況，你只需指定一個覆蓋這樣的：

// webpack.config.js 
import PathOverridePlugin from 'path-override-webpack-plugin' 

const webpackConfig = { 
    plugins: [ 
     new PathOverridePlugin(/whitelabel/, 'brandname') 
    ] 
}

當然，則應代替whitelabel和brandname使用正確的regexp和string值，根據項目的需要。

我仍然喜歡所選的答案，但在某些情況下，這可能是更清潔的解決方案。

來源

2018-01-08 13:49:39

的WebPack普通模塊更換爲品牌

回答

相關問題