«Я не знаю, что делает Webpack?» Если вы задаете именно этот вопрос, потому что ваша компания использует Webpack или вас интересует объединение в пакеты, то вы попали в нужную статью.
Согласно документации Webpack, «Webpack является сборщиком статических модулей для современных приложений JavaScript». Статический относится к вашим файлам, изображениям и шрифтам JS / HTML / CSS. Эти файлы загружаются клиентом, например Хром. Модуль может означать статический файл или актив, который может содержать операторы импорта в другие модули (которые используются Webpack для построения графа зависимостей). Часть описания, связанная с пакетами, означает, что ваши модули преобразуются в пакеты Webpack, которые связаны вместе графом зависимостей для управления зависимостями. Зачем объединять или иметь график? Мы хотим объединить для повышения производительности. График помогает эффективно и безопасно управлять зависимостями. Подводя итог, Webpack берет ваш статический JS / CSS / HTML и изображения, которые все должны быть или являются модулями, и превращает их в пакеты, которые сопоставляются вместе с помощью графа зависимостей.
Мы не хотим предоставлять пользователю все ваши статические файлы во время запроса. Используя Webpack, мы можем эффективно связывать наши статические файлы и ресурсы и обслуживать только то, что пользователю нужно при загрузке. Webpack также обеспечивает автоматическую загрузку зависимостей. Webpack компилирует весь высокоуровневый типизированный код TypeScript и Flow в читаемый браузером JavaScript. Webpack также помогает в интернационализации и локализации. В Webpack также есть кеширование. Есть еще много преимуществ, но это более высокие уровни.
Если вас больше интересует, в Webpack есть «Основные концепции», которые нужно изучить, прежде чем углубляться.
Запись: это относится к точке входа для графа зависимостей Webpack. Думайте об этом как о корне дерева. Это вариант конфигурации.
Вывод: это относится к пакетам, которые создает Webpack. Результатом является конфигурация, в которой мы указываем, где разместить связанный код и как его назвать.
Загрузчики: это относится к инструменту, который объединяет статические файлы или ресурсы. По умолчанию Webpack объединяет файлы JS и JSON. Мы можем указать загрузчики в файле конфигурации для объединения файлов других типов, таких как `.less`,` .txt` и другие.
Плагины: Именно так это звучит. Вы можете импортировать плагины в свой файл конфигурации, чтобы делать другие вещи, такие как оптимизация пакетов, управление активами и внедрение переменных среды.
Режим: вы можете указать для своей среды production, development или none. Для каждого из них предусмотрены разные оптимизации комплектации.
Совместимость браузера: вы можете указать, какие браузеры вы хотите поддерживать.
Среда: webpack работает на Node.js версии 8.x и выше.
