Основы Webpack: что такое Webpack?
Webpack - это библиотека javascript, которая может преобразовывать синтаксис кода, а также объединять несколько файлов в один файл. Это особенно необходимо при создании больших приложений, где разделение или разбиение вашего javascript и css на несколько файлов может помочь с организацией, или, например, когда вам нужно простое решение для преобразования вашего синтаксиса es6 в читаемый браузером es5. Единственный выходной файл можно импортировать в ваш html-файл как скрипт src или ссылку href.
Webpack имеет четыре основные функции, которые указываются в файле конфигурации как пары ключ-значение. Ключи - это вход, выход, модуль и плагины, и каждая из них помогает указать, как должен работать веб-пакет. Ниже приводится краткое описание каждой функции «ключ-значение», которое дает общий обзор того, что делает Webpack и как он это делает.
«Входная» пара "ключ-значение" сообщает Webpack, где он должен начинаться. Указанный файл вместе со всем его импортом компилируется в один файл при запуске Webpack. Мы должны импортировать все наши функции javascript, переменные и т. Д. В файл ввода, который мы указываем здесь, чтобы Webpack мог получить к ним доступ.
«Выходная» пара "ключ-значение" сообщает Webpack, куда выводить связанный код после его компиляции. Имя выходного файла часто называется bundle.js.
Пара "ключ-значение" "модуль" сообщает Webpack, какие библиотеки (называемые загрузчиками) должны применяться к каким импортируемым объектам (называемым модулями). Например, мы можем указать Webpack преобразовать наш синтаксис es6 в es5, используя npm для установки необходимых библиотек babel, а затем указав в нашем файле конфигурации для Webpack применение этих библиотек babel к нашим импортированным модулям во время сборки.
И, наконец, раздел «плагины». Хотя конфигурация модуля применяется только к определенному импорту, конфигурация «плагинов» будет применяться ко всему вашему коду. Примером может быть добавление плагина, который минимизирует ваш код, то есть уменьшает размер всего вашего кода, удаляя все ненужные символы, такие как пробелы.
Я надеюсь, что это объяснение высокого уровня даст читателям базовое представление о Webpack и о том, почему это такой мощный инструмент для инженеров-программистов. Ознакомьтесь с руководством Academind на YouTube по Webpack по ссылке ниже, чтобы получить более подробный обзор с примерами!
Https://www.youtube.com/watch?v=GU-2T7k9NfI&list=PL55RiY5tL51rcCnrOrZixuOsZhAHHy6os
