Webpack输出两个版本，一个用于ES6，一个用于IE11

Question

我有一个不错的ES5 / ES6模块的webpack配置。 直到最近，它还通过TargetsPlugin运行以生成与IE11兼容的版本。

我说“直到最近”，是因为在进行实验时，我注意到将babel转译成旧语言规范后，我们立即从捆绑包中删除了300KB。 如果启用此功能，则90％左右的用户将获得更精简，更快， 更好的体验。

但是，根据合同，我有义务支持IE11。 我可以分开做吗？

我想要的是一个ES6版本的构建（我们所拥有的）和一个伴随的IE11版本。 在切换浏览器看到的版本时，以编程方式定位这些浏览器并不难...但是如何获得webpack的支持呢？

如果有什么不同，我不需要IE11版本具有任何精美的功能。 它可以是一个1MB的无定形斑点，也可以完全分块。 只要它起作用，它就会来。

Answer 1

好的，事实证明webpack可以同时处理多个配置。 通常在执行module.exports = { ... config ... } ，实际上可以返回一个配置对象数组。

所以我去了这样的事情：

var realConfig = {
  ...
}

var ie11 = _.cloneDeep(real)
ie11.output.filename = 'js/ie11.[name].js'

ie11.plugins.push(
  new TargetsPlugin({ browsers: ["IE >= 11"] })
)

module.exports = [ realConfig, ie11 ]

这给了我所有内容的IE兼容版本。 在我的模板中，我只是在用户代理中检测到“ MSIE”并将其提供。 可能不是最可靠的，但是构建也应该可以在现代浏览器上运行，因此我不担心。