Что такое веб-пакет?

В самом широком смысле: Webpack - это сборщик.

Для педантичных это сборщик модулей. (Мы перейдем к модульной части через секунду).

Итак, что в основном делает webpack, так это то, что он объединяет все ваши ресурсы и файлы в пакеты.

Но зачем мне упаковщик? Почему я не могу просто разместить скрипт на своей странице?

Конечно, можем, но это может привести к одной-двум проблемам в будущем.

Предположим, у вас есть скрипт для вашей страницы. Это примерно 500 строк JS. Думаю, проблем нет. Мы просто добавляем старый тег скрипта на нашу страницу.

Но затем мы начинаем добавлять на страницу дополнительные функции, и, прежде чем вы это узнаете, ваш единственный файл сценария содержит 20 тыс. Строк кода. Да проблема.

Управление всем этим кодом в одном файле не поможет снизить уровень стресса. Добавьте к этому, что над одним файлом одновременно работают несколько человек.

Итак, что нам делать дальше? Легкий. мы разбиваем код на разные части и разбиваем наш огромный файл на 20 файлов меньшего размера и вставляем 20 тегов ‹script› на нашу страницу. Конечно, в тщательно выбранном порядке, потому что вы должны убедиться, что эта служебная функция доступна перед попыткой ее использовать.

Итак, теперь у нас есть 20 тегов скриптов на нашей странице, аккуратно вставленных в определенном порядке. Не идеальная ситуация, особенно когда вам нужно продолжать вносить изменения в файлы и следить за тем, чтобы изменения были внесены в правильные файлы, чтобы порядок работал.

Мы можем написать сценарий для объединения всех наших файлов в один тег сценария и добавить этот тег сценария в наш файл, но нам все равно необходимо обеспечить правильный порядок объединяемых файлов и будет необходимо отслеживать обновления кода. в существующих файлах или, если необходимо добавить какие-либо дополнительные файлы, а затем их порядок….

Короче говоря, при таком подходе наши проблемы не исчезнут.

Мы видим, что простое объединение всех файлов в правильном порядке не приносит нам большой пользы.

Лучшим подходом было бы, если бы каждый файл каким-то образом мог сообщать нам, какие другие файлы ему требуются (это зависимости), а затем мы могли бы включить это сопоставление в наш предыдущий подход конкатенации.

Здесь на помощь приходит веб-пакет.

В ES6 и nodeJS есть механизмы для указания зависимостей и импорта.

Webpack использует эти механизмы для построения графа зависимостей всех файлов и их зависимостей, а также для объединения всех файлов.

Подробная информация о том, как webpack связывает пакеты, требует таких шагов, как добавление небольшого шаблонного кода до и после каждого файла и его преобразование в набор функций, а затем выполнение этих функций контролируемым образом, но мы сохраним эти детали для позже пост.

Тем не менее, я попытаюсь дать представление о том, как работает пакетирование веб-пакетов с высоты пятидесяти тысяч футов.

Вы указываете входной файл в конфигурации веб-пакета, и процесс начинается оттуда.

Webpack рекурсивно просматривает зависимости каждого файла и разрешает все зависимости до завершения обхода.

Сопоставитель сначала проверяет наличие соответствующих файлов для всех зависимостей. Если это так, он преобразует каждый файл в модуле и создает граф зависимостей для всех модулей.

Затем он объединяет все это в один файл (указанный в конфигурации как выходной файл).

Он поддерживает реестр всех модулей, поэтому их можно корректно вызывать / выполнять всякий раз, когда они требуются.

Загрузчики

Мотивация, лежащая в основе webpack, состоит в том, чтобы собрать все ваши зависимости, включая не только код, но и другие ресурсы, и создать граф зависимостей.

Компоновщики подготовлены только для обработки файлов JS, поэтому веб-пакет должен предварительно обработать все другие файлы и ресурсы, прежде чем они будут объединены. Здесь на сцену выходят погрузчики.

Webpack поддерживает большое количество форматов через загрузчики.

Согласно официальной документации, загрузчики - это преобразования, которые применяются к исходному коду модуля.

В основном загрузчики позволяют вам делать ряд вещей, например, преобразовывать файлы с другого языка в javascript или встроенные изображения в качестве URL-адресов данных. Загрузчики даже позволяют вам делать такие вещи, как импорт файлов CSS прямо из модулей JavaScript.

Вот как мы используем загрузчики:

{
test: /\.css$/,
use: [“style-loader”, “css-loader”],
}

Здесь мы проверяем, является ли файл файлом css, и если это так, мы используем css-loader и style-loader для преобразования файла перед его объединением (webpack применяет загрузчики в порядке справа налево)

Способ сопоставления загрузчика с разрешенным файлом можно настроить несколькими способами, в том числе по типу файла и местоположению в файловой системе.

Гибкость Webpack даже позволяет применить к файлу определенное преобразование в зависимости от того, куда он был импортирован в проект.

Помимо создания графа зависимостей и объединения модулей, webpack может выполнять ряд задач.

Webpack дает вам контроль над тем, как обращаться с различными активами, с которыми он сталкивается. Например, вы можете решить встроить ресурсы в свои пакеты JavaScript, чтобы избежать запросов. Webpack также позволяет использовать такие методы, как модули CSS, для объединения стилей с компонентами и для избежания проблем со стандартным стилем CSS. Именно эта гибкость делает webpack таким ценным.

Помимо всех функций, предоставляемых загрузчиками из коробки, мы можем выполнять множество сложных задач с помощью подключаемых модулей.

Плагины могут перехватывать события времени выполнения, предоставляемые webpack. Webpack предоставляет перехватчики для всех событий времени выполнения. И мы можем использовать эти хуки, чтобы делать много чего.

Хорошим примером может служить извлечение пакета, выполняемое ExtractTextPlugin, которое при использовании с загрузчиком извлекает файлы CSS из пакета в отдельный файл. Без этого шага CSS был бы встроен в плагин, который может перехватывать события времени выполнения, предоставляемые webpack. Хорошим примером является извлечение пакета, выполняемое ExtractTextPlugin, которое при использовании с загрузчиком извлекает файлы CSS из пакета в отдельный файл. Без этого шага CSS будет встроен в результирующий JavaScript, поскольку webpack по умолчанию обрабатывает весь код как JavaScript.

По своей сути webpack зависит от конфигурации. Вот пример конфигурации, которая охватывает основную мысль

const webpack = require("webpack");
module.exports = {
  // Where to start bundling
  entry: {
    app: "./entry.js",
  },
// Where to output
  output: {
    // Output to the same directory
    path: __dirname,
// Capture name from the entry using a pattern
    filename: "[name].js",
  },
// How to resolve encountered imports
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.js$/,
        use: "babel-loader",
        exclude: /node_modules/,
      },
    ],
  },
// What extra processing to perform
  plugins: [
    new webpack.DefinePlugin({ ... }),
  ],
// Adjust module resolution algorithm
  resolve: {
    alias: { ... },
  },
};

В заключение, Webpack - отличный инструмент, который можно легко использовать из коробки для автоматической загрузки и объединения CSS и других файлов и ресурсов в дополнение к JS с помощью простого в настройке файла конфигурации. И в то же время предлагает пользователям свободу выполнять гораздо более сложные задачи с его обширными настраиваемыми параметрами и плагинами.