Установка Webpack
Как правило, при разработке у нас получается много JavaScript файлов, содержащих различные кусочки кода. Это могут быть части нашего кода, либо сторонние библиотеки. Получается, что каждый такой файл мы должны подключить к HTML файлу через тег script.
Это не очень хорошо, так как много подключенных файлов замедляют скорость загрузки сайта. Поэтому для ускорения загрузки необходимо весь код сложить в один файл.
Однако, разрабатывать код в одном общем файле тоже не очень удобно. Поэтому в настоящее время практикуется следующий подход: код разрабатывается в отдельных файлах, а затем с помощью сборщика собирается в один общий файл, который и подключается к HTML файлу.
Отдельные файлы представляют собой ES модули. Эти модули подключаются к другим файлам через команду import.
Обычно создают некий основной файл, к которому подключаются остальные файлы. Этот файл называется точка входа.
Сборщик заходит в точку входа, смотрит какие модули подключены к ней. К этим модулям также могут быть подключены другие модули. Сборщик следует по всем подключениям и собирает весь код в один файл. Этот файл называется бандл.
Как правило, код, который пишет программист, располагается в папке src, а собранный код помещается в папку dist.
Сборщик также позволяет регулировать режим сборки. Режим 'development' предназначен для процесса разработки. Он собирает код удобным для разработки образом. Режим 'production' предназначен для итогового кода, который будет выложен в работу. В этом режиме код будет минифицирован, чтобы уменьшить его размер и увеличить скорость загрузки.
Установка сборщика Webpack
По умолчанию ES модули не работают. Их нужно включить. Для этого в файле package.json указать настройку type со значением module:
package.json{
"type" : "module"
}
Для сборки модулей мы будем пользоваться популярным сборщиком Webpack. Давайте установим сам сборщик:
npm install webpack --save-devТеперь установим также Webpack CLI, позволяющий обращаться к сборщику через командную строку:
npm install webpack-cli --save-devНастройка сборщика Webpack
Установленый сборщик должен быть настроен. Это делается в специальном конфигурционном файле webpack.config.js. В этом файле настройка mode регулирует режим сборки, настройка entry задает точку входа, а настройка output - имя бандла.
Создадим файл настроек со следующим содержимым:
webpack.config.jsexport default {
mode: 'development',
entry: './src/index.js',
output: {
filename: './dist/bundle.js',
}
};
Настройка запуска сборки Webpack
Давайте разместим в файле webpack.config.js еще и настройку "scripts" для удобного запуска Webpack:
webpack.config.js{
"type" : "module",
"scripts" : {
"build" : "webpack"
}
}
После этого, сборщик можно будет вызвать следующей командой:
npm run buildТестовая сборка через Webpack
Давайте сделаем тестовую сборку. Для этого сделаем тестовый файл с точкой входа:
/src/index.jsalert('it works');
В терминале, находясь в корневой папке вашего сайта, выполните сборку:
npm run buildВ результате в папке dist должен появиться файл bundle.js, содержащий сборку.
Подключение бандла к верстке
Для того, чтобы можно было запускать собранный код, его нужно подключить к верстке. Для этого в папке dist сделаем следующий файл:
/src/index.html<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script defer src="bundle.js"></script>
</head>
<body>
text
</body>
</html>