Настройка Webpack 5 для начинающих. Описание принципа работы webpack. Html, css, scss, pug, jQuery
38.6 هزار بار بازدید -
3 سال پیش
-
Пошаговое описание принципов работы Webpack,
Пошаговое описание принципов работы 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 - https://t.me/JavaAndScript
Ссылка на Github - https://github.com/vitalii-kopiievski...
Официальный сайт Webpack - https://webpack.js.org
Сайт среды разработки Webstorm - https://www.jetbrains.com/ru-ru/webstorm
Ресурсы npm - https://www.npmjs.com
Препроцессоры sass and scss - https://sass-lang.com
Шаблонизатор pug - https://pugjs.org
В конфигурацию 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 - https://t.me/JavaAndScript
Ссылка на Github - https://github.com/vitalii-kopiievski...
Официальный сайт Webpack - https://webpack.js.org
Сайт среды разработки Webstorm - https://www.jetbrains.com/ru-ru/webstorm
Ресурсы npm - https://www.npmjs.com
Препроцессоры sass and scss - https://sass-lang.com
Шаблонизатор pug - https://pugjs.org
3 سال پیش
در تاریخ 1400/07/26 منتشر شده
است.
38,635
بـار بازدید شده