1 added
1 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#статьи</a></p>
1
<p><a>#статьи</a></p>
2
<ul><li>25 июл 2023</li>
2
<ul><li>25 июл 2023</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Настраиваем модульный сборщик и создаём первый проект.</p>
4
</ul><p>Настраиваем модульный сборщик и создаём первый проект.</p>
5
<p>Иллюстрация: Оля Ежак для Skillbox Media</p>
5
<p>Иллюстрация: Оля Ежак для Skillbox Media</p>
6
<p>Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.</p>
6
<p>Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.</p>
7
<p>В начале 1990-х для создания сайтов использовали только HTML и CSS. Тогда веб-страницы были статичными и просто показывали информацию посетителям. В нулевых у разработчиков появился JavaScript, позволяющий добавлять на сайт интерактивные элементы.</p>
7
<p>В начале 1990-х для создания сайтов использовали только HTML и CSS. Тогда веб-страницы были статичными и просто показывали информацию посетителям. В нулевых у разработчиков появился JavaScript, позволяющий добавлять на сайт интерактивные элементы.</p>
8
<p>С развитием сайтов, количество используемых в них JS-скриптов росло, так же как и число зависимостей между отдельными элементами веб-страниц. Фронтендер должен был уже не просто загрузить файлы в HTML, а сделать это в определённом порядке, учитывая их взаимосвязи. Иначе сайт мог работать неправильно. Для решения этой проблемы был разработан Webpack - модульный сборщик, объединяющий JS-скрипты и их зависимости в один файл. В этой статье разберёмся в его работе и создадим первый Webpack-проект с Алексеем Пуховым, директором дивизиона в Notamedia.Integrator.</p>
8
<p>С развитием сайтов, количество используемых в них JS-скриптов росло, так же как и число зависимостей между отдельными элементами веб-страниц. Фронтендер должен был уже не просто загрузить файлы в HTML, а сделать это в определённом порядке, учитывая их взаимосвязи. Иначе сайт мог работать неправильно. Для решения этой проблемы был разработан Webpack - модульный сборщик, объединяющий JS-скрипты и их зависимости в один файл. В этой статье разберёмся в его работе и создадим первый Webpack-проект с Алексеем Пуховым, директором дивизиона в Notamedia.Integrator.</p>
9
<p>Содержание:</p>
9
<p>Содержание:</p>
10
<ul><li><a>Что такое Webpack</a></li>
10
<ul><li><a>Что такое Webpack</a></li>
11
<li><a>Зачем он нужен</a></li>
11
<li><a>Зачем он нужен</a></li>
12
<li><a>Установка и первоначальная настройка</a></li>
12
<li><a>Установка и первоначальная настройка</a></li>
13
<li><a>Как работает Webpack</a></li>
13
<li><a>Как работает Webpack</a></li>
14
<li><a>Режимы работы</a></li>
14
<li><a>Режимы работы</a></li>
15
<li><a>Загрузчики</a></li>
15
<li><a>Загрузчики</a></li>
16
<li><a>Плагины</a></li>
16
<li><a>Плагины</a></li>
17
<li><a>Что почитать?</a></li>
17
<li><a>Что почитать?</a></li>
18
</ul><p>Директор дивизиона в Notamedia.Integrator.</p>
18
</ul><p>Директор дивизиона в Notamedia.Integrator.</p>
19
<p>Webpack - это модульный сборщик (bundler) с открытым исходным кодом, написанный на JS. Он берёт несколько скриптов JavaScript с их зависимостями и объединяет в файл, который используется браузером.</p>
19
<p>Webpack - это модульный сборщик (bundler) с открытым исходным кодом, написанный на JS. Он берёт несколько скриптов JavaScript с их зависимостями и объединяет в файл, который используется браузером.</p>
20
<p>Почему разработчики выбирают именно его, а не другие бандлеры? Webpack отличается<a>подробной документацией</a>и активным коммьюнити. Кроме этого, он имеет ряд преимуществ по сравнению с аналогами:</p>
20
<p>Почему разработчики выбирают именно его, а не другие бандлеры? Webpack отличается<a>подробной документацией</a>и активным коммьюнити. Кроме этого, он имеет ряд преимуществ по сравнению с аналогами:</p>
21
<ul><li>Ускоряет разработку, убирая необходимость постоянно перезагружать веб-страницу при изменениях в JS-файлах.</li>
21
<ul><li>Ускоряет разработку, убирая необходимость постоянно перезагружать веб-страницу при изменениях в JS-файлах.</li>
22
<li>Обеспечивает разделение кода на отдельные модули, которые можно переиспользовать внутри веб-приложения.</li>
22
<li>Обеспечивает разделение кода на отдельные модули, которые можно переиспользовать внутри веб-приложения.</li>
23
-
<li>Позволяет избежать проблем с перезаписью глобальных переменных. Любой файл, который создаётся с помощью Webpack, является модулем. Следовательно, каждая переменная, которую вы создадите в этом файле, будет находиться только в локальной области видимости. Поэтому проблема перезаписи глобальных переменных не возникает.</li>
23
+
<li>Позволяет избежать проблем с перезаписью глобальных переменных. Любой файл, кот��рый создаётся с помощью Webpack, является модулем. Следовательно, каждая переменная, которую вы создадите в этом файле, будет находиться только в локальной области видимости. Поэтому проблема перезаписи глобальных переменных не возникает.</li>
24
<li>Поддерживает минификацию, то есть сокращение объёма кода без изменения его функциональности. Это позволяет сжать итоговый JS-файл и ускорить его выполнение.</li>
24
<li>Поддерживает минификацию, то есть сокращение объёма кода без изменения его функциональности. Это позволяет сжать итоговый JS-файл и ускорить его выполнение.</li>
25
<li>Умеет работать с разными спецификациями модулей: CommonJS-, AMD-, ES-модулями и другими.</li>
25
<li>Умеет работать с разными спецификациями модулей: CommonJS-, AMD-, ES-модулями и другими.</li>
26
</ul><p>Даже простой веб-проект содержит файлы HTML, CSS, JavaScript и дополнительные ресурсы: шрифты, изображения и так далее. Главная цель использования Webpack - упаковать всё это в один файл index.html с правильными ссылками и учётом зависимостей.</p>
26
</ul><p>Даже простой веб-проект содержит файлы HTML, CSS, JavaScript и дополнительные ресурсы: шрифты, изображения и так далее. Главная цель использования Webpack - упаковать всё это в один файл index.html с правильными ссылками и учётом зависимостей.</p>
27
Общая схема работы сборщика модулей<em>Скриншот:</em><a><em>Webpack</em></a><em>/ Skillbox Media</em><p>Сценарии для веб-страниц могут быть разного объёма - от пары сотен до десятков тысяч строк кода на JS. Управлять ими и учитывать внутренние взаимосвязи между функциями и модулями сложно. Поэтому многие разработчики разделяют код на несколько файлов, подключая каждый из них по отдельности.</p>
27
Общая схема работы сборщика модулей<em>Скриншот:</em><a><em>Webpack</em></a><em>/ Skillbox Media</em><p>Сценарии для веб-страниц могут быть разного объёма - от пары сотен до десятков тысяч строк кода на JS. Управлять ими и учитывать внутренние взаимосвязи между функциями и модулями сложно. Поэтому многие разработчики разделяют код на несколько файлов, подключая каждый из них по отдельности.</p>
28
<p>Это может стать проблемой, так как скрипты требуется загружать в правильном порядке, учитывая их иерархию. Если ошибиться, то страница будет отображаться неправильно, а некоторые элементы на ней перестанут работать.</p>
28
<p>Это может стать проблемой, так как скрипты требуется загружать в правильном порядке, учитывая их иерархию. Если ошибиться, то страница будет отображаться неправильно, а некоторые элементы на ней перестанут работать.</p>
29
<p>Решение этой задачи есть. Представьте, что отдельные файлы собираются в один скрипт, который учитывает их взаимосвязи и порядок загрузки. И только его требуется подключить в коде веб-страницы. Звучит как магия, но именно так работает Webpack.</p>
29
<p>Решение этой задачи есть. Представьте, что отдельные файлы собираются в один скрипт, который учитывает их взаимосвязи и порядок загрузки. И только его требуется подключить в коде веб-страницы. Звучит как магия, но именно так работает Webpack.</p>
30
<p>Для большинства проектов рекомендуется<strong>локальная установка Webpack</strong>. Это позволит избежать<a>конфликта версий бандлера</a>, если вы работаете над двумя и более сайтами одновременно.</p>
30
<p>Для большинства проектов рекомендуется<strong>локальная установка Webpack</strong>. Это позволит избежать<a>конфликта версий бандлера</a>, если вы работаете над двумя и более сайтами одновременно.</p>
31
<p>Обычно Webpack запускается с помощью одного или нескольких скриптов NPM, которые ищут модули в локальном каталоге node_modules. Как его наполнить - поговорим чуть позже. А сейчас начнём с самых основ.</p>
31
<p>Обычно Webpack запускается с помощью одного или нескольких скриптов NPM, которые ищут модули в локальном каталоге node_modules. Как его наполнить - поговорим чуть позже. А сейчас начнём с самых основ.</p>
32
<p>Перед началом работы с Webpack требуется установить Node.js на компьютер. Он необходим для выполнения кода JavaScript на стороне сервера. Для установки<a>перейдите на официальный сайт Node.js</a>и загрузите последнюю версию для вашей ОС. Запустите установочный файл и следуйте инструкциям на экране.</p>
32
<p>Перед началом работы с Webpack требуется установить Node.js на компьютер. Он необходим для выполнения кода JavaScript на стороне сервера. Для установки<a>перейдите на официальный сайт Node.js</a>и загрузите последнюю версию для вашей ОС. Запустите установочный файл и следуйте инструкциям на экране.</p>
33
<p>Откройте терминал или командную строку. Создайте пустую папку для нашего проекта и перейдите в неё:</p>
33
<p>Откройте терминал или командную строку. Создайте пустую папку для нашего проекта и перейдите в неё:</p>
34
mkdir web_project cd web_project<p>Теперь выполните команду npm init. Она сгенерирует файл package.json, в котором будут храниться зависимости проекта.</p>
34
mkdir web_project cd web_project<p>Теперь выполните команду npm init. Она сгенерирует файл package.json, в котором будут храниться зависимости проекта.</p>
35
<p>Для установки сборщика модулей запустите команду npm install:</p>
35
<p>Для установки сборщика модулей запустите команду npm install:</p>
36
npm install webpack webpack-cli --save-dev<p>Флаг --save-dev указывает на то, что бандлер будет применяться для разработки промежуточных версий сайта, а не для сборки релиза. Если вы хотите использовать другие режимы работы Webpack, о которых мы расскажем дальше, то можете не указывать флаг.</p>
36
npm install webpack webpack-cli --save-dev<p>Флаг --save-dev указывает на то, что бандлер будет применяться для разработки промежуточных версий сайта, а не для сборки релиза. Если вы хотите использовать другие режимы работы Webpack, о которых мы расскажем дальше, то можете не указывать флаг.</p>
37
<p>Создайте файл webpack.config.js в корневой папке вашего проекта. Он необходим для настройки параметров сборки и подключения плагинов.</p>
37
<p>Создайте файл webpack.config.js в корневой папке вашего проекта. Он необходим для настройки параметров сборки и подключения плагинов.</p>
38
<p>Добавьте в файл следующий код:</p>
38
<p>Добавьте в файл следующий код:</p>
39
const path = require('path'); module.exports = { entry: './src/web_project/index.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') } };<p>Здесь мы определяем точку входа в проект (src/web_project/index.js), имя выходного файла (main.js) и путь к папке для сохранения собранного проекта (dist).</p>
39
const path = require('path'); module.exports = { entry: './src/web_project/index.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') } };<p>Здесь мы определяем точку входа в проект (src/web_project/index.js), имя выходного файла (main.js) и путь к папке для сохранения собранного проекта (dist).</p>
40
<p>Откройте package.json, созданный на втором шаге, и добавьте в него команду сборки Webpack, указав через флаг --config конфигурационный файл webpack.config.js:</p>
40
<p>Откройте package.json, созданный на втором шаге, и добавьте в него команду сборки Webpack, указав через флаг --config конфигурационный файл webpack.config.js:</p>
41
{ ... "scripts": { "build": "webpack --config webpack.config.js" }, ... }<p>Сохраните файл и запустите в консоли команду:</p>
41
{ ... "scripts": { "build": "webpack --config webpack.config.js" }, ... }<p>Сохраните файл и запустите в консоли команду:</p>
42
npm run build<p>После её выполнения в каталоге проекта обновится main.js, в котором будут собраны все скрипты и зависимости в нужном порядке.</p>
42
npm run build<p>После её выполнения в каталоге проекта обновится main.js, в котором будут собраны все скрипты и зависимости в нужном порядке.</p>
43
<p>Теперь можно использовать бандлер для сборки реальных JavaScript-проектов. Обратите внимание, что это базовый пример установки Webpack - для полноценного веб-сайта могут потребоваться дополнительные плагины и настройки для оптимизации производительности и функциональности приложения.</p>
43
<p>Теперь можно использовать бандлер для сборки реальных JavaScript-проектов. Обратите внимание, что это базовый пример установки Webpack - для полноценного веб-сайта могут потребоваться дополнительные плагины и настройки для оптимизации производительности и функциональности приложения.</p>
44
<p>Давайте посмотрим на работу Webpack в конкретном проекте. Допустим, у нас есть скрипты на странице:</p>
44
<p>Давайте посмотрим на работу Webpack в конкретном проекте. Допустим, у нас есть скрипты на странице:</p>
45
<body> ... <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script> <script src='libs/react.min.js'></script> <script src='src/admin.js'></script> <script src='src/dashboard.js'></script> <script src='src/api.js'></script> <script src='src/auth.js'></script> <script src='src/rickastley.js'></script> </body><p>Нам нужно перечислить их именно в том порядке, в котором они будут ссылаться друг на друга или вызывать перекрёстные функции - если этого не сделать, то при запуске мы получим ошибку или потеряем часть функциональности.</p>
45
<body> ... <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script> <script src='libs/react.min.js'></script> <script src='src/admin.js'></script> <script src='src/dashboard.js'></script> <script src='src/api.js'></script> <script src='src/auth.js'></script> <script src='src/rickastley.js'></script> </body><p>Нам нужно перечислить их именно в том порядке, в котором они будут ссылаться друг на друга или вызывать перекрёстные функции - если этого не сделать, то при запуске мы получим ошибку или потеряем часть функциональности.</p>
46
<p>Для разработчика удобнее, когда мы подключаем к странице один скрипт, в котором уже учтены все тонкости и последовательности вызовов:</p>
46
<p>Для разработчика удобнее, когда мы подключаем к странице один скрипт, в котором уже учтены все тонкости и последовательности вызовов:</p>
47
<body> ... <script src='index_bundle.js'></script> </body><p>Webpack работает именно так. У него есть единая точка входа - файл index.js, объединяющий в себе все JS-файлы задействованные в проекте. Внутри точки входа они прописываются с учётом иерархии, например так:</p>
47
<body> ... <script src='index_bundle.js'></script> </body><p>Webpack работает именно так. У него есть единая точка входа - файл index.js, объединяющий в себе все JS-файлы задействованные в проекте. Внутри точки входа они прописываются с учётом иерархии, например так:</p>
48
imports about.js imports dashboard.js imports graph.js imports auth.js imports api.js<p>Это используемые в проекте скрипты, которые Webpack соберёт в один файл. Всё, что нам остаётся, - прописать ссылку на index.js в webpack.config.js:</p>
48
imports about.js imports dashboard.js imports graph.js imports auth.js imports api.js<p>Это используемые в проекте скрипты, которые Webpack соберёт в один файл. Всё, что нам остаётся, - прописать ссылку на index.js в webpack.config.js:</p>
49
module.exports = { entry: './app/index.js' }<p>Webpack имеет несколько режимов работы, которые позволяют ускорить разработку: development, production и none. Подробно о них можно<a>прочесть в документации</a>.</p>
49
module.exports = { entry: './app/index.js' }<p>Webpack имеет несколько режимов работы, которые позволяют ускорить разработку: development, production и none. Подробно о них можно<a>прочесть в документации</a>.</p>
50
<p>Используется в создании промежуточных сборок веб-приложений для ускорения написания кода. Особенность режима разработки - подробная информация об ошибках и предупреждениях для фронтендера, дебаггер, поддержка HMR и другие возможности, облегчающие работу над JS-скриптами.</p>
50
<p>Используется в создании промежуточных сборок веб-приложений для ускорения написания кода. Особенность режима разработки - подробная информация об ошибках и предупреждениях для фронтендера, дебаггер, поддержка HMR и другие возможности, облегчающие работу над JS-скриптами.</p>
51
module.exports = { mode: 'development', // Другие настройки }<p>Подходит для релизных сборок. Режим production оптимизирует сгенерированный код для ускорения загрузки страницы, и минимизирует размер файлов за счёт сжатия и оптимизации модулей. Важно, что код может стать менее читаемым, поэтому режим не рекомендуется использовать на промежуточных сборках.</p>
51
module.exports = { mode: 'development', // Другие настройки }<p>Подходит для релизных сборок. Режим production оптимизирует сгенерированный код для ускорения загрузки страницы, и минимизирует размер файлов за счёт сжатия и оптимизации модулей. Важно, что код может стать менее читаемым, поэтому режим не рекомендуется использовать на промежуточных сборках.</p>
52
module.exports = { mode: 'production', // Другие настройки }<p>Режим по умолчанию: без оптимизации и подробных отчётов об ошибках и предупреждениях.</p>
52
module.exports = { mode: 'production', // Другие настройки }<p>Режим по умолчанию: без оптимизации и подробных отчётов об ошибках и предупреждениях.</p>
53
module.exports = { mode: 'none', // Другие настройки }<p>В каждом из режимов можно настроить параметры сборки в зависимости от потребностей вашего проекта. Например, указать уровень оптимизации для режима production.</p>
53
module.exports = { mode: 'none', // Другие настройки }<p>В каждом из режимов можно настроить параметры сборки в зависимости от потребностей вашего проекта. Например, указать уровень оптимизации для режима production.</p>
54
module.exports = { mode: 'production', optimization: { // Настраиваем параметры оптимизации minimize: true, // Устанавливаем уровень минимизации splitChunks: { chunks: 'all', // Учитываем все чанки в проекте }, }, // Другие параметры настройки }<p>Для запуска Webpack с нужными опциями используется командная строка. Достаточно указать режим работы через флаг --mode. Например:</p>
54
module.exports = { mode: 'production', optimization: { // Настраиваем параметры оптимизации minimize: true, // Устанавливаем уровень минимизации splitChunks: { chunks: 'all', // Учитываем все чанки в проекте }, }, // Другие параметры настройки }<p>Для запуска Webpack с нужными опциями используется командная строка. Достаточно указать режим работы через флаг --mode. Например:</p>
55
webpack --mode development webpack --mode production webpack --mode none<p>Если мы хотим использовать конкретный режим по умолчанию, то можем указать его в конфигурационном файле Webpack. Если этого не сделать, будет выбран стандартный режим none.</p>
55
webpack --mode development webpack --mode production webpack --mode none<p>Если мы хотим использовать конкретный режим по умолчанию, то можем указать его в конфигурационном файле Webpack. Если этого не сделать, будет выбран стандартный режим none.</p>
56
<p>Для расширения функциональности Webpack можно использовать загрузчики -<strong>loaders</strong>. Они добавляют возможность работать с кодом, написанным на других языках программирования, и файлами разных типов:</p>
56
<p>Для расширения функциональности Webpack можно использовать загрузчики -<strong>loaders</strong>. Они добавляют возможность работать с кодом, написанным на других языках программирования, и файлами разных типов:</p>
57
<ul><li><strong>babel-loader</strong>: переводит ES6 JavaScript в ES5 JavaScript, который понимается всеми браузерами.</li>
57
<ul><li><strong>babel-loader</strong>: переводит ES6 JavaScript в ES5 JavaScript, который понимается всеми браузерами.</li>
58
<li><strong>ts-loader</strong>: транспилирует TypeScript в JavaScript.</li>
58
<li><strong>ts-loader</strong>: транспилирует TypeScript в JavaScript.</li>
59
<li><strong>coffee-loader</strong>: транспилирует CoffeeScript в JavaScript.</li>
59
<li><strong>coffee-loader</strong>: транспилирует CoffeeScript в JavaScript.</li>
60
<li><strong>css-loader</strong>: преобразует препроцессоры CSS, такие как SASS и LESS, в CSS.</li>
60
<li><strong>css-loader</strong>: преобразует препроцессоры CSS, такие как SASS и LESS, в CSS.</li>
61
<li><strong>style-loader</strong>: помещает выходные строки, сгенерированные css-loader, в теги <style> в файле index.html.</li>
61
<li><strong>style-loader</strong>: помещает выходные строки, сгенерированные css-loader, в теги <style> в файле index.html.</li>
62
<li><strong>url-loader</strong>: преобразует большие изображения, включённые в виде отдельных файлов, в URL-адреса base64.</li>
62
<li><strong>url-loader</strong>: преобразует большие изображения, включённые в виде отдельных файлов, в URL-адреса base64.</li>
63
<li><strong>html-loader</strong>: экспортирует HTML в виде строки, с которой может работать JavaScript.</li>
63
<li><strong>html-loader</strong>: экспортирует HTML в виде строки, с которой может работать JavaScript.</li>
64
</ul><p>Плагины Webpack используются для эффективного управления зависимостями, менеджмента модулей и оптимизации кода. Они ускоряют разработку и повышают её удобство.</p>
64
</ul><p>Плагины Webpack используются для эффективного управления зависимостями, менеджмента модулей и оптимизации кода. Они ускоряют разработку и повышают её удобство.</p>
65
<p>Существует<a>24 внутренних плагина</a>и <a>48 внешних</a>. Отобрали для вас самые популярные, которые точно пригодятся в работе:</p>
65
<p>Существует<a>24 внутренних плагина</a>и <a>48 внешних</a>. Отобрали для вас самые популярные, которые точно пригодятся в работе:</p>
66
<p>1.<strong>HtmlWebpackPlugin</strong> - генерирует HTML-файл для вашего приложения, с автоматической вставкой ссылок на сгенерированные JavaScript-файлы. Он также позволяет использовать дополнительные функции, такие как минификация HTML-кода и шаблоны страниц.</p>
66
<p>1.<strong>HtmlWebpackPlugin</strong> - генерирует HTML-файл для вашего приложения, с автоматической вставкой ссылок на сгенерированные JavaScript-файлы. Он также позволяет использовать дополнительные функции, такие как минификация HTML-кода и шаблоны страниц.</p>
67
<p>2.<strong>MiniCssExtractPlugin</strong> - извлекает CSS-файлы из JavaScript-файлов и сохраняет их отдельно. Это ускоряет загрузку страницы и уменьшает размер основного JS-файла.</p>
67
<p>2.<strong>MiniCssExtractPlugin</strong> - извлекает CSS-файлы из JavaScript-файлов и сохраняет их отдельно. Это ускоряет загрузку страницы и уменьшает размер основного JS-файла.</p>
68
<p>3.<strong>DefinePlugin</strong> - позволяет определять глобальные переменные в вашем приложении, которые можно использовать для проверки условий и изменения поведения веб-страниц на основе этих переменных.</p>
68
<p>3.<strong>DefinePlugin</strong> - позволяет определять глобальные переменные в вашем приложении, которые можно использовать для проверки условий и изменения поведения веб-страниц на основе этих переменных.</p>
69
<p>4.<strong>HotModuleReplacementPlugin</strong>(HMR) - используется для обновления модулей в режиме реального времени без перезагрузки страницы. Это ускоряет разработку приложения и сокращает время отладки.</p>
69
<p>4.<strong>HotModuleReplacementPlugin</strong>(HMR) - используется для обновления модулей в режиме реального времени без перезагрузки страницы. Это ускоряет разработку приложения и сокращает время отладки.</p>
70
<p>5.<strong>CleanWebpackPlugin</strong> - очищает папку сборки проекта перед каждой новой сборкой, чтобы избавиться от ненужных файлов и папок.</p>
70
<p>5.<strong>CleanWebpackPlugin</strong> - очищает папку сборки проекта перед каждой новой сборкой, чтобы избавиться от ненужных файлов и папок.</p>
71
<p>6.<strong>CopyWebpackPlugin</strong> - копирует файлы из одной папки в другую во время сборки. Это может быть полезно для сохранения конфигураций, изображений или других файлов, необходимых для вашего приложения.</p>
71
<p>6.<strong>CopyWebpackPlugin</strong> - копирует файлы из одной папки в другую во время сборки. Это может быть полезно для сохранения конфигураций, изображений или других файлов, необходимых для вашего приложения.</p>
72
<p>7.<strong>UglifyjsPlugin</strong> - минифицирует JavaScript-код для уменьшения размера файлов и ускорения загрузки страницы.</p>
72
<p>7.<strong>UglifyjsPlugin</strong> - минифицирует JavaScript-код для уменьшения размера файлов и ускорения загрузки страницы.</p>
73
<p>8.<strong>BundleAnalyzerPlugin</strong> - анализирует состав сгенерированного JS-файла, помогая определить, какие модули и зависимости влияют на его размер и как можно оптимизировать веб-приложение.</p>
73
<p>8.<strong>BundleAnalyzerPlugin</strong> - анализирует состав сгенерированного JS-файла, помогая определить, какие модули и зависимости влияют на его размер и как можно оптимизировать веб-приложение.</p>
74
<p>Лучший источник информации о Webpack -<a>официальная документация</a>. Она постоянно обновляется и содержит практические примеры использования бандлера.</p>
74
<p>Лучший источник информации о Webpack -<a>официальная документация</a>. Она постоянно обновляется и содержит практические примеры использования бандлера.</p>
75
<p>Углубиться в тему можно с помощью книг:</p>
75
<p>Углубиться в тему можно с помощью книг:</p>
76
<ul><li>SurviveJS. Webpack 5: From apprentice to master Юхо Вепсалайнена;</li>
76
<ul><li>SurviveJS. Webpack 5: From apprentice to master Юхо Вепсалайнена;</li>
77
<li>Modern Full-Stack Development: Using TypeScript, React, Node.js, Webpack, and Docker Франка Заметти.</li>
77
<li>Modern Full-Stack Development: Using TypeScript, React, Node.js, Webpack, and Docker Франка Заметти.</li>
78
</ul><a><b>Бесплатный курс по Python ➞</b>Мини-курс для новичков и для опытных кодеров. 4 крутых проекта в портфолио, живое общение со спикером. Кликните и узнайте, чему можно научиться на курсе. Смотреть программу</a>
78
</ul><a><b>Бесплатный курс по Python ➞</b>Мини-курс для новичков и для опытных кодеров. 4 крутых проекта в портфолио, живое общение со спикером. Кликните и узнайте, чему можно научиться на курсе. Смотреть программу</a>