Webpack - это сборщик модулей. Он возьмет все файлы (модули) JS в проекте и объединит их в один файл (обычно с именем bundle.js), который можно использовать в вашем HTML в качестве единственного источника для всех функций JS. Это очень изящное решение решает проблемы коллизии пространств имен и непрозрачного разрешения, возникающие из-за наличия нескольких файлов JS в проекте, но webpack может сделать гораздо больше!
Эта статья является второй частью короткой серии статей о webpack. Чтобы узнать больше об основных функциях webpack и о том, как он решает проблемы, упомянутые в предыдущем абзаце, обратитесь к Введение в Webpack.
Вход и выход
Функциональность Webpack можно расширить с помощью файла webpack.config.js, чтобы настроить его по своему вкусу. Самый простой файл webpack.config будет иметь два ключа объектов: ввод и вывод. entry описывает начальную точку для графа зависимостей, который создаст webpack, что означает, что webpack начнет чтение с файла, указанного параметромentry, и проверит этот файл на наличие зависимостей (импортирует ли он функции или переменные из других файлов?). Объектoutput имеет прямой путь и имя связанного файла, создаваемого веб-пакетом. Это то, что будет упоминаться в вашем HTML как источник всех ваших JS.
Основные концепции Webpack - это ввод, вывод, загрузчики, плагины и режим. Вход и выход - это основные требования для работы webpack. Мы можем настроить webpack в соответствии с нашими потребностями, изучив и настроив другие.
Погрузчики
Загрузчики помогают расширить функциональность веб-пакета, добавляя к нему файлы других типов. Webpack понимает только JS, но в наших проектах могут быть файлы изображений, файлы CSS и многое другое. Загрузчики помогают webpack понять, как построить граф зависимостей с этими типами файлов. У загрузчиков есть два обязательных свойства: тестировать и использовать. Свойствоtest определяет файлы, которые следует преобразовать, а свойствоuse указывает, какой загрузчик должен выполнять преобразование.
module.rules позволяет нам настроить webpack с несколькими загрузчиками. В примере слева мы добавляем два правила. Первый поможет нам прочитать код JSX в проекте, который использует React. Свойствоtest использует регулярные выражения, чтобы сказать, что все файлы .js и .jsx должны быть преобразованы. Свойство optionalexclude указывает, что node_modules следует игнорировать, даже если они соответствуют требованиям regEx, поскольку мы не хотим изменять эти файлы. Свойствоuse сообщает webpack использовать загрузчик babel для преобразования идентифицированных файлов.
Второе правило преобразует файлы CSS. Свойствоtest указывает, что все файлы .css должны быть преобразованы. Свойствоuse сообщает webpack использовать загрузчик стилей и загрузчик css для преобразования идентифицированных файлов. Когда имеется более одного загрузчика - как в этом примере - загрузчики оцениваются как цепочка, начиная с последнего (в данном случае css-loader) и заканчивая первым (style-loader). Если бы мы использовали Sass в нашем проекте, у нас был бы дополнительный загрузчик в цепочке, и он выглядел бы так:
Загрузчик sass сначала обработает исходный файл, а затем передаст результат загрузчику css для дальнейшей обработки, которая передаст свой результат загрузчику стиля, который вернет JS. Последний загрузчик в цепочке всегда должен возвращать JS. Загрузчики берут файлы, отличные от JS, и преобразуют их, чтобы webpack мог их понять, и помещает их в граф зависимостей.
Плагины
Плагины могут выполнять широкий спектр задач: оптимизация пакетов, управление активами, введение переменных среды и т. Д. Большинство плагинов имеют параметры, которые делают их легко настраиваемыми.
Для доступа к встроенным плагинам требуется веб-пакет. Чтобы получить доступ к подключаемому модулю, установленному с помощью npm, вы должны запросить подключаемый модуль по имени.
Поскольку один плагин можно использовать несколько раз в файле webpack.config для разных целей, создайте экземпляр плагина, используя ключевое словоnew.
Плагин html-webpack-plugin создает для вас HTML-файл с тегом сценария, в котором ваш связанный JS-файл указан в качестве источника. Это особенно удобно для проектов, которые не являются одностраничными приложениями и имеют несколько пакетов.
Есть много других плагинов, доступных для фрагментации, извлечения, обнаружения циклических зависимостей и многого другого. Ознакомьтесь с документацией, чтобы найти дополнительные плагины, которые могут подойти для вашего проекта.
Режим
Параметр режима может иметь значение development, production или none. Это позволит использовать некоторые встроенные средства оптимизации webpack для каждой среды. Значение по умолчанию - «production», что позволяет использовать следующие плагины: FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin и UglifyJsPlugin.
Установка значения режима на «разработка» включит theNamedChunksPlugin и theNamedModulesPlugin, а установка на «none» отключит все производственные плагины или плагины для разработки.
Быстрый старт
Чтобы быстро сгенерировать файл webpack.config для вашего проекта, попробуйте эту программу. Выберите функции, которые будет использовать ваш проект, и проследите за изменением файла конфигурации, чтобы добавить загрузчики и плагины. Просмотрите каталог файлов слева, чтобы увидеть, как добавление функции в ваш проект влияет на файл package.json, исходный файл и HTML.
