Введение в сборщик модулей Webpack

Опубликовано: 27 Июля, 2021

Webpack: Webpack - это сборщик статических модулей, используемый для приложений JavaScript. Поскольку webpack понимает только файлы JavaScript и JSON, он преобразует внешние ресурсы, такие как HTML, CSS и изображения, в допустимые модули, если включены соответствующие загрузчики. Во время обработки вашего приложения веб-пакет внутренне строит граф зависимостей, который отображает каждый модуль, необходимый вашему проекту, и создает один или несколько выходных пакетов.

Некоторые основные концепции webpack:

  1. Вход
  2. Выход
  3. Погрузчики
  4. Плагины
  5. Режим

Вход: точка входа определяет, какой модуль должен использовать веб-пакет, чтобы начать построение своего внутреннего графа зависимостей. Значение точки входа по умолчанию - ./src/index.js , но в конфигурации веб-пакета вы можете указать другую или несколько точек входа, установив свойство входа в этом файле.

Давайте рассмотрим пример, в котором file.js внутри каталога GeeksForGeeks является точкой входа. Тогда файл webpack.config.js должен быть таким:

Имя файла: webpack.config.js

module.exports = {
 запись: './GeeksForGeeks/file.js'
};

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

Имя файла: webpack.config.js

 const path = require ('путь');
module.exports = {
 запись: './GeeksForGeeks/file.js',
 выход: {
   путь: path.resolve (__ dirname, 'gfg'),
   имя файла: 'GeeksForGeeks-webpack.bundle.js'
 }
};

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

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

  1. Тестовое свойство
  2. Свойство использования

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

Свойство use: используется для указания того, какой загрузчик следует использовать для преобразования.

Имя файла: webpack.config.js

 const path = require ('путь');
module.exports = {
 выход: {
   имя файла: 'GeeksForGeeks-webpack.bundle.js'
 },
 модуль: {
   правила: [
     {тест: /.txt$/, используйте: 'raw-loader'}
   ]
 }
};

Вышеупомянутая конфигурация веб-пакета выше определила свойство правил для одного модуля с двумя обязательными свойствами: тестировать и использовать . Когда компилятор webpack обнаруживает путь, который разрешается в файл '.txt' внутри оператора require () / import, он будет использовать raw-loader для его преобразования перед добавлением в пакет.

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

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

Имя файла: webpack.config.js

 const HtmlWebpackPlugin = require ('html-webpack-plugin');
const webpack = require ('webpack');
module.exports = {
 модуль: {
   правила: [
     {тест: /.txt$/, используйте: 'raw-loader'}
   ]
 },
 плагины: [
   новый HtmlWebpackPlugin ({template: './src/GeeksForGeeks.html'})
 ]
};

В приведенном выше примере html-webpack-plugin используется для создания HTML-файла для нашего приложения путем автоматической инъекции всех наших сгенерированных пакетов.

Режим: мы можем включить встроенные оптимизации webpack, которые соответствуют каждой среде, установив для параметра режима значение development, production или none. Его значение по умолчанию - производство.

Имя файла: webpack.config.js

 module.exports = {
 режим: 'развитие'
}