Начало работы с вебпаком
Определение
Webpack управляет всеми взаимозависимыми модулями и файлами в вашем проекте. Он объединяет файлы javascript и css, объединяя зависимые блоки кода в один, чтобы вам не нужно было управлять ими самостоятельно.
По своей сути webpack — это сборщик статических модулей для современных приложений JavaScript. Когда webpack обрабатывает ваше приложение, он строит граф зависимостей, который сопоставляет все модули, необходимые вашему проекту, и генерирует один или несколько пакетов.
Использование веб-пакета в вашем проекте
- Установите Node.js
2. npm init -y в каталог вашего проекта
3. npm install webpack -D
4. Добавьте скрипт в следующем формате в файл package.json.
webpack <entry-point> <destination-file>
Кроме того, вы можете создать файл webpack.config.js в своем проекте, чтобы соответствующим образом настроить webpack и процесс сборки.
Пример файла конфигурации:
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};Начиная с версии 4.0.0, webpack не требует файла конфигурации для сборки вашего проекта, тем не менее, он невероятно настраивается, чтобы лучше соответствовать вашим потребностям.
Начало работы с основными понятиями Webpack:
Вход
Точка входа указывает, какой модуль webpack должен использовать, чтобы начать построение своего внутреннего графа зависимостей. webpack выяснит, от каких других модулей и библиотек зависит эта точка входа (напрямую или косвенно).
По умолчанию его значение равно ./src/index.js, но вы можете указать другую (или несколько точек входа), настроив свойство входа в конфигурации веб-пакета.
Вывод
Свойство output сообщает веб-пакету, куда создавать связки, которые он создает, и как называть эти файлы. По умолчанию это ./dist/main.js для основного выходного файла и папка ./dist для любого другого сгенерированного файла.
Вы можете настроить эту часть процесса, указав поле output в своей конфигурации.
Погрузчики
По умолчанию webpack понимает только файлы JavaScript и JSON. Загрузчики позволяют веб-пакету обрабатывать другие типы файлов и преобразовывать их в действительные модули, которые могут использоваться вашим приложением и добавляться в граф зависимостей.
const path = require('path');
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};Плагины
В то время как загрузчики используются для преобразования определенных типов модулей, плагины можно использовать для выполнения более широкого круга задач, таких как оптимизация пакетов, управление активами и внедрение переменных среды.
Режим
Установив для параметра mode значение development, production или none, вы можете включить встроенные оптимизации веб-пакета, соответствующие каждой среде. Значение по умолчанию — production.
Совместимость с браузером
webpack поддерживает все браузеры, совместимые с ES5 (IE8 и ниже не поддерживаются). webpack требуется Promise для import() и require.ensure(). Если вы хотите поддерживать старые браузеры, вам нужно будет загрузить полифилл перед использованием этих выражений.
