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

Question

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.

Answer 1

Okay, turns out webpack can handle multiple configs at the same time. Where you would normally do module.exports = { ... config ... } , you can actually return an array of config objects.

So I went for something like this:

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 ]

And that gives me an IE-compatible version of everything. In my templates I just detect "MSIE" in the user agent and feed that out. Probably not the most reliable but build should also work on modern browsers so I'm not concerned.