Webpack выдает две сборки, одну для ES6, одну для IE11

Question

У меня есть webpack-конфигурация модулей ES5 / ES6, которая работает довольно хорошо. До недавнего времени он также запускался через TargetsPlugin для генерации IE11-совместимой сборки.

Я говорю «до недавнего времени», потому что, экспериментируя, я заметил, что, опуская бабеллу, переходящую к более ранним языковым спецификациям, мы мгновенно теряем 300 КБ из наших пакетов. Если бы мы включили это, процент наших пользователей на 90 пунктов получал бы более тонкий, быстрый, лучший опыт.

Но по контракту я обязан поддерживать IE11. Могу ли я сделать это отдельно?

Что мне нужно, так это сборка ES6 (что у нас есть) и сопутствующая сборка IE11. Нетрудно настроить программный таргетинг на эти браузеры, когда речь заходит о том, какую версию они видят ... Но как мне заставить веб-пакет сделать это?

Если это имеет какое-то значение, мне не нужна версия IE11, чтобы иметь какие-либо необычные функции. Это может быть одна 1 МБ аморфная капля или полностью разделенная. Однако это приходит, пока это работает.

Answer 1

Хорошо, оказывается, веб-пакет может обрабатывать несколько конфигов одновременно.Там, где вы обычно делаете 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» в пользовательском агенте и выдаю его.Вероятно, не самый надежный, но сборка также должна работать на современных браузерах, так что я не обеспокоен.