FinTech Studios использует webpack 3 для создания нескольких наших внутренних и внешних сервисов, поэтому мы были в восторге, услышав о новейшем выпуске webpack несколько недель назад: webpack 4, legato. Услышав о некоторых функциях нового выпуска, исправлениях и улучшениях, мы сразу же приступили к обновлению нашего программного обеспечения, чтобы использовать его.

Обновление с webpack 3 до 4

Приступая к работе, мы просто обновили webpack до последней версии, скрестили пальцы и попробовали собрать. Webpack сразу выдал несколько ошибок и завершил работу. После небольшого исследования и тестирования мы смогли пройти через эти проблемы и найти решения:

The CLI moved into a separate package: webpack-cli.

Проблема. Одно изменение по сравнению с версией 3 до 4 заключается в том, что интерфейс командной строки webpack больше не связан с пакетом NPM «webpack».

Решение: просто добавьте пакет webpack-cli в свой проект с помощью «npm install» или «yarn add».

Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

Проблема: webpack.optimize.UglifyJsPlugin удален из основного веб-пакета. Вместо этого используется config.optimization.minimize, когда установлен производственный режим (при котором включена минификация). По умолчанию он использует UglifyJs, но вы можете заменить или настроить его.

Решение: поскольку мы используем настройки UglifyJs по умолчанию, нам просто нужно было удалить вызовы webpack.optimize.UglifyJsPlugin. Когда webpack запускается в производственном режиме, он использует UglifyJs по умолчанию. При запуске в режиме разработки пропускает минификацию.

Error: Plugin could not be registered at ‘html-webpack-plugin-before-html-generation’. Hook was not found.

Проблема. Согласно примечаниям к выпуску, в webpack 4 внесены критические изменения в систему плагинов.

Решение: просто; просто обновите html-webpack-plugin до 3.x.x.

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

Проблема. Эта ошибка вводила в заблуждение. Проблема здесь на самом деле заключается в плагине extract-text-webpack-plugin. Опять же, это связано с критическими изменениями плагинов.

Решение. Нам просто нужно обновить плагин. Однако на данный момент (8 марта 2018 г.) нет готового обновления extract-text-webpack-plugin. Тем не менее, у них есть готовые исправления в бета-версии. Мы обнаружили, что бета-версия работает хорошо в наших сборках.

Module build failed: TypeError: Cannot read property ‘fileLoader’ of undefined

Проблема: похоже, нам тоже нужно обновить загрузчик файлов.

Решение: обновите файл-загрузчик в своем package.json.

Error: Cannot find module ‘webpack/bin/config-yargs’

Проблема. Мы попытались запустить сервер разработки webpack и получили это сообщение. Это вызвано устаревшей версией webpack-dev-server.

Решение: Обновите webpack-dev-server до 3.x.x.

Module build failed: TypeError: Cannot read property ‘context’ of undefined

Проблема. Некоторые из наших загрузчиков таблиц стилей (SASS, CSS и т. д.) устарели.

Решение. Обновите загрузчики таблиц стилей. Сюда входят такие вещи, как sass-loader, css-loader и postcss-loader.

Полученные результаты

После этих относительно незначительных изменений мы смогли успешно выполнить сборку с помощью webpack 4. В результате время сборки и размер пакета были значительно сокращены:

  • Время сборки: сокращение на 25,3%
  • Файл развертывания поставщика: снижение на 7%
  • Файл развертывания приложения: сокращение на 5,6%

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

Как всегда, команда webpack отлично поработала над этим, и мы очень рады видеть, как webpack продолжает развиваться!