Webpack：使用多个构建目标

Question

给定一个带有 Webpack-buildprocess 的 (Angular-)Webapp，我想在我的 Webpack 配置中添加几个构建目标。

有很多关于如何在编译时修改 webpack.config 的教程，这对于运行 dev 和 prod 构建已经很有帮助（并且可能是我所需要的）。

但是我希望有一种方法可以对构建过程进行参数化，以便为构建过程使用不同的文件。

问题

如何配置 Webpack 以在构建步骤期间将所有 *.js/ *.html-Files 替换为名为 *.mobile.js/ *.mobile.html 的文件（如果可用）？

额外问题： 如何通过 webpack-config 排除特定环境的 import 语句？

示例

我有几个通过 Angulars $stateprovider 链接的视图/控制器对。在 web 应用的移动版本中，大部分 HTML-views 应该是移动优化模板。

如果我使用 webpack 的多个入口点来生成桌面版本和移动版本，我将不得不为我的每个构建目标重写每个需要或导入 HTML 文件的文件并指定新文件名手动。

这会导致大量代码重复并且难以维护。

Answer 1

我最终在我的 webpack.config 中使用了以下内容

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

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