Пример конфигурации сборки мульти-страничного проекта с помощью Webpack 5 и Vite.js

preview_player
Показать описание

00:00 Вступление
01:03 Описание поведения проекта
03:29 Структура хранения вторичных html файлов
04:18 Описание кода html файлов для отдельных article
04:29 Описание конфигурации webpack
10:17 Как увидеть список сгенерированных html файлов после сборки
10:38 Изучаем html файлы после сборки
11:11 Заключение

Исходные файлы проекта здесь:

Бесплатный тестовый API для тестов и прототипирования:

Полезные видео по настройке webpack:

Самый простой способ установить nodejs на Linux и Mac:

#easyit #javascript #js #vitejs #vanillajs
  1. Easy IT
  2. javascript
  3. webpack
  4. vite
  5. vitejs
  6. vite js
Рекомендации по теме
Пример конфигурации сборки 0:12:16

Пример конфигурации сборки мульти-страничного проекта с помощью Webpack 5 и Vite.js...

Знакомимся с Vitejs. 0:16:12

Знакомимся с Vitejs. Портирование проекта, собираемого с помощью Webpack 5 на Vitejs | Vitejs config...

Vite для быстрой 0:10:49

Vite для быстрой разработки и сборки приложения

Сборка проекта на 0:01:56

Сборка проекта на Vite Js

Универсальный СТАРТОВЫЙ ШАБЛОН 0:13:36

Универсальный СТАРТОВЫЙ ШАБЛОН для твоих пэт-проектов с JS, SASS и Vite [2023]...

HTML, CSS (SCSS), 0:02:45

HTML, CSS (SCSS), JS, GIT, VITE • ХАРДКОР ИНТЕНСИВ 2022

Webpack 5 Настройка 0:19:31

Webpack 5 Настройка сборки проекта с подгрузкой файлов css/scss/изображений | Webpack 5 Config...

Vue3 c нуля. 0:07:25

Vue3 c нуля. Стартуем проект с помощью Vite.

Замена Webpack ? 0:05:13

Замена Webpack ? ViteJS - Новая эра фронтенда!

Vite убийца Webpack 0:09:36

Vite убийца Webpack

Vite | сборщик 0:07:22

Vite | сборщик нового поколения #17 - Сборки для многостраничных приложений...

Vitejs + autoprefixer 0:06:16

Vitejs + autoprefixer - проще некуда #vitejs #javascript #postcss #autoprefixer

SPA приложение на 0:27:53

SPA приложение на чистом JS - часть 1 #easyit #vanillajs #vitejs

Vite 2.0 ⚡️ 0:10:41

Vite 2.0 ⚡️ Сверхбыстрый инструмент сборки веб-приложений Vue, React, Svelte | Vite vs Vue CLI...

SPA приложение на 0:15:45

SPA приложение на чистом JS - часть 7 #easyit #vanillajs #vitejs

Vite | сборщик 0:06:05

Vite | сборщик нового поколения #1 - Установка Vite

Курс по Webpack4+. 0:01:22

Курс по Webpack4+. Вводный урок

Просыпайтесь, фронтендеры! Убийца 0:11:54

Просыпайтесь, фронтендеры! Убийца WebPack

Webpack config 0:07:10

Webpack config

Изучение WEBPACK за 0:48:06

Изучение WEBPACK за час в одном видео! Настройка и работа с Webpack...

FULLSTACK приложение с 0:31:48

FULLSTACK приложение с нуля (MERN) #3 - Настройка frontend части (vite, linters, prettier)...

ESBuild полный курс 1:10:02

ESBuild полный курс от А до Я. Замена Webpack 5?

VITE. Новый подход 0:24:01

VITE. Новый подход к сборке фронтенд проектов.

Vite js in 0:02:01

Vite js in two minutes

Комментарии
Автор

Спасибо за видос, искал ответ по настройке конфига vite js, всё чётко объяснил!

d.o_corporation
Автор

Еще раз спасибо за материал. Пара вопросов:
1. Файл main.js надо добавлять в каждый html файл?
2. Если к странице необходимо прикрепить несколько js-файлов, то куда их вставлять - до или после ссылки на main.js ?

alexnov
Автор

Vite сборка в режиме dev работает, а билд крашится почему то

Graymar
Автор

А я так понимаю Vue с React довольно схожи по синтаксису? А то сейчас начал изучать React, а в основном толковых видео обучалок с React+Webapck5 нет.

kuksh
Автор

И еще вопрос - планируете ли создать короткие видео про splitChunk и Tree Shaking?

kuksh
Автор

Было бы супер, если была бы возможность показать как под эту сборку верно подключать fonts, перепробовал разные методы, так и не вышло (

БорисШагиев
Автор

Спасибо за видео! При подключении роутера в main.js вылазиет ошибка [plugin:vite:import-analysis] Failed to resolve import "@/views/About.vue" from "src\router\index.js". Does the file exist? Подскажите пожалуйста как исправить?

mtkfmix