Setting up Webpack template. Install Babel 7; webpack dev server and vue.js as sample 

столкнулся с несколькими проблемами и вот как их решил: просто написать "overlay:true" больше нельзя, пишем: "client: {overlay: true}" также в devServer нужно указать директорию, так как по умолчанию он берет файлы из ./public поэтому в devServer прописываем "static: {directory: path.join(__dirname)}"

всем у кого проблема на 20.58 исправьте в package.json строчку "dev": "webpack serve --open --mode development", автор добавь в описание. Жаль что канал забросили. Похожего много но мне почему то такая подача зашла больше всего.

всем у кого проблема на 20.58 исправьте в package.json строчку "dev": "webpack serve --open --mode development", автор добавь в описание. Жаль что канал забросили. Похожего много но мне почему то такая подача зашла больше всего.

Ребят, если не получается, то помните, что когда вы меняете webpack.config.js следует перезагружать webpack-server, т.е. перезапустить npm run dev. Всем терпения и целеустремленности!)

Парень, ты отличный ментор. Лайк и подписка.

кстати вместо --save-dev можно просто -D

Кинь пожалуйста сборку GULP-а, хочу со своей сравнить.

очень годно,ставлю пять в сплюсом, с времен соракса который ушел уже 4 года назад не встречал лучшей подачи материала, так что 10 с плюсом из пять, очень помогли

Спасибо автору за очень продуктивный материал! Перепробовал разные варианты и посмотрел другие видео, Ваше - наилучшее! Еще раз спасибо!!!

Самый лучшие уроки по вебпаку, которые смог найти на просторах интернета. Благодарю за труд!

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

Большое тебе спасибо за такой понятный урок. У меня теперь наконец получилось запустить webpack, как это у тебя. Правда я поковырялся с конфигом и полазил в документации, стало еще чуть-чуть понятнее. Тем кто ищет уроки по вебпаку, рекомендую просмотреть уроки автора.

Спасибо за видео

Слышал, что path уже встроен в вебпак и его не надо качать?

Видно человек питонщик, т.к. точку с запятой забывает

что такое /dist где эта директория находиться, у меня работает только "localhost:8080/src/" так, не могу понять в чем проблема.

Error: Cannot find module 'webpack-cli/bin/config-yargs'

17:03 path: path.resolve(__dirname, './dist'), - одна точка ./dist' 20:50 path.resolve(__dirname, '../dist'), - две точки ../dist 22:20 Ответ найден. Должна быть одна точка. На сайте где вы выложили код нужно отредактировать запись npm install @babel/core @babel/preset-env babel-loader -save-dev А именно строчку -save-dev на --save-dev проблема в тире нужно минусы ставить. Выдавал ошибку. ------------------------- Ответ есть (число 8), а вот ниже показывает вот такую строчку, я гуглил но так и не понял, что тут не так. [WDS] Live Reloading enabled. DevTools failed to load SourceMap: Could not load content for webpack:///node_modules/sockjs-client/dist/sockjs.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

Очень круто объясняешь, многие детали прояснились после этого видео! Лайк, подписка

Огромное спасибо за всю серию видео и саму статью. Сильно помогли мне в настройке вебпака. Довольно долго мучился, изучал документацию, искал какие-то гайды, пытался настроить и вечно что-то не работало. А тут всё понятно, работает и подробно объяснено.

Не очень пойму зачем модуль path, если нода и так работает с path?

Объясните зачем подключать модуль path, если он изначально есть в node?

Привет. Эту сборку webpack актуально использовать в 2022ом году?

Может кто знает, где EnotGlobal можно скачать крякнутый?

о) я без мануалов тож 3 файфа конфигов запилил)) ща посмотрим второй урок

на 1.25 скорости смотрю

Спасибо за урок! Давай больше подобного контента. По делу и без воды. Не мог не поправить)) не экранизировали, а экранировали

GET localhost:8080/dist/index.js net::ERR_ABORTED 404 (Not Found) эту проблему так и не решил... хотя делал все по видео, подскажите что не так

Скинте пожалуйста, свою сборку вебпака.

спасибо огромное! одно из самых понятных и коротких видео на тему. и еще за то что вы отдельно статью написали со всем кодом, и можно копипастить) спасибо за сервис =) почему не указали статью в описании видео? tocode.ru/curses/nastroika-webpack4/js-babel7-webpack-dev-server/

Как раз то что я искал :) что для чего нужно объяснено, все четко и понятно.

i ｢wds｣: Project is running at localhost:8080/ i ｢wds｣: webpack output is served from /dist i ｢wds｣: Content not from webpack is served from e:\yarn i ｢wdm｣: Hash: c54030d558de12be67d1 Version: webpack 4.41.2 Все вроде работает, но браузер не открывается

не фурычит This is probably not a problem with npm. There is likely additional logging output above. ошибку кидает

Вместо loader, может лучше использовать use?

Очень круто и доступно рассказываешь! Спасибо

Очень круто, спасибо!

Спасибо, все по теме

очень круто!!!

Просто молодец, отличные уроки, главное понятные! Сегодня сел за изучение Webpack-a, т.к он мне понадобится для разработки проекта на заказ, и ты знаешь, имея прошлый опыт с Gulp-ом, просто взяв документацию и просматривая твои уроки - я быстро вкатываюсь в тему. Спасибо!

Что за тема на редакторе?

спасибо большое за видео

Очень круто! Спасибо Вам огромное :)

Подписался лайк

Спасибо, очень круто объясняешь)

Можете помочь с настройкой webpack? Я писал вопрос на тостере qna.habr.com/q/875085

Спасибо большое за уроки! Можете поделиться своей сборкой Gulp?

Лучшее что нашел

в консоле пишет, подскажите пожалуйста в чем причина ... DevTools failed to parse SourceMap: webpack:///node_modules/sockjs-client/dist/sockjs.js.map

Очень прошу что вы мне помогли!!!!!Моя проблема в том что я хочу переместить index.html в папку resources(да блядь в любую папку не важно(( ) (это папка где Spring Boot (фреймворк Java) при компиляции видит и считывает теймплейты ) И при попытке перемещения index.html в любую папку webpack выдает ошибку (404 cannot read),как ПЕРЕМЕСТИТЬ ИЛИ ВЫ ЗНАЕТЕ ДРУГИЕ АЛЬТЕРНАТИВНЫЕ ВАРИАНТЫ и вообще у меня в index.html src=/dist/bulid.js а я хочу что напрямую было src=kakayaNibudPapka/KakoyNibudJavascriptfile.js .УМОЛЯЮ ВАС ПОМОГИТЕ ПОЖАЛУЙСТА

Спасибо , все супер,работает с первого раза

Отличное видео! Все получается 1в1, без танцев с бубном) Благодарю!

Спасибо!

Благодарю за хороший урок. Когда планируется продолжение?

На ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-JcKRovPhGo8.html вроде бы опечатка (--seve-dev вместо --save-dev), при этом отработало нормально)) За материал - гран мерси, все очень здорово и полезно.

Привет, вопрос по твоему webpack template. Почему при npm run build, когда открываешь dist/index.html, в браузере, отлетают картинки и css

Когда подключаем Vue способами : "import 'vue/dist/vue';" или просто "import 'vue';", то после команды build в app.js не подключается Vue. Думал подключиться также, как и при "window.Vue = require('vue');", но нет. Вопрос почему через импорт нет кода Vue в app.js после npm run build

А можно и нужно ли использовать webpack с gulp? Просто вся современная верстка сегодня вроде на gulp, а js разработка на webpack. Как соеденить эти технологии? Типа если ты верстальщик - то gulp, а разработчик - то webpack?? т.е. разработчик получает верстку в галпе дальше что? Как писать компоненты в галповском проекте? не понятно

Подскажите пожалуйста, Angular 8 и его cli, по сути делают все тоже самое? Стоит ли связывать webpack и angular 7-8 проект? Или вебпак уже встроен в ангуляр cli? Ведь ангуляр итак все в браузере обновляет в лайве, и также ужимает стили, скрипты. Как настроитт вебпак для ангуляра в общем?)

В gulp-е можно сделать что бы все скрипты из папки подключались автоматически.. не обязательно их вручную подключать

на счет path.resolve(__dirname, './dist') можно просто написать dist, у path в документации так написанно

Хорошее видео! Подписка

У меня не работает автоматическое обновление страницы, я вношу изменения в common.js и чтобы увидеть результат мне нужно заново сбилдить все и запустить. В чем может быть проблема? Как решить?

Отличный курс. Хороший структурированный материал. Приятный умный голос. Удивлен малому количеству просмотров.

Подскажите , а все пакеты из галпа будут работать в вебпаке тоже? например img responsive

Почему негде нет точек с запятой?

На кого рассчитан урок? Мне, как новичку, никогда не работавшим с webpack, урок в тему вникнуть поможет?

Спасибо за видео!!!

Спасибо, отличное видео! 👍👍💪💪

Всё очень здорово, но перестань постоянно говорить "то есть")) А то будет козырь как у Антона Автомана с его "ТАК, ИТАК!"))))

Спасибо большое, всё очень доступно)

у меня в дист создалось два файла как это исправить?

А c vue-cli как совмещать ? Что первым установить и получается что вход-файл main.js ?

добрый день. подскажите плиз в чем проблема, при вводе команды npm init выдает ошибку bash: npm: command not found, как исправить?(((

что-за тема vscode?

При запуске web server попадаю на Listing Directory ? я путь не правильно указываю или что ?

Кратко и все по делу. Очень помогло разобраться что к чему. Спасибо!

Выдает ошибку, видимо на сегодня уже не актуально

Я еще пользуюсь галпом)

Огромное спасибо за ролик))) Очень понятно и доходчиво объяснил))

Так четко объяснил спасибо ❤️

обновили сборку на gulp?? если да то скиньте )) плизз

Очень полезный урок по webpack - спасибо )

--seve-dev

Давно так не радовался 5ке в консоле.

Отличный урок! Лайк

Очень Очень ГОДНО!)

Кажется webpack уже без babel'a справляется? До настройки babel и после итоговый файл не поменялся...

спасибо все работает, только на данный момент, чтобы установить webpack-cli, нужно набрать: npm i -D webpack-cli @webpack-cli/init

мне кажется, webpack работает быстрее чем gulp

babel можно так подключать? без .babelrc test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] }

Что делать если мне нужно чтобы с вебпаком запускался отдельный сервер, уже написанный на node

он и без babel показывает не стрелочную функцию, с чем это связано?

А есть что-то на подобие babel, только для css, scss кода? Или автопрефиксера будет достаточно?

Как убрать лог [WDS] Live Reloading enabled. в консоли? Очень раздражает.

--sAve-dev

20:47 спасибо)

а как подключить cheap-module-source-map? чтобы ошибки показывала в правильной строке?

огонь !

Не вижу ссылки на файл с настройкой галпа=(

Ну для новичков сложновато, хотя я уже пол года вёрсткой занимаюсь. Не понял откуда и зачем так много файлов, почему всё вертится вокруг index.js и app.js, а не index.html, что за vue и зачем оно нам, для чего нужен сервер почему бы не тестить просто так? Буду благодарен если ответите) PS. Урок хороший, просто данные пункты не понял.