Question

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

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

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

我想要的是ES6-ish构建（我们拥有的）和一个配套的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”并将其提供。也许不是最可靠的，但是构建也应该可以在现代浏览器上运行，所以我不担心。

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

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

1 个答案: