Использование Webpack 4 для создания приложений, совместимых с браузером

Радуйтесь! Выходные здесь. Я знаю, что все хотят броситься к дверям и почувствовать эту свободу. Но потерпите меня несколько минут.

25 февраля 2018 года был выпущен Webpack 4, интересно, что они назвали его «Легато». Легато означает играть все ноты без промежутков. Webpack снова и снова зарекомендовал себя, поэтому он является неотъемлемой частью экосистемы разработки JavaScript. Тяжеловесы JavaScript например, React и Angular уже интегрировали Webpack в структуру, как и Babel. И если вы создаете кроссбраузерные веб-приложения, это один из самых важных и полезных инструментов в вашем гараже.

Так что нового?

Часто критикуемый сообществом JavaScript за то, что он является «адом настройки», Webpack попытался попробовать новый подход. С более ранними версиями вам приходилось очень много работать, чтобы не отставать от кривой обучения. В новом подходе меньше настроек, вы можете запустить свой проект после нескольких основных настроек.

Более быстрое время сборки, меньший размер пакета и кроссбраузерная совместимость

Лучшее в Webpack — это расширенная поддержка и экосистема. Webpack имеет решающее значение для более быстрого времени сборки, чтобы настроить производительность веб-сайта или веб-приложения. Для этого, в свою очередь, требуется поддержка UglifyJS и BabelJS. UglifyJS2 предлагает поддержку минимизации синтаксиса ES6 до того, как Babel сможет преобразовать его в ES5, который поддерживает Webpack. Babel гарантирует отсутствие расхождений из-за версии или синтаксиса JS. Это особенно полезно для веб-программистов, которые хотят создавать веб-приложения, совместимые с браузером, и обеспокоены проблемами несовместимости EcmaScript 6. Webpack вместе с такими инструментами, как UglifyJS, BabelJS и Списки браузеровможно использовать для преобразования кода ES6 в совместимый код JS.

Введение sideEffects: false в пакете json упрощает удаление неиспользуемого кода в пакетах. Также добавлена поддержка импорта и экспорта любого локального модуля WebAssembly.

В дополнение ко всему этому существует множество плагинов для создания сообщества для расширения функциональности Webpack. Например, вы можете использовать плагин Autoprefixer Polyfill для анализа CSS-файлов вашего проекта и автоматического добавления префиксов, специфичных для браузера, в код, чтобы сделать его более кроссбраузерный совместимый.

Совместимость браузера с Webpack

Улучшение значений по умолчанию

Как я уже упоминал ранее, самая большая проблема с Webpack заключается в том, что вам нужно все настраивать. Когда я говорю все, я имею в виду самое буквальное из возможного. Приятно видеть, что Webpack 4 значительно улучшился. Он предполагает, что ./src/ является свойством entro, и возвращает вывод в ./dist . Это известно #0CJS (JavaScript с нулевой конфигурацией). Это сэкономит ваше драгоценное время и ускорит развертывание.

Специализированные режимы для улучшения сборки

Webpack теперь предлагает два отличных режима, которые предлагают разные наборы навыков, позволяющие предоставлять нам пакеты для конкретных пользователей. Давайте исследуем больше, чтобы увидеть, о чем идет речь.

Производство

Режим внедряет в себя нестандартные оптимизации и функции. Почти как сундук с сокровищами интернет-пирата. Встряхивание дерева, минимизация, модуль без побочных эффектов, отсекающий все эти полезные функции, делают Webpack 4 удобным для пользователя. Встряхивание дерева эффективно уменьшает размер пакета, удаляя неиспользуемые коды. Эта функция облегчается, если вы импортируете JSON с синтаксисом ESModule.

Разработка

Для тех, кто хочет превосходную скорость с опытом экосистемы разработки. Webpack добавил к своим уже существующим схемам отображения для облегчения чтения исходных кодов. Имена путей в выходных данных пакета и карты eval-source увеличивают время сборки.

Устаревание

Были сделаны значительные сокращения, чтобы сделать Webpack легче. Node.js больше не поддерживается, так как исходный код был обновлен до более высокой версии ecmascript. CommonChunksPlugin также был удалён, уступив место оптимизационным.splitChunks. Другие удаленные функции включают module.loaders, loaderContext.options, флаг Compilation.notCacheable, NoErrorsPlugin, Dependency.isEqualResource и NewWatchingPlugin.

Веб-пакет GitHub

Прощай, CSS-префикс, кроссбраузерная несовместимость

Мало того, Autoprefixer — это еще один современный обработчик префиксов CSS. С этим упакованным внутри Webpack забудьте все, что вы знаете о префиксах CSS. Он заботится о префиксах, проверяя совместимость с различными браузерами и их версиями на Caniuse. Эта удивительная задача выполняется с огромной скоростью. Кроме того, он даже удаляет устаревшие префиксы, что приводит к колоссальному увеличению скорости на 10% (более или менее).

Если вы хотите иметь поддержку определенных браузеров, вы можете легко это сделать. Используя Browserlist, вы можете использовать .browserlistrc, и путем перекрестных ссылок на предоставленный вами список будут решены все конкретные проблемы CSS. В этом случае вам не нужно использовать Autofixer.

Давайте проверим конкуренцию

Когда мы говорим о конкуренции, у Webpack много работы. Посылка как новенький в квартале с учтивостью. С выходом Parcel был такой ажиотаж. Я имею в виду, что все говорили об этом. Для начала не требовалось никаких настроек, и это работало! Все были настолько очарованы этим новшеством, что к тому же в комплекте был еще меньший размер.

Parcel подтолкнул Webpack к инновациям и дальнейшему совершенствованию. Кроме того, кривая обучения посылки не была даже близкой к Webpack, что слишком сильно добавило ему популярности. Посылка хорошая, но по некоторым направлениям ей не хватает. Например, вы не можете использовать переменные CSS и SASS с помощью импорта, это создает некоторые проблемы, но есть простое решение: экспортируя файлы CSS из JavaScript, вы можете убедиться, что он обрабатывает зависимости.

Есть и другие, такие как Browserify и Rollup, в которых отсутствует оптимизация времени сборки, например встряхивание дерева, или отсутствуют некоторые другие аспекты.

Вывод

Очевидно, что Webpack никуда не денется. Нам еще предстоит увидеть, какие новые функции принесет конкуренция. Благодаря поддержке таких крупных игроков, как React и Angular, Webpack получает больше поддержки на прекрасной планете JavaScript. Боюсь, у нас нет времени, я прощаюсь с вами.

До скорого!

Счастливые выходные!