Question

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

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

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

问题

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

Bonusquestion： 如何通过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']
}