Несколько недель назад я боролся с проектом React.js, в котором было много старых и устаревших зависимостей и плагинов. Я начал обновлять версию Webpack (с 4.5 до 5.5) и версию Babel (с 6 до 7). Вы должны иметь в виду, что после обновления только вашего сборщика и транс-компилятора вы, возможно, не сможете снова запустить свой проект. В моем случае в проекте было много устаревших плагинов, например. babel-polyfill и babel-preset-stage. Я потратил слишком много времени на это, потому что каждый раз я получал разные ошибки. Я обновил все зависимости разработчиков до их последней версии и нашел несколько хороших замен для устаревших плагинов. Было очевидно, что я все еще не мог запустить проект, потому что ему нужна была новая конфигурация Webpack.
Это была отличная возможность погрузиться в такие инструменты, как Webpack, и узнать, как они работают. Основная концепция Webpack — его загрузчики. Вам нужны загрузчики для загрузки ваших стилей, шрифтов, изображений, файлов и т. д. Если вы используете Create-React-App, возможно, вы не слышали о них, потому что это встроенная функция, и вам не нужно ничего настраивать.
В этой статье я хочу написать о трех известных загрузчиках и новой интересной функции в Webpack5.
До Webpack5 обычно использовались: raw-loader, url-loader и file-loader. ОСТОРОЖНО, СПОЙЛЕРЫ! В Webpack5 они вам больше не нужны! Модули ассетов — это новая функция, которая значительно упрощает загрузку ассетов. Сначала давайте посмотрим, как работают эти загрузчики и как их настроить.
Raw-loader импортирует ваш файл в виде строки, Url-loader используется для встраивания вашего файла в качестве URI данных, а file-loader используется для отправки вашего файла в выходной каталог. Мой любимый — url-loader, потому что вы можете одновременно использовать функции file-loader и url-loader, указав ограничение по размеру. Это означает, что если размер файла превышает пороговое значение, переключиться на файл-загрузчик; в противном случае используйте url-loader. Вот базовая конфигурация для url-loader:
Здесь мы загружаем файлы png, jpg и gif с помощью url-загрузчика, только если размер меньше 8192 байт. Дополнительные примеры см. в официальной документации Webpack.
Теперь, если вы используете Webpack5, вам не нужно устанавливать и настраивать эти загрузчики. Единственное, что вам нужно сделать, это указать «тип» для каждого правила. Вот как вы это сделаете:
Вы можете указать для type четыре основных значения:
- актив/ресурс : эквивалентно файловому загрузчику.
- актив/встроенный: Эквивалент url-loader.
- актив/источник: Эквивалентно необработанному загрузчику.
- актив: Эквивалент url-loader с ограничением размера.
Модули активов кажутся мне действительно интересными, потому что установка и настройка нескольких загрузчиков отнимает у разработчиков много времени, а иногда и усложняет. Я предполагаю, что это было только начало некоторых подобных изменений в будущих версиях Webpack, чтобы избавиться от этих проблем с конфигурацией. С другой стороны, Webpack дает нам достаточную доступность на более низких уровнях для настройки и оптимизации нашего приложения. Таким образом, эти изменения могут слишком сильно ограничить разработчиков. Что вы думаете?
