Принцип работы сборщика Webpack
Как правило, при разработке у нас получается много JavaScript файлов, содержащих различные кусочки кода. Это могут быть части нашего кода, либо сторонние библиотеки. Получается, что каждый такой файл мы должны подключить к HTML файлу через тег script
.
Это не очень хорошо, так как много подключенных файлов замедляют скорость загрузки сайта. Поэтому для ускорения загрузки необходимо весь код сложить в один файл. Однако, разрабатывать код в одном общем файле тоже не очень удобно. Поэтому в настоящее время практикуется следующий подход: код разрабатывается в отдельных файлах, а затем с помощью сборщика собирается в один общий файл, который и подключается к HTML файлу.
Отдельные файлы представляют собой ES
модули. Эти модули подключаются к другим файлам через команду import
.
Обычно создают некий основной файл, к которому подключаются остальные файлы. Этот файл называется точка входа
. Сборщик заходит в точку входа, смотрит какие модули подключены к ней. К этим модулям также могут быть подключены другие модули. Сборщик следует по всем подключениям и собирает весь код в один файл. Этот файл называется бандл
.
Проблема с кешем в браузерах
Браузер кеширует подключенные файлы стилей CSS, скриптов JavaScript и картинок. Кеширование означает, что подключенные файлы браузер скачивает только при первом заходе пользователя на сайт. При последующих заходах эти файлы уже не будут скачиваться опять, а возьмутся из кеша браузера.
Если вы поменяется что-то в вашем коде и затем выложите изменения на хостинг - все пользователи, которые уже заходили на ваш сайт будут иметь старую кешированную копию кода.
Первое решение проблемы
Для борьбы с таким поведением нужно каждый раз переименовывать измененные файлы. На практике это не удобно, поэтому используется хитрый прием. Его суть заключается в том, что при подключении файла после имени файла ставим вопрос, знак равно и номер версии вашего скрипта. Такая конструкция называется GET
параметром.
Для борьбы с кешем, когда вы вносите изменения в ваш файл с кодом, вам нужно будет увеличить значение GET
параметра на единицу. Смотрите пример применения подобного подхода:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="styles.css?v=1">
<script src="script.js?v=1"></script>
</head>
<body>
</body>
</html>
Второе решение проблемы
Существует и более продвинутый подход. Он заключается в том, что к именам файлов добавляются случайные строки, например, вот так:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="styles.398db7afe3b52e94bb25.css">
<script src="script.1d12c304c284a752cb9a.js"></script>
</head>
<body>
</body>
</html>
Эти строки называются хешами. Хеш представляет собой уникальную строку. Она вычисляется из содержимого файла специальным образом. Все это позволяет делать Webpack
.