时间戳

首页 > 解决方案 > Webpack output two builds, one for ES6, one for IE11

javascript - Webpack output two builds, one for ES6, one for IE11

问题描述

I have a webpack configuration of ES5/ES6 modules that works fairly well. Until recently it also ran through TargetsPlugin to generate a IE11-compatible build.

I say "until recently" because while experimenting, I noticed that dropping the babel transpiling to older language specs, we instantly shed 300KB from our bundles. If we turned this on, 90-point-something percent of our users would get a leaner, faster, better experience.

But I'm contractually obliged to support IE11. Can I do that separately?

What I want is a ES6-ish build (what we have) and a companion IE11 build. It's not difficult to target these browsers programmatically when it comes to switching out what version they see... But how do I get webpack to do it?

If it makes any difference, I don't need the IE11 version to have any fancy features. It can be one 1MB amorphous blob, or fully chunked out. However it comes, as long as it works.

标签： javascriptwebpack

解决方案

好的，事实证明 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”并将其输出。可能不是最可靠的，但构建也应该适用于现代浏览器，所以我不担心。

推荐阅读