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 продолжает развиваться!