Webpack — это сборщик модулей с открытым исходным кодом для JavaScript, завоевавший свою репутацию благодаря возможности упростить веб-разработку за счет решения фундаментальных проблем связывания. Уже сейчас JavaScript является одним из самых популярных языков программирования в мире, и это способствует недавнему росту Webpack. Весь JavaScript, HTML и CSS можно использовать и преобразовать в формат, который более удобен для использования через браузер, что может сделать Webpack.
Это буквально делает жизнь веб-разработчиков очень легкой, решая все сложные проблемы. Хотя это не один из самых простых инструментов для изучения и начала работы, он очень мощный. В этой статье мы обсудим различные важные моменты Webpack, которые дадут вам больше информации об этом сборщике.
Что такое Webpack на самом деле?
По мере развития технологий грань между веб-сайтами и веб-приложениями постоянно стирается. С несколькими новыми обещаниями он также поставил перед разработчиками множество проблем. Сегодня клиентская часть вынуждена обрабатывать больше, поскольку веб-приложения сильно зависят от JS. Чтобы справиться с этой дополнительной нагрузкой, разработчики склоняются к модульной системе, такой как Webpack или любой другой.
Эти модули позволяют разработчикам без каких-либо трудностей поддерживать порядок, а также эффективно и быстро доставлять контент пользователям. Это не только помогает разработчикам, но и полезно для всех, кто будет использовать ту же кодовую базу в будущем. И если вы хотите управлять своими кодами с помощью модулей, вам потребуется сборщик модулей, такой как Webpack. На данный момент это один из лучших сборщиков.
Подробнее о Webpack:
Webpack известен своим потенциалом для создания статических ресурсов, представляющих модули с зависимостями. Как и любой другой инструмент, уже существует множество сборщиков модулей JS, таких как Browserify, jspm, rollup и другие, но Webpack является одним из самых популярных и широко используемых сборщиков, потому что, как было сказано ранее, он обрабатывает веб-ресурсы как модули с зависимостями.
Webpack в основном создавался с определенными целями, перечисленными ниже:
- Предлагая беспрецедентную настройку
- Что-то, что может позволить каждому статическому ресурсу быть модулем
- Сокращение времени начальной загрузки
- Для разделения деревьев зависимостей на фрагменты, которые могут быть загружены по требованию.
- Что-то, что может интегрировать сторонние библиотеки в виде модулей
Если вы не знакомы с конфигурационным файлом Webpack, поначалу вы можете столкнуться с небольшими трудностями, однако, как только вы ознакомитесь с основными принципами и синтаксисом сборщика, их чтение станет очень простым и легким. Два основных принципа, которые вы должны знать о Webpack:
Когда это Webpack, все может быть модулем, включая файлы CSS JS, HTML и изображения. В результате любой артефакт может быть разделен на управляемые и небольшие фрагменты для повторного использования.
Лучшая часть Webpack заключается в том, что он загружает только то, что вам нужно и когда вам нужно, тогда как другие сборщики модулей генерируют один большой файл bundle.js, объединяя все модули. Это может привести к тому, что файлы размером до 15 МБ для динамических веб-приложений будут долго загружаться. В отличие от этого, Webpack генерирует множество меньших файлов пакетов, которые могут асинхронно загружать части приложения. Из-за этого пользователи не сталкиваются с длительной загрузкой соответствующих приложений.
Webpack опирается на модули
Самый маленький проект, который вы можете связать с Webpack, включает ввод и вывод. Процесс объединения начинается с записей, определенных пользователями, а записи в основном представляют собой модули, которые могут указывать на другие модули посредством импорта.
Webpack просматривает импорт, создавая граф зависимостей проекта, а затем генерирует выходные данные на основе конфигурации при объединении проекта. Кроме того, вы также можете определить точки разделения для создания отдельных пакетов внутри самого кода проекта.
Webpack также поддерживает CommonJS, модуль AMD и ES2015; и его механизм загрузки работает для CSS с поддержкой @import и url() через css-loader. Для конкретных задач, таких как интернационализация, минификация, HMR и т. д., есть несколько плагинов, которые вы можете найти и использовать.
Процесс выполнения Webpack:
Это записи, с которых Webpack начинает свою работу, и часто это модули JavaScript, где Webpack начинает свой процесс обхода. Webpack оценивает совпадения записей с конфигурациями загрузчика во время процесса, который сообщает Webpack, как преобразовывать каждое совпадение.
Процесс разрешения:
В Webpack запись сама по себе является модулем. В случае, если Webpack встречает какой-либо модуль, он пытается сопоставить запись с файловой системой. Это делается с помощью конфигурации разрешения записи. В дополнение к node_module вы можете указать Webpack выполнять поиск в определенных каталогах. Также можно определить конкретные псевдонимы для каталогов и настроить способ сопоставления Webpack с расширениями файлов.
Webpack также вызывает ошибку времени выполнения в случае сбоя прохода разрешения. Он выполняет обработку сопоставленного файла на основе определения загрузчика, если Webpack удается правильно разрешить файл. К содержимому модуля каждый загрузчик применяет определенное преобразование, и способ сопоставления загрузчика с разрешенным файлом может быть настроен несколькими способами, например, по местоположению в файловой системе и по типу файла. Гибкость Webpack позволяет применить эксклюзивное преобразование к файлу в соответствии с местом, где он был импортирован в проект.
Такое же разрешение может быть выполнено для загрузчиков Webpack, что позволяет вам применять ту же логику, когда вы определяете тип загрузчика, который он должен использовать. По этой причине загрузчики должны самостоятельно разрешать конфигурации. Webpack вызывает ошибку времени выполнения, когда ему не удается выполнить поиск загрузчика.
Webpack разрешает файлы любого типа
При построении графа зависимостей Webpack разрешает каждый встречающийся модуль. Пока обход не завершится, процесс будет выполняться рекурсивно для каждой зависимости, если запись содержит зависимости. В отличие от специализированных инструментов, таких как компилятор Babel или Sass, Webpack может выполнять этот процесс для файлов любого типа.
Этот упаковщик также дает вам контроль над различными способами обработки различных активов, с которыми он сталкивается. Например, чтобы избежать запросов, вы можете решить встроить активы в свои пакеты JavaScript. Чтобы избежать проблем со стандартными стилями CSS и сочетать стили с компонентами, Webpack также позволяет использовать такие методы, как модули CSS. Эта гибкость делает Webpack таким ценным для разработчиков и пользователей.
Хотя Webpack в основном используется для связывания JavaScript, его также можно использовать для захвата ресурсов, таких как шрифты или изображения, и создания для них отдельных файлов. Поскольку записи являются лишь отправной точкой процесса объединения, то, что выдает Webpack, полностью зависит от того, как вы его настроите.
Процесс оценки
Этот процесс выполняется, когда Webpack оценивает совпадающие загрузчики справа налево и снизу вверх (styleLoader(cssLoader(‘./main.css’))) при запуске модуля через каждый загрузчик по очереди. Это приводит к выводу, который Webpack вводит в результирующий пакет.
Webpack включает исходный код в последний пакет, если все оценки загрузчика завершились без ошибок времени выполнения. Вы также можете перехватывать события времени выполнения на разных этапах процесса сборки, используя различные плагины. Несмотря на то, что загрузчики выполняют так много задач, у них недостаточно мощности для более сложных задач.
Завершение
Webpack записывает выходные данные после оценки каждого модуля и включает скрипт начальной загрузки с манифестом. Он описывает правильный способ начать выполнение результата в браузере. Кроме того, манифест можно извлечь в отдельный файл, и выходные данные могут отличаться в зависимости от используемой цели сборки. Это еще не все для процесса комплектации. Вы даже можете определить определенные точки разделения, в которых этот упаковщик генерирует отдельные пакеты, которые загружаются на основе логики приложения.
Установка и настройка Webpack
Каждый разработчик, работающий с Webpack, знает, что он лучше всего работает с npm и по этой причине; Я сосредоточусь на установке npm. Вы можете проверить их веб-сайт для получения более подробной информации о настройке Webpack.
Более того, Webpack — очень сложная тема, и правильная настройка вашего проекта полностью зависит от потребностей ваших проектов. Вот почему ниже я только что показал его установку и настройку базовой компиляции.
Установка
У вас должен быть установлен node.js для установки Webpack. Как только это будет сделано, вам просто необходимо ввести следующую командную строку:
Теперь этот инструмент должен быть доступен где угодно, и вы можете проверить его успешную установку, набрав Webpack в терминале.
Настройте базовую компиляцию
Вам необходимо создать 2 отдельных файла, т. е. entry.js и index.html, для демонстрации работы Webpack на самом базовом уровне.
запись.js
index.html
После создания этих двух файлов теперь вы можете запустить команду в своей консоли: webpack ./entry.js bundle.js. Эта команда помогает этому упаковщику ссылаться на файл entry.js и в конечном итоге создает файл bundle.js.
Сравнение веб-пакетов
- Webpack против Gulp
Сравнение этих двух продуктов похоже на сравнение апельсинов и яблок. Webpack — это сборщик модулей, а Gulp — средство запуска задач. Если вы хотите, вы можете использовать их оба вместе, однако, если вы действительно знаете Webpack, вам не нужен Gulp. Помимо линтинга и модульного тестирования, он может выполнять практически любые задачи, которые может выполнять Gulp. Это основная причина, по которой Gulp стал менее популярным в наши дни.
В некоторых случаях, когда вам нужно строго соблюдать сроки и у вас нет времени, чтобы узнать все о Webpack, вы можете использовать Gulp, чтобы максимизировать свою эффективность и потенциал Webpack. Кроме того, для настройки также требуется время, и в случае кранча может быть полезно использовать средство запуска задач, такое как Gulp. Это просто сделает ваш проект более громоздким.
2. Webpack против Browserify
Все программисты, которые выполнили несколько тестов как в Webpack, так и в Browserify, дали Webpack явное преимущество в скорости. Они знают, что Webpack намного быстрее, чем Browserify. На самом деле, он может пересобирать любые существующие пакеты примерно на 40% быстрее, чем Browserify. Это очень выгодно для разработчиков. Не требуется обновлять страницу несколько раз, чтобы наблюдать за изменениями, которые вы вносите.
В отличие от этого, когда дело доходит до доставки оптимизированного пакета, Browserify имеет явное преимущество перед Webpack. После минификации результирующий пакет Browserify может быть на 40% меньше, чем пакет, созданный из Webpack. По этой причине многие разработчики используют Webpack по умолчанию для сред разработки, а Browserify — по умолчанию для производственных сборок.
3. Webpack против Babel
Как уже говорилось, Webpack — это сборщик для JavaScript и его друзей, который может упаковывать множество модулей в несколько связанных ресурсов. Части для приложения по запросу могут быть загружены путем разделения кода. Хотя вы можете сослаться на Babel, который позволяет вам использовать JavaScript следующего поколения сегодня и может превратить ваш код ES6+ в код, дружественный к ES5. Это поможет вам начать использовать его, не дожидаясь поддержки браузера.
Кроме того, вы можете рассматривать Webpack как «инструменты сборки JS или средства выполнения задач JS», в то время как Babel можно отнести к категории «компиляторы JavaScript». Некоторые причины, такие как возможность работы со всеми браузерами, открытый исходный код и возможность интеграции со многими плагинами, делают Babel предпочтительным вариантом для разработчиков. С другой стороны, титул самого мощного в мире бандла, способность обрабатывать все типы ресурсов и встроенный сервер разработки с живой перезагрузкой — основные причины, по которым этот бандлер предпочитается разработчиками со всего мира.
Хотя оба являются инструментами с открытым исходным кодом, однако Webpack имеет более 49 тысяч звезд GitHub вместе с более чем 6 тысячами форков, что намного больше, чем у Babel 33,5 тысячи звезд GitHub и более 3,5 тысяч форков GitHub.
Очевидные преимущества Webpack
- Богатая и гибкая инфраструктура плагинов
В Webpack легко писать плагины и загрузчики. Они также позволяют вам контролировать каждый шаг сборки от загрузки и компиляции LESS, JADE и CoffeeScript до оценки создания манифеста и постобработки.
2. Вы можете подключиться к огромной экосистеме модулей npm
Npm имеет более 80 тысяч модулей. Использование Webpack открывает вам доступ ко всем модулям, большинство из которых работают как на стороне сервера, так и на стороне клиента. Более того, этот список значительно увеличивается.
3. Чтобы сократить время первоначальной загрузки, вы можете создать один пакет или несколько фрагментов по требованию.
Используя Webpack, вы можете разделить свою кодовую базу на несколько фрагментов, и эти фрагменты можно загружать по требованию, что в конечном итоге сокращает время первоначальной загрузки.
4. Поддержка ES6
Этот мощный упаковщик также поддерживает модули ES6 вместе с их методами экспорта и импорта без необходимости компиляции в CommonJS.
5. Для упрощения дублирования Webpack поддерживает исходные карты
С исходной картой отладку можно упростить. В основном потому, что они могут помочь вам найти проблемы в исходных файлах, а не в выходном файле.
6. Ограниченные проблемы, связанные с интеграцией плагинов
7. CommonJS и Mix ES6 AMD
Даже в одном файле он поддерживает использование всех трех типов модулей.
8. Используйте одни и те же модули на стороне сервера и на стороне клиента
Вы можете легко обмениваться модулями между серверной и клиентской сторонами, поскольку этот упаковщик позволяет вам использовать ту же функцию require(), что и в node.js.
9. Объединяет модули AMD и CommonJS
Этот популярный упаковщик также поддерживает стили модулей CommonJS и AMD, а также может выполнять умный статический анализ AST вашего кода. Кроме того, Webpack также имеет механизм оценки простых выражений, что позволяет вам поддерживать большинство существующих библиотек.
Подведение итогов Webpack
Действительно, этот бандлер прошел долгий путь, чтобы стать не только мощным, но и самым популярным пакетом. Все его возможности и особенности определенно дают ему явное преимущество перед другими. Он идеально подойдет вам, если вы планируете работать с большой командой разработчиков над созданием веб-приложений для сотен и тысяч пользователей.
Даже если вы привыкли работать в одиночку над какими-либо личными проектами, вы можете извлечь большую пользу из Webpack. Вы воспользуетесь всеми его мощными функциями для своего проекта. Более того, большинство разработчиков знают, что этот бандлер значительно вырос с момента своего создания, но факт в том, что он растет более быстрыми темпами с точки зрения своей популярности, чем любой из его конкурентов.
В этой статье мы кратко рассказали о Webpack, о том, как он работает, о процессе его выполнения и его установке, а также о базовой настройке. В более поздней части мы попытались сравнить его с другими подобными или не очень похожими инструментами, где у него есть явное преимущество. Наконец, мы перечислили некоторые преимущества или, можно сказать, особенности Webpack, которые любят разработчики во всем мире.
Если вы считаете, что что-то еще было важным и отсутствовало тогда, укажите это в разделе комментариев ниже.
Первоначально опубликовано на https://www.blog.eduonix.com 5 февраля 2020 г.
