Спасибо, Дмитрий. Вы очень здорово рассказываете.. Вы умеете подать материал так чтобы понимали просто все!!! Без перегрузов)) Максимум усвоенной информации.
Мне сложно подобрать слова, чтоб передать насколько этот вебинар помог мне в моих первых шагах в webpack! Семинар просто супер! Подписываюсь на канал 100%
Спасибо за вебинар, отличное видео. Очень помогло въехать и также понравился подход, когда специально делаете ошибки и на ходу их правите. Действительно лучше помогает понять, что к чему! И как раз ответили на все мои вопросы, как новичка в вебпак
Дима, спасибо. Долго вебпак отодвигал назавтра. Сегодня наконец выбрал время. Как всегда материал на высоте. Осталось со смартгридом его подружить и поэкспериментировать
Спасибо, Дим. Проходил у тебя курс по Вью. Спрашивал у тебя где посмотреть про вебпак, вот только добрался до этого видоса. Теперь все намного понятней. Благодарю!
Небольшие поправки на сегодняшний день. Так как технологии меняются очень быстро :) 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'.
Для тех, кто не может писать новые команды в консоли, после запуска сервера "npm run dev" - останавливайте процесс с помощью CTRL+C в консоли. Дмитрий забыл про это упомянуть Если возникнет ошибка, то 1. Переименовать папку, чтобы она не называлась так же, как и модули, то есть webpack или postcss 2. Очистить кеш npm cache clean --force
не очень понял. так что придутся постоянно запускать "npm run dev", чтобы обновлялся код, который уже написал? автоматом в браузере не увидишь, что сделал?
просто нужно запускать в фоне. например screen -S server npm run dev где server - название для фонового экземляра консоли чтобы потом к нему вернуться: screen -r server чтобы уйти из текущего экземпляра консоли в основной ctrl + A затем d Посмотреть список запущенных экземпляров screen -ls Чтобы посмотреть что еще можно сделать с экземпляром консоли ctrl + A затем ?
Дмитрий спасибо что в делаете это, это реально нормальное объяснение, брал у вас курсы и прошло 2 года теперь работаю, но вроде как учился больше на бек, но по факту приходиться учиться сейчас на фронт, да еще и ангулярjs, Наверное еще курсы возьму..реально хоть объяснять умеете на пальцах... что зачем.
00:02:50 содержание семинара 00:08:42 установка Node.js 00:11:00 переход в диреторию сборки и инициализация npm. npm init 00:11:30 установка webpack. npm i webpack --save-dev 00:12:45 отличия от gulp 00:15:50 установка webpack-cli. npm i webpack-cli --save-dev 00:22:30 немного про точку входа 00:24:30 подключение собственных модулей. 00:27:40 подключение сторонней библиотеки 00:31:35 как скачать более старую версию любого устанавливаемого модуля @1.2.3 00:33:00 немного о разнице с Gulp 00:34:00 установка в запуске флага --mode production или --mode development 00:35:30 как скрестить gulp и webpack 00:36:15 установка webpack dev-server. npm i webpack-dev-server (--open) 00:40:00 создание конфига webpack.config.js 00:44:13 установка пути для файла сборки при webpack-dev-server 00:48:00 publicPath для работы в dev-server 00:58:30 установка Bable 00:59:30 добавляем файл .babelrc 01:07:00 оптимизация JS кратко 01:07:30 преимущество webpack перед gulp 01:08:30 добавление отладочной функции 01:10:15 поле devtool: "eval-sourcemap" 01:11:45 как добавить eval-surcemap, что бы он не засорял исходный файл для mode production 01:20:44 подключаем CSS внутрь файла js 01:26:45 разделяем css и js отдельно 01:30:00 extract-text-webpak-plugin@next 01:38:15 как создать подпапку в dist 01:40:00 как webpack можно копировать статические файлы. Ёрел
Вспомнился старый анекдот. Студентам выдают: моток провода, двое пассатижей, канистру с керосином, пять алюминиевых листов. Теперь мы это "бррр!" - и ваша задача построить ракету-носитель "Протон".
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 работает без папки dist? У меня это повторить не получается. Выдает ошибку на отстутствующий файл main.js.
Скажите пожалуйста, можно ли средствами Webpack собирать группы произвольных *.js файлов в единые *.js файлы? Имеем: public.src/modules/common/md5.js public.src/modules/common/sha/sha1.js public.src/modules/common/sha/sha2.js public.src/modules/user/rights.js public.src/modules/user/friends.js Нужно получить: public/modules/common/index.js
Дмитрий, великолепный урок. Все посматривал на веб-пак, но ни как руки не доходили. А подскажите, пожалуйста, в итоговом файле при объединении файлов остаются комментарии (если добавляем стороннюю либу), так вот, можно ли их убрать через веб-пак, или они удаляются? Тут не очень понял. И еще, можно ли в файлы JS/CSS через веб-пак добавлять свои комментарии в начале файла? И немного не в тему, наверное, как лучше версионность вести для файлов? Например: app-v1.0.1.js или app.js?v=1.0.0 Спасибо за прекрасный урок, пошел пробовать переписывать проект через веб-пак и смотреть доки по нему, теперь с другим пониманием! СПАСИБО!
Может как-нибудь по node.js проведешь? Было бы очень полезно, т.к. смотрю много каналов, но информацию от тебя лучше всего воспринимаю, да и по node.js очень мало актуальной русскоязычной информации
Дмитрий, когда новый марафон по php? На сайте школы смотрел, написано что стартует с 02.04.18, а захожу почитать поподробнее про марафон, а там уже написано что что он только стартует через 23 дня. Не очень хочется пропустить его)
Поясните пожалуйста, настраивал все практически 1в1 как у Дмитрия, но изменения в реалтайме и в принципе JS код не работает, хотя в main.js попадают. Буду очень признателен за помощь.
В документации уже иначе пишут: npm install --save-dev @babel/core @babel/cli @babel/preset-env Просто уже версии другие вышли, и если установить как показывает Дмитрий, то работать Babel не будет.
В вебинаре была ошибка в плагине: extract-text-webpack-plugin при указаний правил, опция fallback - это не откат действия, а это запасной план на случай если плагин не отработает.
а вот скрестить sass + pug + vue из однофайловых компонентов никак не получается =( sass почему-то пытается обработать участок кода, предназначенный для pug в старом webpack такого не было
в 2020 году возникают ошибки при установке трех компонентов bable. Всё начинает работать при установке "babel-core": "^ 6.26.0" "babel-loader": "^ 7.1.4" "babel-preset-env": "^ 1.6.1"
Дмитрий, подскажи пожалуйста, ты говорил, что имея файл конфига и package.json (если не ошибаюсь, а то смотрел видео больше суток назад), можно использовать твой шаблон. Как это всё подключить к моей структуре файлов, не выполняя пошагово установку каждого модуля через npm?
Если один раз уже настроили сборку, то в новый проект копируете webpack.config.js, package.json и .babelrc выполняете команду npm i в консоли. Все нужные модули установятся.
В конце, когда хочу импортнуть файлы со стилями Webpack выдаёт ошибку: Module not found: Error: Can`t resolve 'путь к файлу'. Я уже как угодно игрался с путями и всё четно. В зависимостях все необходимые лоадеры есть, и в node_modules также. В чём может быть проблема?
![Eminem - The Death of Slim Shady [Graveyard Album Trailer]](http://i.ytimg.com/vi/vOJD-6vQpXU/mqdefault.jpg)
Спасибо, Дмитрий. Вы очень здорово рассказываете.. Вы умеете подать материал так чтобы понимали просто все!!! Без перегрузов)) Максимум усвоенной информации.
Лучшее введение в webpack, что я смог найти
Мне сложно подобрать слова, чтоб передать насколько этот вебинар помог мне в моих первых шагах в webpack! Семинар просто супер! Подписываюсь на канал 100%
Супер! Дмитрий - преподаватель от Бога! Все настолько доступно и понятно объясняет, что даже бы ребенок понял! Класс! Спасибо за отличный урок!
Спасибо за вебинар, отличное видео. Очень помогло въехать и также понравился подход, когда специально делаете ошибки и на ходу их правите. Действительно лучше помогает понять, что к чему! И как раз ответили на все мои вопросы, как новичка в вебпак
Отличный вебинар, спасибо Димас
Долго искал годное видео именно по 4 вебпаку. Огромное спасибо все четко разжёвано . Респект!
Дмитрий, спасибо за вебинар! Очень полезно и доступно :)
Дима, спасибо. Долго вебпак отодвигал назавтра. Сегодня наконец выбрал время. Как всегда материал на высоте. Осталось со смартгридом его подружить и поэкспериментировать
Большое спасибо за видео.
Лайк и подписка.
Лучшее русскоязычное видео на эту тему
Автор спасибо. Хорошо преподносишь материал, без нудятины и лишнего(моё имхо). Большое спасибо
Дима, читаешь мои мысли! Только решил поискать на просторах youtube про 4й webpack, а тут сразу от тебя ролик :-))
Спасибо, Дим. Проходил у тебя курс по Вью. Спрашивал у тебя где посмотреть про вебпак, вот только добрался до этого видоса. Теперь все намного понятней. Благодарю!
Дмитрий, спасибо большое, очень приятно было Вас слушать!
Дмитрий, спасибо Вам за Ваш труд. ИМХО на Вашем канале очень качественная подача материала. И, что крайне важно, у Вас приятный голос.
Отличное видео для знакомства с Webpack. Мне очень помогло, спасибо!
Спасибо - полезный вебинар. И вообще круто рассказываешь - все очень понятно, как для людей делаешь)) Если бы ты вел какие то курсы - я б купил)
Привет из Стамбула. Очень полезный вебинар спасибо =)
это единственное видео, благодаря которому я разобралась с webpack. Спасибо!
Спасибо! было очень круто , динамично, понятно , супер подача!)
Спасибо чел, по webpack мало инфы на ру площадках, разъяснил объяснил молоток )
Дмитрий лучший в объяснении веб технологий!
Спасибо, видео очень помогло начать погружение в Webpack.
Отличная штука. Хороший вебинар. Спасибо!
Небольшие поправки на сегодняшний день. Так как технологии меняются очень быстро :)
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'.
Благодарю! очень помогло!
Если вы имеете ввиду сделать так: "dev": "webpack-dev-server --mode development --open --port 6789", то не помогло...
Спасибо за комментарий, очень помог)
@@user-wc9kq3mi4o у меня такая же проблема(
Браво, маэстро. Великолепно разъяснил.
Просто и доступно. Наконец таки понял зачем нам вся дичь из вебпаком) Ставлю 5 лайков сразу)
Круто, долго ждал этого урока!
Спасибо. Хороший, полезный вебинар.
Лучший просто. Дай Бог здоровья
Дмитрий отличный канал, нужные уроки, лайк )
- как можно скрестить webpack и gulp?
- положить их вместе в одну папку и больше никого в этой папке не оставить
Спасибо, было как всегда интересно)
Спасибо за полезный урок!
Очень хорошо. Молодец, живенько.
спасибо большое. очень понятно объясняете
Очень понятно, спасибо большое!!
Крутое видео! То, что искал.
У автора очень хорошо поставлен голос. Милота!
Для тех, кто не может писать новые команды в консоли, после запуска сервера "npm run dev" - останавливайте процесс с помощью CTRL+C в консоли. Дмитрий забыл про это упомянуть
Если возникнет ошибка, то
1. Переименовать папку, чтобы она не называлась так же, как и модули, то есть webpack или postcss
2. Очистить кеш
npm cache clean --force
не очень понял. так что придутся постоянно запускать "npm run dev", чтобы обновлялся код, который уже написал? автоматом в браузере не увидишь, что сделал?
просто нужно запускать в фоне. например screen -S server npm run dev
где server - название для фонового экземляра консоли
чтобы потом к нему вернуться: screen -r server
чтобы уйти из текущего экземпляра консоли в основной ctrl + A затем d
Посмотреть список запущенных экземпляров screen -ls
Чтобы посмотреть что еще можно сделать с экземпляром консоли ctrl + A затем ?
Спасибо тебе, добрый человек)
Спасибо за работу
Отличный вебинар
ты красава, от души за курс )
Спасибо за знания!
Хороший материал для новичка.
Сенкс за вебинар!
Спасибо! Очень подробно)
спасибо, вы очень помогли!
Дмитрий спасибо что в делаете это, это реально нормальное объяснение, брал у вас курсы и прошло 2 года теперь работаю, но вроде как учился больше на бек, но по факту приходиться учиться сейчас на фронт, да еще и ангулярjs, Наверное еще курсы возьму..реально хоть объяснять умеете на пальцах... что зачем.
спасибо за вебинар
00:02:50 содержание семинара
00:08:42 установка Node.js
00:11:00 переход в диреторию сборки и инициализация npm. npm init
00:11:30 установка webpack. npm i webpack --save-dev
00:12:45 отличия от gulp
00:15:50 установка webpack-cli. npm i webpack-cli --save-dev
00:22:30 немного про точку входа
00:24:30 подключение собственных модулей.
00:27:40 подключение сторонней библиотеки
00:31:35 как скачать более старую версию любого устанавливаемого модуля @1.2.3
00:33:00 немного о разнице с Gulp
00:34:00 установка в запуске флага --mode production или --mode development
00:35:30 как скрестить gulp и webpack
00:36:15 установка webpack dev-server. npm i webpack-dev-server (--open)
00:40:00 создание конфига webpack.config.js
00:44:13 установка пути для файла сборки при webpack-dev-server
00:48:00 publicPath для работы в dev-server
00:58:30 установка Bable
00:59:30 добавляем файл .babelrc
01:07:00 оптимизация JS кратко
01:07:30 преимущество webpack перед gulp
01:08:30 добавление отладочной функции
01:10:15 поле devtool: "eval-sourcemap"
01:11:45 как добавить eval-surcemap, что бы он не засорял исходный файл для mode production
01:20:44 подключаем CSS внутрь файла js
01:26:45 разделяем css и js отдельно
01:30:00 extract-text-webpak-plugin@next
01:38:15 как создать подпапку в dist
01:40:00 как webpack можно копировать статические файлы. Ёрел
Вебинар супер!
Великолепно!
Большое спасибо
спасибо,очень помогло)
Спасибо большое)
Весьма полезно...
Классный мужик!
Благодарю.
СПАСИБО!
Спасибо!
Для понимания хорошо
Вспомнился старый анекдот. Студентам выдают: моток провода, двое пассатижей, канистру с керосином, пять алюминиевых листов. Теперь мы это "бррр!" - и ваша задача построить ракету-носитель "Протон".
Дмитрий спасибо за урок, чтобы в Sublime text3 убрать подсказки при наведение на теги, можете вставить в настройки строчку "show_definitions": false
Спасибо
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 работает без папки dist? У меня это повторить не получается.
Выдает ошибку на отстутствующий файл main.js.
+ спасибо!
Скажите пожалуйста, можно ли средствами Webpack собирать группы произвольных *.js файлов в единые *.js файлы?
Имеем:
public.src/modules/common/md5.js
public.src/modules/common/sha/sha1.js
public.src/modules/common/sha/sha2.js
public.src/modules/user/rights.js
public.src/modules/user/friends.js
Нужно получить:
public/modules/common/index.js
Дмитрий, великолепный урок. Все посматривал на веб-пак, но ни как руки не доходили.
А подскажите, пожалуйста, в итоговом файле при объединении файлов остаются комментарии (если добавляем стороннюю либу), так вот, можно ли их убрать через веб-пак, или они удаляются? Тут не очень понял.
И еще, можно ли в файлы JS/CSS через веб-пак добавлять свои комментарии в начале файла?
И немного не в тему, наверное, как лучше версионность вести для файлов? Например: app-v1.0.1.js или app.js?v=1.0.0
Спасибо за прекрасный урок, пошел пробовать переписывать проект через веб-пак и смотреть доки по нему, теперь с другим пониманием!
СПАСИБО!
Комментарии остаются
push([e.i,"/*Style for .title*/
.title {
\tcolor:red;
}",""])
Если у нескольких модулей в проекте имеют зависимость от Jquery нужно их все в один файл объединять или к каждому Jquery подключать?
Очень Интересует React
Вопрос почему webpack-cli сразу не внесли в список зависимостей самого webpack? Автор видео ответь пожалуйста.
Чтобы не зажимать Enter при иницилизации package.json, нужно было написать в терминале npm init -y(Тогда все проставиться в файле автоматически)
Может как-нибудь по node.js проведешь? Было бы очень полезно, т.к. смотрю много каналов, но информацию от тебя лучше всего воспринимаю, да и по node.js очень мало актуальной русскоязычной информации
Лучше, что есть в рунете для входа в Webpack
Дмитрий, когда новый марафон по php? На сайте школы смотрел, написано что стартует с 02.04.18, а захожу почитать поподробнее про марафон, а там уже написано что что он только стартует через 23 дня. Не очень хочется пропустить его)
Дмитрий, ну пора уже в 1080 писать видео...
Если при запуске webpack-dev-server попадаете на listing directory, проверьте index.html. Он НЕ должен лежать в папке src.
44:47 не понял. В ноде же есть модуль path по умолчанию, не? Его разве надо скачивать?
Вебинар понравился, но как найти материалы для данного урока? На вашем сайте их нет, даже после регистрации
Поясните пожалуйста, настраивал все практически 1в1 как у Дмитрия, но изменения в реалтайме и в принципе JS код не работает, хотя в main.js попадают. Буду очень признателен за помощь.
В документации уже иначе пишут: npm install --save-dev @babel/core @babel/cli @babel/preset-env
Просто уже версии другие вышли, и если установить как показывает Дмитрий, то работать Babel не будет.
В вебинаре была ошибка в плагине: extract-text-webpack-plugin при указаний правил, опция fallback - это не откат действия, а это запасной план на случай если плагин не отработает.
Вот за это спасибо большое
В вебпаке 4 уже есть встроенный модуль path. Его не нужно устанавливать, а достаточно просто подключить.
При разработке десктопных приложений на electron импортирование через import по дефолту не работает. Как включить поддержку такого импортирования?
Как можно реализовать, чтобы иметь возможность прослушивать файл с расширением PHP ?
Дима я люблю тебя
Не затронута тема нескольких точек входа. По этому у незнающих webpack на курсе думаю сложилось впечатление нафига он нужен кроме одностраничников.
Продублируйте линк на курс по JS нового, который в вебинаре упомянут. Спасибо.
Спасибо за видео! Может сделаешь продолжение? например добавим вотчер за html и sass перегонять в css ?
Привет, ты смог подключить?
а вот скрестить sass + pug + vue из однофайловых компонентов никак не получается =(
sass почему-то пытается обработать участок кода, предназначенный для pug
в старом webpack такого не было
Как я понял начиная с версии 7 .babelrc уже не нужен, так как presets убрали.
в 2020 году возникают ошибки при установке трех компонентов bable. Всё начинает работать при установке "babel-core": "^ 6.26.0"
"babel-loader": "^ 7.1.4"
"babel-preset-env": "^ 1.6.1"
Все конечно круто, но в каких задачах или проектах нужно переходить с галпа на вебпак???
Ни в каких
Если у вас babel-core 7 версии и выше, то это работать не будет. Надо подгружать модули @babel/preset-env и в конфиге так же и подключать
надо подключать:
npm i @babel/core @babel/preset-env babel-loader
stage подключать не стоит
@@JV-un7qw Спасибо вам! Возился с этим 20 минут, ничего не понимал, все красное и думал: "все", пока не зашел в коменты)
Возился час, пришлось изучить babel)
Дмитрий, подскажи пожалуйста, ты говорил, что имея файл конфига и package.json (если не ошибаюсь, а то смотрел видео больше суток назад), можно использовать твой шаблон. Как это всё подключить к моей структуре файлов, не выполняя пошагово установку каждого модуля через npm?
Если один раз уже настроили сборку, то в новый проект копируете webpack.config.js, package.json и .babelrc выполняете команду npm i в консоли. Все нужные модули установятся.
@@alexilin1983Благодарю за ответ
В конце, когда хочу импортнуть файлы со стилями Webpack выдаёт ошибку: Module not found: Error: Can`t resolve 'путь к файлу'. Я уже как угодно игрался с путями и всё четно. В зависимостях все необходимые лоадеры есть, и в node_modules также. В чём может быть проблема?
А как в этот проект подключить поддержку шрифтов и картинок. Перерыл всё, не получается хоть убей.