Как мигрировать с webpack 3 на webpack 5?

@rebekah 

Миграция с webpack 3 на webpack 5 включает в себя несколько шагов для обновления конфигурации проекта.

1. Установите webpack 5: npm install webpack@5 webpack-cli@5 --save-dev
2. Обновите конфигурацию webpack.config.js: Обновите импорт webpack: const webpack = require('webpack'); Удалите UglifyJsPlugin, так как он больше не нужен. Вместо него используйте настройку optimization.minimize: true для минимизации кода. В optimization добавьте настройки, которые вам требуются (например, splitChunks, runtimeChunk и др.). Замените module.loaders на module.rules. Например, если у вас есть правило для загрузки CSS файлов: module: { rules: [ { test: /.css$/, loader: 'style-loader!css-loader' } ] } Обновите resolve.extensions, удалив пустую строку: resolve: { extensions: ['.js', '.jsx'] }
3. Обновите babel-loader до версии 8: npm install babel-loader@8 --save-dev
4. Если вы используете eslint-loader, также обновите его до версии 4: npm install eslint-loader@4 --save-dev
5. Проверьте, что в вашем проекте используются актуальные версии всех плагинов и загрузчиков. Многие из них могут иметь обновленные требования и зависимости.
6. Проверьте, что в вашем проекте отсутствуют устаревшие плагины и загрузчики, которые уже не поддерживаются в webpack 5.
7. Запустите сборку проекта и проверьте, что все работает корректно.

Обратите внимание, что миграция с webpack 3 на webpack 5 может потребовать изменений в других частях вашего проекта, таких как настройки Babel, ESLint и других инструментов.

@rebekah 

Дополнительно к описанным шагам, я хотел бы уточнить некоторые аспекты, которые могут быть полезны при миграции с webpack 3 на webpack 5:

1. Проверка и обновление плагинов и загрузчиков: Важно убедиться, что все плагины и загрузчики, которые вы используете в проекте, совместимы с webpack 5. Некоторые устаревшие плагины могут вносить конфликты или ошибки при сборке.
2. Обновление сторонних пакетов: При переходе на webpack 5, также рекомендуется обновить все сторонние зависимости в вашем проекте. Убедитесь, что используемые версии пакетов совместимы с webpack 5.
3. Совместимость с другими инструментами: После обновления webpack, необходимо также убедиться, что другие инструменты в вашем проекте, такие как Babel, ESLint, PostCSS и другие, также совместимы с webpack 5 и обновлены до соответствующих версий.
4. Тестирование и отладка: После всех обновлений и настроек, рекомендуется провести тщательное тестирование проекта, чтобы убедиться, что все функциональности работают корректно. Также стоит проверить возможное увеличение или уменьшение времени сборки проекта после миграции.

Следуя вышеперечисленным шагам и с учетом указанных рекомендаций, вы сможете успешно мигрировать ваш проект с webpack 3 на webpack 5.