Введение в сборщик модулей Webpack
Webpack: Webpack - это сборщик статических модулей, используемый для приложений JavaScript. Поскольку webpack понимает только файлы JavaScript и JSON, он преобразует внешние ресурсы, такие как HTML, CSS и изображения, в допустимые модули, если включены соответствующие загрузчики. Во время обработки вашего приложения веб-пакет внутренне строит граф зависимостей, который отображает каждый модуль, необходимый вашему проекту, и создает один или несколько выходных пакетов.
Некоторые основные концепции webpack:
- Вход
- Выход
- Погрузчики
- Плагины
- Режим
Вход: точка входа определяет, какой модуль должен использовать веб-пакет, чтобы начать построение своего внутреннего графа зависимостей. Значение точки входа по умолчанию - ./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. Загрузчики обрабатывают другие типы файлов и после этого преобразуют их в допустимые модули, которые могут быть использованы нашим приложением, и добавляют их в граф зависимостей.
Загрузчики предварительно обрабатывают файлы другого типа и их в пакет. Загрузчики имеют два свойства в конфигурации веб-пакета, с помощью которых они достигают этого:
- Тестовое свойство
- Свойство использования
Свойство 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 = { режим: 'развитие' }