Webpack：使用多個構建目標

Question

給定一個具有Webpack-buildprocess的（Angular-）Webapp，我想向我的Webpack配置中添加幾個構建目標。

有很多關於如何在編譯時修改webpack.config的教程，這對於使dev和prod構建運行已經很有幫助（也許是我所需要的）。

但是，我希望有一種參數化構建過程的方法，以便將不同的文件用於構建過程。

題

我如何配置Webpack在構建步驟中將所有*.js / *.html -Files替換為名為*.mobile.js / *.mobile.html文件？

獎勵問題：如何通過webpack-config排除特定於環境的import語句？

例

我有幾個通過Angulars $stateprovider鏈接的視圖/控制器對。 在webapp的移動版本中，大多數HTML視圖應該是針對移動設備優化的模板。

如果我為Webpack使用多個入口點來生成桌面版本和移動版本，則必須重寫每個文件，這些文件是我的每個構建目標所必需或導入的HTML文件，並手動指定新文件名。

這將導致大量的代碼重復，並且難以維護。

Answer 1

我最終在webpack.config中使用了以下內容

const target = env && env.mobile ? 'mobile' : 'desktop'

resolve: {
    extensions: [`.${target}.js`, '.js', `.${target}.html`, '.html']
}