Webpack, в своей самой простой форме, представляет собой упаковщик модулей для современных приложений JavaScript. Когда Webpack запускается в проекте, он создает граф зависимостей, который принимает все типы модулей, которые могут понадобиться проекту, и в результате обработки этого графа он создает пакет приложения в качестве вывода.
Хотя современные библиотеки javascript сами создают модули веб-пакетов и пакетов, это очень полезно знать.
По сути;
По умолчанию Webpack поддерживает следующие типы модулей:
- Модули ECMAScript
- Модули CommonJS
- модули AMD
- Активы (шрифт, значок и т. д.)
- Модули WebAssembly
В дополнение к этим модулям Webpack также поддерживает языки, отличные от JavaScript, и препроцессоры, такие как babel, через загрузчики. Загрузчики указывают, как обрабатывать другие модули, недоступные по умолчанию в веб-пакете, и как в конечном итоге включить их в приложение.
Сообщество Webpack создало загрузчики для множества разных языков и языковых обработчиков.
Если привести пример таких загрузчиков:
- КофеСкрипт
- Машинопись
- ESNext (Вавилон)
- Сасс
- Меньше
- Стилус
- Вяз
…и т.д.
Таким образом, Webpack предоставляет мощный и многофункциональный API, позволяющий независимо разрабатывать приложения в любом стеке.
Основные понятия Webpack
- Вход
- Выход
- Погрузчики
- Плагины
- Режим (Prod, Dev)
- Совместимость с браузером
Ввод
Благодаря функции ввода Webpack получает информацию о том, с чего начать граф зависимостей проекта.
Свойство записи, значение по умолчанию которого равно ./src/index.js, также можно изменить следующим образом:
// webpack.config.js module.exports = { entry: './[YOUR_ENTRY_FILE_PATH].js' };
Вывод
С помощью свойства output указывается, куда будет помещен пакет-пакет, созданный в результате обработки проекта Webpack, и как будет называться пакет.
Путь по умолчанию: ./dist/main.js
// webpack.config.js const path = require('path'); module.exports = { entry: './[YOUR_ENTRY_FILE_PATH].js', output: { path: path.resolve(__dirname, 'dist'), filename: 'example-webpack.bundle.js' } };
Благодаря функции path указывается каталог, в который будут переброшены созданные файлы, а filename — это имя файла. Модуль пути, полученный с помощью функции require() выше, является одним из основных модулей Node.js и используется для установки путей к файлам.
Погрузчики
По умолчанию Webpack может обрабатывать только файлы JavaScript и JSON. Благодаря загрузчикам другие типы файлов, включенные в зависимости проекта, также могут быть обработаны и преобразованы в модули, понятные браузеру.
Загрузчики в своей простейшей форме включают в себя две функции:
- Свойство test получает выражение в виде регулярного выражения. Таким образом, все файлы, включенные в это регулярное выражение, обрабатываются соответствующим загрузчиком.
- Свойство use указывает, какой загрузчик будет преобразовывать эти файлы. Пример использования загрузчика выглядит следующим образом:
// webpack.config.js const path = require('path'); module.exports = { output: { filename: 'example-webpack.bundle.js' }, module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] } };
С помощью свойства rules в файле конфигурации выше для модуля определены два свойства с именами test и use. Благодаря этой конфигурации Webpack преобразует файлы txt, включенные в оператор import/require, в проект с помощью raw-loader и добавляет их в комплект. >.
Плагины
В то время как загрузчики помогают использовать различные типы модулей, плагины; Он играет роль во многих задачах, таких как оптимизация пакетов, управление активами и внедрение переменных среды, таких как PROD/DEV, в код. Чтобы плагин можно было использовать, он должен быть включен в конфиг функцией require() и добавлен в массив плагинов. У них также есть свои специальные параметры для настройки плагинов. Поскольку плагин можно использовать более чем в одном месте файла конфигурации для разных целей, его необходимо использовать, создав экземпляр с оператором new. Простое использование плагина выглядит следующим образом:
// webpack.config.js const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); module.exports = { entry: 'index.js', output: { path: path.resolve(__dirname, './dist'), filename: 'index_bundle.js' }, plugins: [new HtmlWebpackPlugin({template: './src/index.html'})] };
Благодаря html-webpack-plugin, используемому в этом примере, все пакеты, созданные webpack, будут внедрены в него путем создания нового файла index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Webpack Demo App</title> </head> <body> <script src="index_bundle.js"></script> </body> </html>
Режим
Параметр режима, используемый для активации оптимизаций, которые Webpack применяет по умолчанию; Он может быть установлен на производство, разработку или ничего.
Значение по умолчанию — производство.
// webpack.config.js module.exports = { mode: 'production' };
Совместимость браузера
Webpack поддерживает все браузеры, совместимые с ES5 (без поддержки IE8 и ниже). Это связано с тем, что Webpack нуждается в Promise для операторов импорта. Прежде чем использовать оператор import, необходимо загрузить полифилл для поддержки старых браузеров.
документация веб-пакета: https://webpack.js.org/concepts/
Спасибо за прочтение, по мере сил старался поделиться своими знаниями, надеюсь, было полезно.
В следующем посте я расскажу об установке и использовании веб-пакета. :)