The most important thing about wepback - merge. Handling images; html and static files.

[@konstantinkkk8397]

продолжай снимать видео по вебпаку!! он для меня все еще странный, уже 2й день читаю документацию и пытаюсь разобраться. У тебя пока что лучший туториал что я встречал на русских и англ источниках.

[@tocode]

спасибо, конечно еще будет видео 3-4 точно)

[@MsAkellla]

Так сказал, как-будто 2 дня это нереально долго. На каждую новую технологию уходит немало времени. Тут точно не стоит надеяться на то, что за несколько часов разберешься.

[@ИванГумич]

согласен на 100%

[@dmitrykarpovich186]

Большое спасибо за видео! Видео не обязательно должно быть коротким, пусть хоть час, хоть два - ведь главное, что оно важное, информативное и полезное !

[@tocode]

Спасибо, учту!

[@zobzn1]

Автору спасибо за работу. Для себя отметил, что видео не для новичков. Предполагается понимание многих технологий.

[@astrowander]

На данный момент copy-webpack-plugin будет выдавать ошибки, если объекты не помещены в массив "patterns". Вот валидная запись: new CopyWebpackPlugin({ patterns: [ { from: `${PATHS.src}/${PATHS.assets}img`, to: `${PATHS.assets}img` }, { from: `${PATHS.src}/${PATHS.assets}fonts`, to: `${PATHS.assets}fonts` }, { from: `${PATHS.src}/${PATHS.assets}`, to: "" } ] })

[@MerryAkiyamaMio]

Столкнулась с подобной проблемой, спасибо за решение

[@astrowander]

@@MerryAkiyamaMio пожалуйста) Рад что кому то помог :)

[@kyoto.540]

@@astrowander и почему я твой комментарий не заметил ))))

[@inzoddex8312]

Формат времени не важен, главное, что объясняешь хорошо.

[@aimanptz]

Все доступно и разборчиво, но жутко обломно ожидать следующее видео несколько недель. Спасибо!

[@tocode]

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

[@polivodichka]

Просто лучший. Не занудно и очень понятно👍❤

[@hevill7108]

40 минут вообще идеально)

[@moskvaaa]

Джек, ты просто мега крутой! Сегодня установил вебпак по твоим видео, понял, что кое каких функции не хватает, начал гуглить, разбираться и выходит видео у тебя ещё одно) спасибо!

[@tocode]

большое спасибо!

[@userbilas]

Спасибо за видео, крайне информативно и познавательно, так как мало кто на данной площадке делает разбор полного пака под разработку, что в итоге будет использовать. По продолжительности видео скажу что и так норма, так как тут больше важно на сколько ты открываешь данный вопрос, а на время уже всё равно. Понимание приходит, вот что главное. И данный подход в новинку, касательно путей. Но сколько смотрю, что в этом мире кода, сколько людей = столько и решений, невозможно сказать что оно хуже или лучше, так как решает задачу на которую было запрограммировано.

[@de17eon50]

15-20 мин оптимально. Посмотрел и сразу пробуешь не откладывая на потом и не нужно по видео лазить

[@VASOTELVI]

Большое спасибо! Очень доходчиво. Формат времени в видео не важен. Важен контент и так как это не стрим, то видео можно смотреть как частями, так и пересматривать нужные куски. Успехов в несении света знаний в массы!

[@takeshiom8950]

Спасибо за понятное и лаконичное объснения... Самый лучший курс по webpack.

[@tocode]

Спасибо!

[@vedegis]

Жалко коржа.. Я обычно смотрю параллельно повторяя. Выходит 40 минут видео умноженное на х1.5 из-за пауз. Это время я компенсирую смотря на х2 скорости (но с твоими даже х1.5 не получается ставить - это большой плюс). Поэтому 40 минут видео это оптимально. Спасибо за видео, правда круто.

[@tocode]

Отлично и главное конструктивно, приму к сведенью! спасибо!

[@pox1659]

Видосы огонь🔥 В случае ошибки (Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.), заместо contentBase используйте context

[@abvideo9156]

Добрый день! Просто заменить contentBase на context? или как? Или в другом файле прописать нужно? Подскажите пожалуйста

[@ПавелКочарин-т5и]

Jack, спасибо, продолжай. Собрал в голове как надо, у тебя лучшее по W4 из того, что удалось найти

[@tocode]

Спасибо, конечно)

[@WEBSTART-LIVE]

какой отличный и подробный разбор. Лучшее видео по настройке шаблона!

[@DanilLukyanenko-qc8sf]

Лучший канал на тему Webpack в ру сегменте! Молодчина, так держать!

[@tocode]

Спасибо! 👍

[@tocode]

Настройка Webpack-merge. Обработка изображений и статических файлов при помощи copy-webpack-plugin Исходный код вы можете скачать/посмотреть - github.com/vedees/webpack-template

[@daniilorain]

Может лучше в телеграм?

[@tocode]

@@daniilorain в телеге как-то не очень реализованы каналы, у дискорда в этом плане все куда круче это и каналы, рейтинги и тп + есть аудио чат и стол можно расшарить

[@daniilorain]

@@tocode всё равно им мало кто пользуется по сравнению с телеграмом

[@biLLie_wiLLie]

Нашел ошибку (или это только у меня 😂) В webpack.base.conf.js в output: {publicPath: '/'} У меня билд не работал. Я покопался и вовсе удалил эту строчку. Заработали и дев и билд. Надеюсь кому-то поможет.

[@АлександрКнязев-ю1в]

Ты красавчик, спасибо тебе! Я за день въехал в webpack! Ещё и сборка готовая👍👍👍 Лови поддержку 👍👍👍 (@t)

[@Ratibor_Gradov]

Спасибо, и по времени и по качеству уроков, всё отлично!

[@lvl-sp2il]

Круто, спасибо). Было бы классно, если бы видео чаще выходили чем раз в месяц. Я уже "присел" на твою конфигурацию, и у меня ломка начинается, пока ждёшь, что ж там Jack нам нового предоставит =) Понятное дело, что на это надо время, но так гляди скоро Webpack снова обновится)

[@tocode]

спасибо)) Качество важнее регулярности, постараюсь со всеми делами разобраться и записать после выходных)

[@tocode]

а 5 версия уже вышла, но она в альфе, так будет обновление до 5 как только будет полноценный резиз

[@AlexMalagor]

По картинкам в css. Меня учили, что только контентные картинки нужно вставлять через img, а все остальное, куда пользователь не должен сувать свои ручки, делать через bаckground-image. А если очень нужно поменять бекграунд, например в слайдерах, то просто делается инлайновый стиль в котором уже бекендер может менять путь к файлу. Типа

[@irvinscasull2334]

Около 40 минут самое то, в любом случае всегда можно поставить х1,25 скорость :) А видео отличное как всегда, заслуженный лайк

[@tocode]

спасибо)

[@skyfox9861]

Это было супер круто! Спасибо за видео, очень полезно, разобрался с webpack 'ом, а детали уже можно самому гуглить) На счет формата, то это и не важно, главное, чтобы все было целостно и последовательно, а продолжительность это не проблема, можно ведь на ппузу поставить или перемотать! Нще раз большое спасибо=)

[@tocode]

Спасибо за отзыв, учту)

[@llssk6379]

За сделанные статьи, респект и уважуха, думаю будет удобно!

[@wlevchenko5721]

Красавчий! Только посмотрел второй урок и тут третий!

[@tocode]

Спасибо!

[@xalinanton]

Импонирует подача материала, продолжай в том же духе!

[@tocode]

спасибо, конечно)

[@gromniki]

Великолепная серия уроков по Webpack, Евгений. Продолжай в том же духе. Если есть возможность, расскажи про оптимизацию картинок, чистку .svg от мусора, и было бы неплохо узнать как собирать .php файлы. Или у них тот же принцип, что и у .html?

[@tocode]

Спасибо! Про картинки, возможно будет работа с апи стороннего сервиса. С пхп принцип схож, но там нужно 2 сервера. Один для пхп, а второй для вебпака. И чтобы работал лайв релод у стилей и скриптов нужно делать условие на дев и прод (в деве путь через локал хост к дев серверу вебпака)

[@gromniki]

@@tocode благодарю! Примерно понял насчёт php)

[@proprosh]

Крутейшие видосы!)) Отлично воспринимается)

[@kate_m.a.s]

Огромное спасибо за такую качественную подачу информации!

[@tocode]

спасибо за отзыв!

[@alexbol903]

Большое спасибо за видео! Мне кажется оптимальное видео примерно по 15 мин)

[@cerber3462]

Пишу в комментариях сколько бы удобно было по времени смотреть. Бесконечно!!! Если хочешь стать фронтэндером то по барабану удобно неудобно и какой формат времени. Пошел учиться на фронта на курсы, параллельно делаю ремонт в квартире. Распорядок дня такой - утром подъем в 6 утра, на работу, с работы на квартиру, делаю ремонт до 10, 11 вечера, потом прихожу и сажусь за учебу до 2 - 3 ночи. И так каждый день. Мне все удобно))) Спасибо за видео.

[@sergsagan]

Отличное видео даже для не новичка (45 мин оно самое для восприятия)

[@mtown331]

Очень круто, спасибо тебе! Продолжай в том же духе!

[@tocode]

Аркадий Савенко спасибо)

[@jigaii]

Спасибо, отличная сборка и прекрасное видео, жаль сразу не нашел, а то учился по видео с 2.2.х и 3.х.х сидя на 4) Вопрос: почему нету pug? или позже добавишь?

[@tocode]

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

[@taraslysenko9547]

Очень классное видео! Все отлично понятно. Спасибо

[@AnotherSapiens]

Низкий поклон!)

[@ДмитрийПоляков-ю6г]

Добрый день. Не совсем понял как добавить кроме index.html еще несколько шаблонов, например: contact.html, article.html ну и так далее. Я попробовал добавить в папку где index.html и в браузере попытался посмотреть их по адресу: localhost:8081/contact.html но что-то не пошло. Что надо сделать? Благодарю за ответ.

[@СтепанСнигур-л8ч]

Спасибо за курс, пожалуйста продолжай

[@pomenbshe]

Спасибо за видео! А почему ты создаешь константу buildWebpckConfig и потом передаешь ее в промис, который экспортируешь, а не просто module.exports = merge(baseWebpackConfig, {})? И можно ли module.exports заменить на export default?

[@maktor7697]

Спасибо огромное, все самое полезное. Надо звать тебя Seniore webpack сustomizer :D. Если бы еще react добавил, было бы идеально.

[@tocode]

да, будет, по реакту уже записываю видео)

[@jackdoe1312]

33:33 тот самый момент про background-image url (' ')

[@v.shelelo446]

Спасибо! Хорошо обясняешь =)

[@tocode]

Volodymyr Shelelo спасибо)

[@dmitriysheyko1035]

чувак, спасибо ты мне очень помог

[@andreyzayats930]

Необходимо открывать файл индекс локально: 1. убрал publicPath: '/', 2. в css-loader -> options прописал url: false Остались такие проблемы, при использовании библиотеки какой либо, шрифты не грузятся ERR_FILE_NOT_FOUND, Та же проблема, если картинка прописывается через тег Билд выдает не правильные пути

[@vladbelozertsev4084]

Спасибо за урок! :) У меня два вопроса: 1. Если я хочу сделать фон при помощи изображения, стоит подключать стиль в атрибуте тега, или в данном случае можно подключать его через .scss файл? 2. Зачем использовать copy-webpack-plugin, если есть file-loader, который может "взаимодействовать" с прочими обработчиками .scss файлов, в итоге можно писать пути не относительно файла в dist, а относительно файла в src.

[@DevyaterikovPetr]

Из описания path с npm: "This is an exact copy of the NodeJS ’path’ module published to the NPM registry." Думаю из package.json можно исключить, т.к. в node он присутствует по-умолчанию и всё прекрасно работает без этого пакета. ключ --open из задачи "dev" можно перенести в webpack.dev.config.js: devServer: { open: true } Очень интересно было бы подробнее узнать про webpack dev server, например про режим hot и изменение стилей и js без полной перезагрузки странички, про использование нескольких точек входа, вынос в отдельную точку входа сторонних пактов и версионирование.

[@tocode]

Да уберем паф, про опен тоже спасибо! Включу, все это сделаем на этапе оптимизации. про точки тоже будет как раз таки в оптимизации и сплитах

[@Геннадий-с5э]

а можешь сделать видио по настройке для компоновки из нескольких блоков. Т.е. несколько папок в которых содержатся css/scss, html и media файлы, которые собираются в один html документ

[@tocode]

Да будет, вместе с пагом

[@WapSter92]

Классная подача материала, благодаря тебе соскочил с gulp. Но один момент почему бы нам не создать папку assets и в исходниках, иначе мы теряем такою прекрасную вещь как autoFileName или подобные плагины в редакторах, не будешь же все время в голове держать названия файлов или дописывать путь, особенно когда макет нарезаешь перед тем как верстать.

[@tocode]

С autoFileName возможно ты и прав. Сейчас с константами в PATH это дело можно легко поправить под себя. Я планировал в отдельном видео по оптимизации и сплиту убрать папку assets из хтмл (в плане путей) и сделать так чтобы лодеры при билде их подхватывали и автоматом добавляли этот путь, тогда не будет нужды прописывать путь с assets. И autoFileName с таким подходом будет отлично работать тк он думает что мы из src/img берем ее

[@WapSter92]

@@tocode я заметил эту фишку у file-loader, когда пытался сделать сжатие изображений, и опция publicPath оказалась у него багнутая, добавляет к пути папку из output.publicPath. На гитхабе нашел решение этой проблемы publicPath: function(url) { return url.replace(/dist/, '..') } и что самое не ясное, все равно что реплейсить хоть "абракодабра" но баг исчезает, а куда забрасывать готовые файлы нормально прописываются.

[@tocode]

@@WapSter92 я обычно через api от tinipng оптимизирую про это не знал, посмотрю как-нибудь

[@sergiibondarenko7493]

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

[@DevyaterikovPetr]

Ещё бы я заменил css reset на normalize.css. Мне кажется, что переопределять стандартное поведение по необходимости гораздо проще, чем сбрасывать все стили и потом вручную задавать заново. htmlacademy.ru/blog/64-about-normalize-css

[@tocode]

хорошее предложение, гляну

[@egoist2956]

Спасибо за видео! А почему ты создаешь константу buildWebpckConfig и потом передаешь ее в промис, который экспортируешь, а не просто module.exports = merge(baseWebpackConfig, {})?

[@tocode]

я увидел такую реализацию в исходниках vue.cli, они отлавливали таким образом ошибки плюс это сделано из-за мерджа. А так да, можно экспортировать напрямую сам мердж

[@egoist2956]

Ясно, спасибо)

[@АлександрМартынюк-ъ7ы]

Спасибо. Полезные видео!

[@stanislav5846]

Спасибо Бро Все супер

[@aleksprimetv]

@Jack Coder кстати тут заметил, почему ты postcss оставил в src, а не перенес в build?

[@tocode]

если ты про конфиг от postcss то ошибся еще изначально и перенес его в последнем видео в корень

[@SanityIsTheWeak]

на формат времени плевать, главное количество полезной инфомации

[@ИгорьОвчинин-я1з]

спасибо за знания!

[@Super_dash1756]

Джек, подскажи пожалуйста по поводу babel'a. Мы подключили только @babel/preset-env. Но для доступа ко всем фишкам ES6, 7 и.т.д. Нужно ведь подключать полифилл. Но есть еще такой плагин как transform-runtime, который делает схожую работу, но не подключает фишки которых в ES5 небыло ( Map, WeakMap, Array.prototype.includes() и.т.д.). Проблема в том, что полифилл как-никак довольно большой файл. Возможно полифилл и ransform-runtime можно как-то комбинировать?

[@tocode]

Вообще для таких вещей есть @babel/polyfill в котором есть Array.from, Object.assign, карты и тп. Это все что я знаю на этот счет)

[@ОлегБас-я2х]

Здравствуйте! Подскажите, пожалуйста, как мне подключить картинку в файле src/pug/blocks/header/index.pug? В папке src/pug/blocks/header/img есть файл download.jpg. Пытаюсь подключить так img(src='./img/download.jpg' alt='Image'), но картинка не подгружается

[@andriidou8023]

к MiniCssExtractPlugin нужно указивать publicPath иначе все картинки и шрифты в production подключение в css через URL вместо относительного пути url(../fonts/ получат абсолютный url(fonts/ loader: MiniCssExtractPlugin.loader, options: { publicPath: '../' }

[@tocode]

спасибо, поправлю!

[@ДенисШалашов-я9ш]

Можно пожалуйста подробнее, что и где прописать? А то у меня тоже картинки не отображаются, не могу починить

[@ДенисШалашов-я9ш]

@@tocode Можно пожалуйста подробнее, что и где прописать? А то у меня тоже картинки не отображаются, не могу починить

[@tocode]

@@ДенисШалашов-я9ш тут про проблемы с путями, если нужны относительного пути то как автор комментария написал - указать доп. путь в кофиге плагина MiniCssExtractPlugin. Но относительные пути практически не используются в них много проблем. например, как поступать с подпапками? получается бесконечные ../../../ и тп, в большинстве случаев лучше использовать абсолютные пути, которые сейчас в сборке. (их можно проверить только на сервере, можно даже локальном. без сервера они ищутся из корня и выходит ошибка )

[@ДенисШалашов-я9ш]

@@tocode Понятно, а как мне это запустить к примеру через open server? Последовательность шагов изменяется, как если бы я запускал обычный html файл без разных там Webpack`ов и т.д.

[@user-mw1uf8tf7w]

Спасибо!

[@evilowl1317]

Привет! Хотела бы узнать, будешь ли ты когда нибудь снимать разбор по nuxt?)

[@tocode]

привет, да, обязательно)

[@АлександрКопытенко]

Почему папка dist не очищается перед сборкой? Т.е. старый мусор остаётся.

[@VictorSharamet]

Спасибо тебе!

[@tocode]

Пожалуйста)

[@sergeyermolaev270]

Если изображение вставлено через background-image, то оно закидывается не в папку dist/assets/img, а в папку dist/

[@nurmuhammadkholmuhammadov9643]

unreal tutorial. thank you

[@alekseirukhmanov9123]

Видио огромный лайк. А если у меня фора обратной связи, что делать с php файлом? Как его в бандл запихнуть

[@tocode]

пхп нельзя в вебпак сувать тк js не может обрабатывать php файлы. там решение оч простое, просто два сервака надо запускать и на пыхе ссылки на css/js будут тянуться с сервера вебпака (можно еще сделать проверку на $devMode и менять ссылка ни абс. пути либо пути к серверу вебпака) вроде я это уже где-то тут в комментариях рассказывал

[@РусланВалимухаметов-э9к]

Почему конфигурационные файлы в папке build а не в папке configs к примеру

[@ivankozhin8544]

Все кто были студентами полтора часа выдерживают =)

[@fedortregubov3873]

Как можно получить значение флагов ноды изнутри скрипта? Например webpack --mode development. Через process.argv[i], где i - номер аргумента - неудобно.

[@karimmorosov6007]

15-20 минут удобно смотреть

[@kostya_bizin]

Подскажите, пожалуйста, все делаю как у вас, нахожу некоторые проблемы в коде из-за версий, но они легко исправляются, но вот liveReload не работает, уже и указывал - hot: true, не помогает, что может быть?

[@kostya_bizin]

спасибо, сам нашел, если кому будет интересно в webpack 5 нужно дописать в webpack.dev.conf.js -> target: 'web'

[@РоситаМонтоини]

Добрый день. Есть ли у вас видео как настроить watch?

[@help_people_]

Обидно.. сделал все как вы написали. Даже с гитхаба взял, проверил.. но ошибка Error: vue-loader requires @vue/compiler-sfc to be present in the dependency tree. и все тут

[@inzoddex8312]

Почему после команды npm run build при открытии index.html не подключаются стили? Заметил, что стили подключаются по пути href="/assets/css/app.css", если убрать / перед assets в инспекторе, то стили подключатся. Как решить этот прикол?)

[@tocode]

Это стандартные пути из расчета того, что на сервере нельзя оставлять пути без '/' поэтому я этим не заморачивался

[@СергейХохлов-ю4д]

Скажите а как изменится конфиг если вместо index.html будет index.php? Можно ли сделать чтоб в dev режиме синхронизация с браузером работала? А то при php не работает?

[@zubrdens]

Для Webpack 5 названия конфигурационных файлов другие, функции merge нет, надо смотреть официальную документацию.

[@agentdaun5699]

У меня вопросик. В предыдущем видео много Scss файлов, mixin и т.д. И там в main есть определние .container, section и т.д. И я пока не особо понимаю, зачем они нужны, и как их правильно использовать. Будет ли видео по вёрстке сайта с использованием этого шаблона webpack'a? Что бы понять, когда использовать .container, а когда нет.

[@tocode]

если вкратце то container всегда используется) по верстке скорее да, чем нет потому что от той "верстки" что на 99% ютуба мне плакать хочется, когда смотрю)) но будет скорее всего не скоро

[@agentdaun5699]

Я говнокодер по природе, и это так же относится и к вёрстке. Получается container всегда используется, в каких бы блоках он не был? Что то по типу: ? И что насчёт секций? Сколько не смотрел вёрсток на ютубе, секции ни разу не видел, а тут ещё со стилями. Их использовать каждый раз когда новый блок создаёшь, что то по типу: ? И зачем им присваивать ID, а не Class? Что в них стилизовать? Сорри за мб тупые вопросы и спасибо за видосы.

[@agentdaun5699]

​@@tocode Ещё вопросик. А когда использовать Wrapper. И когда section? А почему в Wrapper стоит максимальная ширина - 1280, а если у пользователя, например, 1920x1080 экран? или 4К?

[@tocode]

это нормальные вопросы, все через это проходили)) да - контейнер везде. секциям айди чтобы можно было сделать ссылки например на #promo это чаще всего на лендингах, когда как таковых страниц нету, а ссылки из меню идут именно на секции

[@tocode]

секции каждый новый блок, врепер единожды, по 4к практический нигде нету под них оптимизации мало кто сидит с плазм на сайтах))

[@ХлопецьзКиєва]

Можно поподробней про PublicPath ContentBase и external

[@Super_dash1756]

Подскажите пожалуйста! Не могу понять зачем мы используем file-loader, для обработки картинок, если ниже мы просто используем плагин для их копирования. В документации неясное описание.

[@tocode]

чтобы можно было их подключать, на все файлы должны быть обработчики file-loader в данном случае универсален и обрабатывает практически все сторонние файлы

[@HalauLilau]

Клон из гитхаба сделал. Не работает background-image:url(../img/some.jpg) build'e background-img:url(dist/assets/css/some.jpg); Что не так ? Т.е когда запускаешь девсервер все ок. Но билде хрен какая то. (публикпаз отклчен). Почему поставил такой путь ?

[@tocode]

Мы по стандарту (которому придерживаются все сборщики) использовали ссылки с "/" в начале. Такой вариант считается лучшим для деплоя, но он не работает на локальной машине. Самый простой способ запустить проект на локалке это просто CTR + F далее заменить все пути "/assets" на "assets" (без слеша), но на сервере только "/assets" (со слешем). Статья про абсолютные и относительные пути - htmlbook.ru/samhtml/ssylki/absolyutnye-i-otnositelnye-ssylki

[@ИванГумич]

Добрый день, спасибо за полезный курс. У меня возникла проблема. Подскажите в чем может быть причина. Когда прописываю в файле стилей background-image и собираю сборку, у меня эта картинка после сборки падает в корень проекта. Также все файлы из папки src/images попадают исправно в dist/images. Когда я убираю background-image и пересобераю, то картинка, которая была прописана в файле стилей пропадает из корня. НЕ могу понять в чем дело. Подскажите как решить проблему Сейчас прошел урок по подключению шрифтов. подключил их в css. И теперь все шрифты у меня в корне проекта. Все файлы которые подключаетя в css после сборки попадают еще и в корень проекта в папке dist

[@Serhi_Kovalenko]

Привет, подскажите, кто сталкивался с проблемой сборки билд версии? При локальном запуске не видит файл джс и css, заранее благодарен!

[@tocode]

Мы по стандарту (которому придерживаются все сборщики) использовали ссылки с "/" в начале. Такой вариант считается лучшим для деплоя, но он не работает на локальной машине. Самый простой способ запустить проект на локалке это просто CTR + F далее заменить все пути "/assets" на "assets" (без слеша), но на сервере только "/assets" (со слешем). Статья про абсолютные и относительные пути - htmlbook.ru/samhtml/ssylki/absolyutnye-i-otnositelnye-ssylki

[@АндрейРемарков]

@@tocode а что делать с изображениями, которые вставлены через CSS? К примеру в SASS файле вставляешь картинку через background: url("/assets/img/изображение.jpg"), но при компиляции билда в css хоть убирай слеш, хоть не убирай - хостинг всё равно не видит изображения и консоль выдаёт ошибку, мол, не могу найти изображение.

[@Super_dash1756]

А подскажите пожалуйста, зачем нам отдельная обработка css если мы уже делаем это с помощью scss. Для наглядности, что так тоже можно?

[@tocode]

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

[@pluto2656]

best of the best

[@АртемШарапанюк-ж5и]

Яку тему ти використовуєш для VSC?

[@dimitirpopovich4394]

Благодарю за видео, очень информативны. Формат по времени хороший. Есть пара вопросов. А что по итогу выкладывается на сервер? и сложно ли дебажить с использованием всех этих хитросплетений вебпака?

[@tocode]

Dimitir Popovich спасибо, содержимое папки дист. На дебаг все эти переменные и тп не повлияют)

[@dimitirpopovich4394]

@@tocode еще вопрос, если можно. Получается Webpack пути для входа, выхода и копирования считает от места конфига, а все остальное например { path: `./postcss.config.js` } и template: './src/index.html' считает от корня. Тут есть какая то логика?

[@espocada_official]

@@tocode в каких случаях называть папку assets, а в каких static ?

[@DanilLukyanenko-qc8sf]

Подключи авторизацию/регистрацию на блоге через гугл, фб.. Будет тема :)

[@tocode]

Это да. Там ещё уйму всего нужно добавить и авторизацию через фб и ВК в том числе)

[@lasthp]

ЧОкнутый вебпак конечно. как эта херня вообще стала популярна?) Чтоб его понимать, надо иметь по нему профессорскую степень. Не верю я что куча js разработчиков в этом добровольно разобрались спасибо за видео, кстати. смотрю просто чтобы иметь представление о нем, сам скорее всего буду просто клон с гитхаба делать

[@СергійЗінченко-щ2н]

ошибка при >npm run dev -"Failed to compile. asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance. Assets: app.js (914 KiB)" добавляет блок в html и виводит на страничку localhost:8081/.. что может бить? и почему app.js привишает розмер?

[@mushnikov35]

Будет ли видео по тестированию полученного шаблона ? да и как туда запехнуть pug ?

[@tocode]

паг будет в конце как ответвление от стандартной сборки, когда она будет на 100% готова. тесты будут на линтеры + прекоммиты)

[@ВейсалТаштанов]

Если ты спрашиваешь, как подружить pug и webpack: npm i pug-loader -D. Потом в конфиге Webpack прописывай loaders: [ // pug { test: /\.pug$/, loader: "pug-loader" } ] После подключай шаблон const template = require('тут указывай путь');

[@tocode]

вот еще из WCMS pages - github.com/vedees/wcms/tree/gh-pages/build там подключение пага и в целом когда мы до него дойдем будет тоже самое, что и там только с пофикшеными багами

[@mushnikov35]

@@ВейсалТаштанов будем пробовать, спасибо !

[@andranikmeneshyan5829]

В блоге npm i webpack-merge перед ключём save стоит одна тире ))) а новичкам страшно будет )))

[@tocode]

спасибо)) исправил)

[@aleksandrstaetskiy5687]

Товарищи, вопрос: а как коммитить и добавлять ассеты, чтоб на GitHub pages пахало?

[@tocode]

лучшее решение - создать отдельную ветку gh-pages. посмотрим пример - github.com/vedees/wcms мб поможет

[@hloesilen]

если консоль ругается на configuration has an unknown property 'port' при npm run dev. На 30 минуте это будет исправлено

[@interhin]

А что насчет нескольких html страниц? Как это правильнее реализовать: делать несколько filename в webpack-html-plugin или как-то парсить все html из проекта, или как это обычно делают? И еще, попробовал твой шаблон и никак не могу разобраться с publicPath. Я пытался его менять, удалять и тд. эффекта ноль. Он вообще ни на что не влиял. Пути для картинок он не меняет. Заранее спасибо за ответ.

[@tocode]

да, несколько filename в webpack-html-plugin. А publicPath это для вебпака, для корректной работы дев сервера, пути можно менять в константах

[@ЯрославВоронин-н8ш]

лайфхак - вместо path можно использовать поиск и массовое выделение.

[@ДаниилГолубев-д5ъ]

Имею одностраничный проект и многостраничный проект в одной папке что-то вроде: проект1 куча подпапок с страницами проект2 index.html src dist как прописывать filename у htmlwebpackplugin или как исправить иерархию, чтобы все было нормально? Спасибо. (шаблон один, отличаются только содержание шапки) И еще: сижу на винде, после каждого запуска build пакета при попытке коммита git ругается на lf в dist/*.js файлах. можно ли как-то сказать вебпаку, чтобы он сохранял файлы с crlf?

[@tocode]

С двумя проектами лучше 2 сборки использовать, если они нужны одновременно то порты менять. про коммиты не знаю,, кинь скрин в t.me/jackcoder

[@Super_dash1756]

Мужик не парь мозги, окончанием срок IDE занимается а не вебпак. Да и гит при коммите ( на винде ) автоматом ставит окончание crlf.

[@ДаниилГолубев-д5ъ]

@@Super_dash1756 уже нашел опцию в гите, отвечающую за автосмену окончания строк. По дефолта она была выключена

[@РоманНовожилов-у9б]

про картинки в css: фигово вставлять картинки через css и выдавать этот блок за медиа ресурс. А если картинка является элементом дизайна компонента, то еще как нужно картинки вставлять в css, и вот тут становится непонятно как пути сопоставлять, ведь компонент - универсальный и независимый, а выходит пути к картинкам нужно указывать с учетом скомпилированного кода.

[@stanislavradchenko2468]

а что делать если я хочу добавить например about.html и сделать внутренние ссылки, как ето реализовать?

[@tocode]

github.com/vedees/webpack-template#third-method-best