Webpack для начинающих разработчиков
Элементарное представление о сборщике webpack для новичков.
В текущей парадигме разработки Webpack является важным инструментом для упрощения очень важного процесса цикла разработки, а именно объединения статических модулей. Важность этого шага заключается в базовом механизме создания внутреннего Графа зависимостей.
Файлы в типичном проекте «требуют» нескольких ресурсов или зависимостей, которые по своей природе могут быть основаны на коде, например, пакеты узлов / другие файлы JS, или не основанные на коде ресурсы, такие как изображение, веб-шрифты, звук и т. Д.
порядок, в котором эти зависимости должны быть загружены и в файлах 'require' -ed или 'import' -ed, приводит к результату Dependency Graph. Следовательно, График зависимостей определяет все необходимые прямые или косвенные зависимости модуля / актива в приложении.
Точки входа
Когда webpack обрабатывает любое приложение, он начинает с «точки входа» для рекурсивного построения внутреннего графа зависимостей, «который включает все модули, необходимые вашему приложению, а затем объединяет все эти модули в небольшое количество связки - часто всего один ».
По умолчанию значение ‘./src/index.js’ действует как точка входа модуля для любого приложения в webpack. Rest webpack определяет все (прямые или косвенные) зависимости модулей и библиотек для входного модуля.
Точка вывода / с
И наоборот, «Точка вывода» определяет, куда Webpack помещает / передает сгенерированные пакеты распространения. По умолчанию используется папка ‘./dist’ для всех статических ресурсов и ‘./dist/main.js’ основной выходной файл.
Содержимое «./dist» готово к использованию и представляет собой автономный образ действующего веб-приложения. Теперь вы просто загружаете содержимое dist / в свой CDN, развертываете новый код, чтобы увидеть приложение в реальном времени.
Обработка файлов других типов - Загрузчики
Забегая вперед, одно важное замечание относительно webpack касается готовой поддержки только JavaScript и JSON. Решение Webpack для обработки файлов других типов - Загрузчики. Загрузчики позволяют webpack обрабатывать другие типы файлов и преобразовывать их в допустимые« модули , которые могут быть использованы вашим приложением и добавлены в граф зависимостей».
Загрузчики определяются как «правила» для обработки модуля, который имеет два обязательных свойства, а именно «тест» и «использование». Тест определяет, какие файлы следует преобразовать, и принимает регулярное выражение в качестве значения типа «/.png$/» для проверки типа файла. Использование указывает, какой загрузчик следует использовать для преобразования, и принимает строковое значение для примера имени загрузчика «файл» для Загрузчика файлов.
С точки зрения непрофессионала, эта конфигурация сообщит webpack:
Написание собственной пользовательской конфигурации
Вышеуказанная пользовательская конфигурация подводит нас к следующей теме написания пользовательской конфигурации веб-пакета.
Можно создать простой настраиваемый файл конфигурации веб-пакета со следующим содержимым:
Здесь «путь» - это основной модуль Node.js, используемый для обработки путей к файлам в соответствии с платформой ОС клиента.
«entry» - это настраиваемый модуль ввода. Здесь важно обсудить, что запись может принимать объект, состоящий из нескольких путей модуля входа.
module.exports = { entry: { app: './src/app.js', adminApp: '.src/adminApp.js' } }
Это известно как многоосновная запись. Дополнительную ссылку можно найти в разделе Точки входа.
Эту нотацию также можно связать со значением объекта для свойства output.path, которое будет генерировать отдельный пакет выходных данных для каждой записи. Объект будет выглядеть так:
output: { path: outputWebpackPath, filename: '[name]/js/[name].js' }
Имя файла как «[имя] .js» используется для использования самого имени записи для имени выходного файла.
Дополнительную информацию можно найти в Выводе. Все они образуют базовый набор свойств конфигурации для создания собственной пользовательской конфигурации веб-пакета. Чтобы выполнить вышеупомянутую конфигурацию webpack, запись scripts в package.json может быть изменена как webpack-script-name: webpack - config webpack.modules.config.babel. js - display-error- details . Здесь передается параметр - config, за которым следует имя файла конфигурации пользовательского веб-пакета. - display-error-details - это дополнительный параметр, который может быть передан дополнительно для отображения сведений об ошибке в случае ошибок времени выполнения.
Здесь важно следить за совместимостью браузера с webpack, поскольку он поддерживает браузеры, «совместимые с ES5», поэтому IE8 и ниже не поддерживаются.
Преимущества Webpack
Преимущества, которые дает webpack, много, но некоторые основные и важные преимущества можно кратко изложить, как показано ниже:
- Устранение мертвого кода или встряхивание дерева
- Устранение мертвых активов
- Большой контроль разработчиков над обработкой активов
На этом завершается базовый обзор веб-пакета и его использования в жизненном цикле приложения. Хотя факт очевиден, первоначальный запуск с webpack может быть медленным, но дальнейшие преимущества огромны, когда webpack будет правильно настроен для итерации вашего веб-приложения.
PS: Пожалуйста, поделитесь своими впечатлениями о том, считаете ли вы этот блог полезным и хотели бы получить дополнительную информацию по вышеуказанным или другим темам, связанным с технологиями.
Отзывы о том, что и как я могу еще улучшить эта тема или стиль моего блога будут высоко оценены. Спасибо!