Пошаговое описание принципов работы Webpack, создания проектов, установка необходимых пакетов, настройка webpack 5. Обработка html, css, scss, sass, pug, images, fonts. Подключение jQuery, bootstrap, babel-loader.

В конфигурацию Webpack внесены изменения в связи с выходом новой webpack-dev-server версии 4 и выше:
1. В файле package.json в скрипте "start" удален флаг --open.
2. В файле конфигурации webpack.config.js добавлен devServer с соответствующими опциями открытия браузера и перезагрузки страницы при изменениях. При этом режим hot (Hot Module Replacement) указывать нет необходимости - в webpack-dev-server v4.0.0 и выше он задействован по умолчанию.
3. Изменен способ запроса изображений в миксине image в фале _image.pug через require.

На развитие канала:

Binance ID: 439718976
Карта USD (Visa): 4731 1856 1108 4077
Карта USD (Master Card): 5168 7520 1955 1822
Карта EUR (Master Card): 5168 7451 2144 3672
Карта UAH: 4731 1856 1217 7318

00:00 - Введение
00:22 - Теория. Создание и инициализация проекта.
01:30 - Теория. Файл package.json и папка node_modules.
03:23 - Теория. Режимы разработки.
03:53 - Теория. Папка src.
04:07 - Теория. Папка dist.
04:32 - Теория. Файл конфигурации webpack.config.js.
04:50 - Теория. Входные точки entry points, выходные точки output points.
06:29 - Теория. Введение plugins, loaders, asset modules.
06:29 - Теория. Loaders.
08:01 - Теория. Plugins.
08:39 - Теория. Asset modules.
08:51 - Теория. Описание назначения plugins, loaders, asset modules.
10:28 - Теория. Принципы работы webpack.
12:17 - Создание и инициализация проекта.
14:22 - SCRIPTS. Настройка скриптов в package.json.
16:25 - NODE_ENV.Настройка переменной окружения в package.json.
17:54 - CONFIG. Создание файла конфигурации webpack.config.js.
18:27 - MODE. Задание режима разработки через свойство mode.
19:37 - HTML. Настройка компиляции html. HtmlWebpackPlugin.
20:48 - STYLES. Настройка компиляции стилей. Sass-loader, post-css-loader, css-loader, style-loader, MiniCssExtractPlugin.
23:50 - SASS, SCSS.Настройка компиляции файлов препроцессоров.
25:27 - Настройка кеширования css файлов.
26:59 - IMAGES. Настройка компиляции изображений.
29:30 - CLEAN. Очистка папки dist.
29:49 - FONTS. Подключение шрифтов.
30:48 - PUG. Подключение шаблонизатора.
33:14 - BABEL-LOADER. Обработка JS.
35:09 - DEV-TOOL. Настройка исходных карт.
35:41 - jQuery. Подключение библиотеки.
36:14 - BOOTSTRAP. Подключение библиотеки.
37:05 - ENTRY POINTS. Импорт нескольких файлов.
38:05 - OPTIMIZATION. Разделение файлов.
39:31 - Заключение.

Мой профиль в Telegram - [ Ссылка ]
Ссылка на Github - [ Ссылка ]

Официальный сайт Webpack - [ Ссылка ]

Сайт среды разработки Webstorm - [ Ссылка ]

Ресурсы npm - [ Ссылка ]

Препроцессоры sass and scss - [ Ссылка ]

Шаблонизатор pug - [ Ссылка ]

свернуть