Webpack 4 - простая сборка проекта

апну)

Почему-то у меня в main.js всегда пусто, нет такого как у Дмитрия кучи букв

Как это всё тяжко. Неужели сложно оставить ссылку на github ?
Вы же знаете, что это видео устарело и у вас есть новое.
Как это всё проверять и понимать, если ничего не работает и кода нет, чтоб проверить ошибки.

Отличное видео для знакомства с Webpack. Мне очень помогло, спасибо!

подскажите пож. у меня после npm run dev ("dev": "webpack-dev-server --mode development --open") открывается в браузере страница Error внутри написано Cannot GET /. Что делать? Делала все по видео

Спасибо! было очень круто , динамично, понятно , супер подача!)

пишу из 2022, не все показанное в ролике актуально )))

Дмитрий, спасибо большое, очень приятно было Вас слушать!

это единственное видео, благодаря которому я разобралась с webpack. Спасибо!

Спасибо за полезный урок!

Дмитрий спасибо что в делаете это, это реально нормальное объяснение, брал у вас курсы и прошло 2 года теперь работаю, но вроде как учился больше на бек, но по факту приходиться учиться сейчас на фронт, да еще и ангулярjs, Наверное еще курсы возьму..реально хоть объяснять умеете на пальцах... что зачем.

Если смотрит кто сейчас, preset-stage - устарели.

Спасибо, Дим. Проходил у тебя курс по Вью. Спрашивал у тебя где посмотреть про вебпак, вот только добрался до этого видоса. Теперь все намного понятней. Благодарю!

ответ на вопрос как впечатление от вебпака ??? я ва*уе ) ЧТО ЭТО ) ОНО РАБОТАЕТ НО ЧТО ЭТОО?!)

Дмитрий, здравствуйте! Можно вас попросить в комментария подкорректировать своё видео... Указать, что уже не работает и как сейчас правильно писать! Будем вам очень благодарны за это! И добавьте пожалуйста конфигурационный файл.

Просто и доступно. Наконец таки понял зачем нам вся дичь из вебпаком) Ставлю 5 лайков сразу)

Не доверяю я как-то людям которые работают на виндовз

Поясните пожалуйста, настраивал все практически 1в1 как у Дмитрия, но изменения в реалтайме и в принципе JS код не работает, хотя в main.js попадают. Буду очень признателен за помощь.

Очень хорошо. Молодец, живенько.

в 2020 году возникают ошибки при установке трех компонентов bable. Всё начинает работать при установке "babel-core": "^ 6.26.0"

"babel-loader": "^ 7.1.4"
"babel-preset-env": "^ 1.6.1"

Вспомнился старый анекдот. Студентам выдают: моток провода, двое пассатижей, канистру с керосином, пять алюминиевых листов. Теперь мы это "бррр!" — и ваша задача построить ракету-носитель "Протон".

Для понимания хорошо

лол у ie еще досих пор не роботает деструктуризация

говорить что webpack для фронта, в эпоху node.js и electron 🥶 и про разницу с --save-dev от --save надо было как-то нормально объяснить, а не ту фигню. про запись в файлике))

В вебпаке 4 уже есть встроенный модуль path. Его не нужно устанавливать, а достаточно просто подключить.

Народ, а почему devServerver может не прослушивать index.html? в js изменения вношу - браузер отображает. в html вношу не отображает

В галпе есть импорт.

Небольшие поправки на сегодняшний день. Так как технологии меняются очень быстро :)

1. Если у кого-то не заработал web-dev-server в режиме отслеживания, укажите порт в команде запуска, например '--port 6789';
2. Устанавливаем '@babel/core' и '@babel/preset-env' вместо 'babel-core' и 'babel-preset-env'. 'babel-preset-stage-3' - не устанавливаем и не указываем в .babelrc, так как он переехал в preset-env. В '.babelrc' пресет нужно указать так: "@babel/env";
3. Вместо 'extract-text-webpack-plagin' нужно использовать 'mini-css-extract-plugin'.

В очередной раз убеждаюсь, что программисты - ненормальные люди...
Всегда все усложняют... Испокон веков, CSS и JS - это отдельные файлы...
Нет, блин... Программисты же супер умные, надо сделать так, чтобы
нихера не было понятно, чтобы CSS инлайнился в head, а хранился в JS!!!!
рараарзыврафылювар фывоар фдлывора фдлгывра фылгвро фывра фывар фывлгар
фыдл3оар ылрова ....
Кто не понял, это предисловие к webpack!

спасибо большое. очень понятно объясняете

Спасибо! Очень подробно)

а как на другой компьютер подключить уже готовый конфиг?

Великолепно!

Как я понял начиная с версии 7 .babelrc уже не нужен, так как presets убрали.

Чтобы не зажимать Enter при иницилизации package.json, нужно было написать в терминале npm init -y(Тогда все проставиться в файле автоматически)

что-то не понял.. как строчка кода заработала без использования функции? у меня код работает только тогда, когда я пихну ее в функцию и вызову эту функцию

Ох задался как раз вопросом что делать, когда у тебя сборка на gulp, а нужно vue подключать. А в сборке и препроцессоры и еще что-то...В общем пока webpack'ом пользоваться хорошо не умею, тупо ссылкой vue подключил, но в коде получился ад из компонентов...

Если у нескольких модулей в проекте имеют зависимость от Jquery нужно их все в один файл объединять или к каждому Jquery подключать?

Babel обновился. У кого с Babel`ом траблы вот строка для скачивания:
npm install -D babel-loader @babel/core @babel/preset-env webpack


файлик .babelrc убираем.

и вот код для подключения:

rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]


вроде заработала система.
сложно поначалу, но когда саму философию вкуривать начинаешь, местами даже интересно становится ))

Если при запуске webpack-dev-server попадаете на listing directory, проверьте index.html. Он НЕ должен лежать в папке src.

В документации уже иначе пишут: npm install --save-dev @babel/core @babel/cli @babel/preset-env
Просто уже версии другие вышли, и если установить как показывает Дмитрий, то работать Babel не будет.

Благодарю.