The most important thing about wepback - merge. Handling images; html and static files.
HTML-код
- Опубликовано: 10 фев 2019
- this will be the most important webpack video. Let's process all possible files, pictures (images) and static files using the copy-webpack-plugin plugin. We will also include Webpack-merge - to split the dev and build config. Set up a map for styles. Let's make livereload for html.
--------
🚀 Thanks to your support, new videos are coming out:
tocode.ru/support/
--------
--------
New course on view 3 - tocode.ru/r/v3-ywd
Enter promo code "Webpack" and get a fat discount :)
--------
► VK group, where I publish various news:
tocoderu
📘 Article from the video + sources: vk.cc/9Ksbmf
Repository: github.com/vedees/webpack-tem...
--------
Questions about the video, ask in the comments, and we can chat in groups:
► Add as a friend - id261337424
► VK group - tocoderu
Discord - / discord
Telegram - t.me/jackcoder
продолжай снимать видео по вебпаку!! он для меня все еще странный, уже 2й день читаю документацию и пытаюсь разобраться. У тебя пока что лучший туториал что я встречал на русских и англ источниках.
спасибо, конечно еще будет видео 3-4 точно)
Так сказал, как-будто 2 дня это нереально долго. На каждую новую технологию уходит немало времени. Тут точно не стоит надеяться на то, что за несколько часов разберешься.
согласен на 100%
Формат времени не важен, главное, что объясняешь хорошо.
Большое спасибо за видео! Видео не обязательно должно быть коротким, пусть хоть час, хоть два - ведь главное, что оно важное, информативное и полезное !
Спасибо, учту!
Спасибо, и по времени и по качеству уроков, всё отлично!
Большое спасибо! Очень доходчиво.
Формат времени в видео не важен. Важен контент и так как это не стрим, то видео можно смотреть как частями, так и пересматривать нужные куски.
Успехов в несении света знаний в массы!
какой отличный и подробный разбор. Лучшее видео по настройке шаблона!
40 минут вообще идеально)
Просто лучший. Не занудно и очень понятно👍❤
Джек, ты просто мега крутой! Сегодня установил вебпак по твоим видео, понял, что кое каких функции не хватает, начал гуглить, разбираться и выходит видео у тебя ещё одно) спасибо!
большое спасибо!
Все доступно и разборчиво, но жутко обломно ожидать следующее видео несколько недель. Спасибо!
Спасибо, качество важнее регулярности, постараюсь со всем разобраться и записать после выходных)
Спасибо за понятное и лаконичное объснения... Самый лучший курс по webpack.
Спасибо!
На данный момент 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 и почему я твой комментарий не заметил ))))
Jack, спасибо, продолжай. Собрал в голове как надо, у тебя лучшее по W4 из того, что удалось найти
Спасибо, конечно)
Автору спасибо за работу. Для себя отметил, что видео не для новичков. Предполагается понимание многих технологий.
Крутейшие видосы!)) Отлично воспринимается)
Импонирует подача материала, продолжай в том же духе!
спасибо, конечно)
Большое спасибо за видео! Мне кажется оптимальное видео примерно по 15 мин)
За сделанные статьи, респект и уважуха, думаю будет удобно!
Огромное спасибо за такую качественную подачу информации!
спасибо за отзыв!
Это было супер круто! Спасибо за видео, очень полезно, разобрался с webpack 'ом, а детали уже можно самому гуглить) На счет формата, то это и не важно, главное, чтобы все было целостно и последовательно, а продолжительность это не проблема, можно ведь на ппузу поставить или перемотать! Нще раз большое спасибо=)
Спасибо за отзыв, учту)
Спасибо за видео, крайне информативно и познавательно, так как мало кто на данной площадке делает разбор полного пака под разработку, что в итоге будет использовать. По продолжительности видео скажу что и так норма, так как тут больше важно на сколько ты открываешь данный вопрос, а на время уже всё равно. Понимание приходит, вот что главное. И данный подход в новинку, касательно путей. Но сколько смотрю, что в этом мире кода, сколько людей = столько и решений, невозможно сказать что оно хуже или лучше, так как решает задачу на которую было запрограммировано.
Очень классное видео! Все отлично понятно. Спасибо
Очень круто, спасибо тебе! Продолжай в том же духе!
Аркадий Савенко спасибо)
Красавчий! Только посмотрел второй урок и тут третий!
Спасибо!
15-20 мин оптимально. Посмотрел и сразу пробуешь не откладывая на потом и не нужно по видео лазить
Около 40 минут самое то, в любом случае всегда можно поставить х1,25 скорость :) А видео отличное как всегда, заслуженный лайк
спасибо)
Спасибо за курс, пожалуйста продолжай
Низкий поклон!)
Ты красавчик, спасибо тебе! Я за день въехал в webpack! Ещё и сборка готовая👍👍👍 Лови поддержку 👍👍👍 (@t)
Отличное видео даже для не новичка (45 мин оно самое для восприятия)
Круто, спасибо). Было бы классно, если бы видео чаще выходили чем раз в месяц. Я уже "присел" на твою конфигурацию, и у меня ломка начинается, пока ждёшь, что ж там Jack нам нового предоставит =) Понятное дело, что на это надо время, но так гляди скоро Webpack снова обновится)
спасибо)) Качество важнее регулярности, постараюсь со всеми делами разобраться и записать после выходных)
а 5 версия уже вышла, но она в альфе, так будет обновление до 5 как только будет полноценный резиз
Спасибо. Полезные видео!
чувак, спасибо ты мне очень помог
Спасибо! Хорошо обясняешь =)
Volodymyr Shelelo спасибо)
Спасибо за видео :)
Жалко коржа.. Я обычно смотрю параллельно повторяя. Выходит 40 минут видео умноженное на х1.5 из-за пауз. Это время я компенсирую смотря на х2 скорости (но с твоими даже х1.5 не получается ставить - это большой плюс). Поэтому 40 минут видео это оптимально. Спасибо за видео, правда круто.
Отлично и главное конструктивно, приму к сведенью! спасибо!
Лучший канал на тему Webpack в ру сегменте!
Молодчина, так держать!
Спасибо! 👍
Спасибо Бро Все супер
спасибо за знания!
Спасибо огромное, все самое полезное. Надо звать тебя Seniore webpack сustomizer :D. Если бы еще react добавил, было бы идеально.
да, будет, по реакту уже записываю видео)
Великолепная серия уроков по Webpack, Евгений. Продолжай в том же духе. Если есть возможность, расскажи про оптимизацию картинок, чистку .svg от мусора, и было бы неплохо узнать как собирать .php файлы. Или у них тот же принцип, что и у .html?
Спасибо! Про картинки, возможно будет работа с апи стороннего сервиса. С пхп принцип схож, но там нужно 2 сервера. Один для пхп, а второй для вебпака. И чтобы работал лайв релод у стилей и скриптов нужно делать условие на дев и прод (в деве путь через локал хост к дев серверу вебпака)
@@tocode благодарю! Примерно понял насчёт php)
Настройка Webpack-merge. Обработка изображений и статических файлов при помощи copy-webpack-plugin
Исходный код вы можете скачать/посмотреть - github.com/vedees/webpack-template
Может лучше в телеграм?
@@daniilorain в телеге как-то не очень реализованы каналы, у дискорда в этом плане все куда круче это и каналы, рейтинги и тп + есть аудио чат и стол можно расшарить
@@tocode всё равно им мало кто пользуется по сравнению с телеграмом
Нашел ошибку (или это только у меня 😂) В webpack.base.conf.js в output: {publicPath: '/'} У меня билд не работал. Я покопался и вовсе удалил эту строчку. Заработали и дев и билд. Надеюсь кому-то поможет.
Видосы огонь🔥
В случае ошибки (Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.), заместо contentBase используйте context
Добрый день! Просто заменить contentBase на context? или как? Или в другом файле прописать нужно? Подскажите пожалуйста
Спасибо!
По картинкам в css. Меня учили, что только контентные картинки нужно вставлять через img, а все остальное, куда пользователь не должен сувать свои ручки, делать через bаckground-image. А если очень нужно поменять бекграунд, например в слайдерах, то просто делается инлайновый стиль в котором уже бекендер может менять путь к файлу. Типа
Спасибо тебе!
Пожалуйста)
Спасибо, отличная сборка и прекрасное видео, жаль сразу не нашел, а то учился по видео с 2.2.х и 3.х.х сидя на 4)
Вопрос: почему нету pug? или позже добавишь?
Пожалуйста, да определенно позже, как закончим с оснвной, но паг будет обязательно
unreal tutorial. thank you
Пишу в комментариях сколько бы удобно было по времени смотреть. Бесконечно!!! Если хочешь стать фронтэндером то по барабану удобно неудобно и какой формат времени. Пошел учиться на фронта на курсы, параллельно делаю ремонт в квартире. Распорядок дня такой - утром подъем в 6 утра, на работу, с работы на квартиру, делаю ремонт до 10, 11 вечера, потом прихожу и сажусь за учебу до 2 - 3 ночи. И так каждый день. Мне все удобно))) Спасибо за видео.
best of the best
33:33 тот самый момент про background-image url (' ')
Спасибо за видео! А почему ты создаешь константу buildWebpckConfig и потом передаешь ее в промис, который экспортируешь, а не просто module.exports = merge(baseWebpackConfig, {})? И можно ли module.exports заменить на export default?
Необходимо открывать файл индекс локально:
1. убрал publicPath: '/',
2. в css-loader -> options прописал url: false
Остались такие проблемы, при использовании библиотеки какой либо, шрифты не грузятся ERR_FILE_NOT_FOUND,
Та же проблема, если картинка прописывается через тег
Билд выдает не правильные пути
Спасибо за урок! :)
У меня два вопроса:
1. Если я хочу сделать фон при помощи изображения, стоит подключать стиль в атрибуте тега, или в данном случае можно подключать его через .scss файл?
2. Зачем использовать copy-webpack-plugin, если есть file-loader, который может "взаимодействовать" с прочими обработчиками .scss файлов, в итоге можно писать пути не относительно файла в dist, а относительно файла в src.
а можешь сделать видио по настройке для компоновки из нескольких блоков. Т.е. несколько папок в которых содержатся css/scss, html и media файлы, которые собираются в один html документ
Да будет, вместе с пагом
15-20 минут удобно смотреть
на формат времени плевать, главное количество полезной инфомации
Классная подача материала, благодаря тебе соскочил с gulp. Но один момент почему бы нам не создать папку assets и в исходниках, иначе мы теряем такою прекрасную вещь как autoFileName или подобные плагины в редакторах, не будешь же все время в голове держать названия файлов или дописывать путь, особенно когда макет нарезаешь перед тем как верстать.
С autoFileName возможно ты и прав. Сейчас с константами в PATH это дело можно легко поправить под себя. Я планировал в отдельном видео по оптимизации и сплиту убрать папку assets из хтмл (в плане путей) и сделать так чтобы лодеры при билде их подхватывали и автоматом добавляли этот путь, тогда не будет нужды прописывать путь с assets. И autoFileName с таким подходом будет отлично работать тк он думает что мы из src/img берем ее
@@tocode я заметил эту фишку у file-loader, когда пытался сделать сжатие изображений, и опция publicPath оказалась у него багнутая, добавляет к пути папку из output.publicPath. На гитхабе нашел решение этой проблемы
publicPath: function(url) {
return url.replace(/dist/, '..')
}
и что самое не ясное, все равно что реплейсить хоть "абракодабра" но баг исчезает, а куда забрасывать готовые файлы нормально прописываются.
@@WapSter92 я обычно через api от tinipng оптимизирую про это не знал, посмотрю как-нибудь
Из описания 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 без полной перезагрузки странички, про использование нескольких точек входа, вынос в отдельную точку входа сторонних пактов и версионирование.
Да уберем паф, про опен тоже спасибо! Включу, все это сделаем на этапе оптимизации. про точки тоже будет как раз таки в оптимизации и сплитах
Привет! Хотела бы узнать, будешь ли ты когда нибудь снимать разбор по nuxt?)
привет, да, обязательно)
лайк и комент
Можно поподробней про PublicPath ContentBase и external
Все кто были студентами полтора часа выдерживают =)
Добрый день. Не совсем понял как добавить кроме index.html еще несколько шаблонов, например: contact.html, article.html ну и так далее. Я попробовал добавить в папку где index.html и в браузере попытался посмотреть их по адресу: localhost:8081/contact.html но что-то не пошло. Что надо сделать? Благодарю за ответ.
Спасибо за видео! А почему ты создаешь константу buildWebpckConfig и потом передаешь ее в промис, который экспортируешь, а не просто module.exports = merge(baseWebpackConfig, {})?
я увидел такую реализацию в исходниках vue.cli, они отлавливали таким образом ошибки плюс это сделано из-за мерджа. А так да, можно экспортировать напрямую сам мердж
Ясно, спасибо)
@Jack Coder кстати тут заметил, почему ты postcss оставил в src, а не перенес в build?
если ты про конфиг от postcss то ошибся еще изначально и перенес его в последнем видео в корень
Ещё бы я заменил css reset на normalize.css. Мне кажется, что переопределять стандартное поведение по необходимости гораздо проще, чем сбрасывать все стили и потом вручную задавать заново.
htmlacademy.ru/blog/64-about-normalize-css
хорошее предложение, гляну
Джек, подскажи пожалуйста по поводу babel'a. Мы подключили только @babel/preset-env. Но для доступа ко всем фишкам ES6, 7 и.т.д. Нужно ведь подключать полифилл. Но есть еще такой плагин как transform-runtime, который делает схожую работу, но не подключает фишки которых в ES5 небыло ( Map, WeakMap, Array.prototype.includes() и.т.д.). Проблема в том, что полифилл как-никак довольно большой файл. Возможно полифилл и ransform-runtime можно как-то комбинировать?
Вообще для таких вещей есть @babel/polyfill в котором есть Array.from, Object.assign, карты и тп. Это все что я знаю на этот счет)
top
В блоге npm i webpack-merge перед ключём save стоит одна тире ))) а новичкам страшно будет )))
спасибо)) исправил)
Как можно получить значение флагов ноды изнутри скрипта? Например webpack --mode development. Через process.argv[i], где i - номер аргумента - неудобно.
В вебпак доке написано "никогда не используйте вместе devtool опцию для sourcemap и подключенный плагин, так как он подключится таким образом дважды"
И что это значит?
Удалить либо devtool либо SourceMapDevToolPlugin в webpack.dev.js?
И ещё, может знаешь, что значит options: { sourceMap: true }, который мы прописываем в лоадерах?
Благодарю за видео, очень информативны. Формат по времени хороший. Есть пара вопросов. А что по итогу выкладывается на сервер? и сложно ли дебажить с использованием всех этих хитросплетений вебпака?
Dimitir Popovich спасибо, содержимое папки дист. На дебаг все эти переменные и тп не повлияют)
@@tocode еще вопрос, если можно. Получается Webpack пути для входа, выхода и копирования считает от места конфига, а все остальное например { path: `./postcss.config.js` } и template: './src/index.html' считает от корня. Тут есть какая то логика?
@@tocode в каких случаях называть папку assets, а в каких static ?
Видио огромный лайк. А если у меня фора обратной связи, что делать с php файлом? Как его в бандл запихнуть
пхп нельзя в вебпак сувать тк js не может обрабатывать php файлы. там решение оч простое, просто два сервака надо запускать и на пыхе ссылки на css/js будут тянуться с сервера вебпака (можно еще сделать проверку на $devMode и менять ссылка ни абс. пути либо пути к серверу вебпака)
вроде я это уже где-то тут в комментариях рассказывал
Добрый день. Есть ли у вас видео как настроить watch?
Будет ли видео по тестированию полученного шаблона ? да и как туда запехнуть pug ?
паг будет в конце как ответвление от стандартной сборки, когда она будет на 100% готова. тесты будут на линтеры + прекоммиты)
Если ты спрашиваешь, как подружить pug и webpack:
npm i pug-loader -D. Потом в конфиге Webpack прописывай
loaders: [
// pug
{
test: /\.pug$/,
loader: "pug-loader"
}
]
После подключай шаблон
const template = require('тут указывай путь');
вот еще из WCMS pages - github.com/vedees/wcms/tree/gh-pages/build
там подключение пага и в целом когда мы до него дойдем будет тоже самое, что и там только с пофикшеными багами
@@user-rb5gj7ls4n будем пробовать, спасибо !
Скажите а как изменится конфиг если вместо index.html будет index.php? Можно ли сделать чтоб в dev режиме синхронизация с браузером работала? А то при php не работает?
А подскажите пожалуйста, зачем нам отдельная обработка css если мы уже делаем это с помощью scss. Для наглядности, что так тоже можно?
да, файлы css всегда можно удалить, а обработчик все равно рано или поздно пригодится
лайфхак - вместо path можно использовать поиск и массовое выделение.
если консоль ругается на configuration has an unknown property 'port' при npm run dev. На 30 минуте это будет исправлено
Добрый день, спасибо за полезный курс. У меня возникла проблема. Подскажите в чем может быть причина. Когда прописываю в файле стилей background-image и собираю сборку, у меня эта картинка после сборки падает в корень проекта. Также все файлы из папки src/images попадают исправно в dist/images. Когда я убираю background-image и пересобераю, то картинка, которая была прописана в файле стилей пропадает из корня. НЕ могу понять в чем дело. Подскажите как решить проблему
Сейчас прошел урок по подключению шрифтов. подключил их в css. И теперь все шрифты у меня в корне проекта. Все файлы которые подключаетя в css после сборки попадают еще и в корень проекта в папке dist
Если изображение вставлено через background-image, то оно закидывается не в папку dist/assets/img, а в папку dist/
ЧОкнутый вебпак конечно. как эта херня вообще стала популярна?) Чтоб его понимать, надо иметь по нему профессорскую степень. Не верю я что куча js разработчиков в этом добровольно разобрались
спасибо за видео, кстати. смотрю просто чтобы иметь представление о нем, сам скорее всего буду просто клон с гитхаба делать
У меня вопросик.
В предыдущем видео много Scss файлов, mixin и т.д. И там в main есть определние .container, section и т.д. И я пока не особо понимаю, зачем они нужны, и как их правильно использовать. Будет ли видео по вёрстке сайта с использованием этого шаблона webpack'a? Что бы понять, когда использовать .container, а когда нет.
если вкратце то container всегда используется) по верстке скорее да, чем нет потому что от той "верстки" что на 99% ютуба мне плакать хочется, когда смотрю)) но будет скорее всего не скоро
Я говнокодер по природе, и это так же относится и к вёрстке. Получается container всегда используется, в каких бы блоках он не был? Что то по типу:
?
И что насчёт секций? Сколько не смотрел вёрсток на ютубе, секции ни разу не видел, а тут ещё со стилями. Их использовать каждый раз когда новый блок создаёшь, что то по типу:
?
И зачем им присваивать ID, а не Class? Что в них стилизовать?
Сорри за мб тупые вопросы и спасибо за видосы.
@@tocode
Ещё вопросик.
А когда использовать Wrapper. И когда section?
А почему в Wrapper стоит максимальная ширина - 1280, а если у пользователя, например, 1920x1080 экран? или 4К?
это нормальные вопросы, все через это проходили)) да - контейнер везде. секциям айди чтобы можно было сделать ссылки например на #promo это чаще всего на лендингах, когда как таковых страниц нету, а ссылки из меню идут именно на секции
секции каждый новый блок, врепер единожды, по 4к практический нигде нету под них оптимизации мало кто сидит с плазм на сайтах))
Здравствуйте! Подскажите, пожалуйста, как мне подключить картинку в файле src/pug/blocks/header/index.pug? В папке src/pug/blocks/header/img есть файл download.jpg. Пытаюсь подключить так img(src='./img/download.jpg' alt='Image'), но картинка не подгружается
Добрый день! Отличное видео ))) Может кто подскажет как подключить jquery к проекту?
Добрый, новое видео уже на канале)
ruclips.net/video/MRlBKfGktwI/видео.html где-т тут парень говорит
UPD: А так просто его через npm устанавливаешь и в index.js импортируешь
к MiniCssExtractPlugin нужно указивать publicPath иначе все картинки и шрифты в production подключение в css через URL вместо относительного пути url(../fonts/ получат абсолютный url(fonts/
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
спасибо, поправлю!
Можно пожалуйста подробнее, что и где прописать? А то у меня тоже картинки не отображаются, не могу починить
@@tocode Можно пожалуйста подробнее, что и где прописать? А то у меня тоже картинки не отображаются, не могу починить
@@user-wg3cl5qp1e тут про проблемы с путями, если нужны относительного пути то как автор комментария написал - указать доп. путь в кофиге плагина MiniCssExtractPlugin. Но относительные пути практически не используются в них много проблем. например, как поступать с подпапками? получается бесконечные ../../../ и тп, в большинстве случаев лучше использовать абсолютные пути, которые сейчас в сборке. (их можно проверить только на сервере, можно даже локальном. без сервера они ищутся из корня и выходит ошибка )
@@tocode Понятно, а как мне это запустить к примеру через open server? Последовательность шагов изменяется, как если бы я запускал обычный html файл без разных там Webpack`ов и т.д.
Почему папка dist не очищается перед сборкой?
Т.е. старый мусор остаётся.
Подключи авторизацию/регистрацию на блоге через гугл, фб..
Будет тема :)
Это да. Там ещё уйму всего нужно добавить и авторизацию через фб и ВК в том числе)
Подскажите пожалуйста! Не могу понять зачем мы используем file-loader, для обработки картинок, если ниже мы просто используем плагин для их копирования. В документации неясное описание.
чтобы можно было их подключать, на все файлы должны быть обработчики file-loader в данном случае универсален и обрабатывает практически все сторонние файлы
про картинки в css: фигово вставлять картинки через css и выдавать этот блок за медиа ресурс. А если картинка является элементом дизайна компонента, то еще как нужно картинки вставлять в css, и вот тут становится непонятно как пути сопоставлять, ведь компонент - универсальный и независимый, а выходит пути к картинкам нужно указывать с учетом скомпилированного кода.
Будут ещё уроки по webpack?
да, конечно
Обидно.. сделал все как вы написали. Даже с гитхаба взял, проверил.. но ошибка Error: vue-loader requires @vue/compiler-sfc to be present in the dependency tree. и все тут
Привет, подскажите, кто сталкивался с проблемой сборки билд версии? При локальном запуске не видит файл джс и css, заранее благодарен!
Мы по стандарту (которому придерживаются все сборщики) использовали ссылки с "/" в начале. Такой вариант считается лучшим для деплоя, но он не работает на локальной машине.
Самый простой способ запустить проект на локалке это просто CTR + F далее заменить все пути "/assets" на "assets" (без слеша),
но на сервере только "/assets" (со слешем).
Статья про абсолютные и относительные пути -
htmlbook.ru/samhtml/ssylki/absolyutnye-i-otnositelnye-ssylki
@@tocode а что делать с изображениями, которые вставлены через CSS? К примеру в SASS файле вставляешь картинку через background: url("/assets/img/изображение.jpg"), но при компиляции билда в css хоть убирай слеш, хоть не убирай - хостинг всё равно не видит изображения и консоль выдаёт ошибку, мол, не могу найти изображение.
А что насчет нескольких html страниц? Как это правильнее реализовать: делать несколько filename в webpack-html-plugin или как-то парсить все html из проекта, или как это обычно делают? И еще, попробовал твой шаблон и никак не могу разобраться с publicPath. Я пытался его менять, удалять и тд. эффекта ноль. Он вообще ни на что не влиял. Пути для картинок он не меняет. Заранее спасибо за ответ.
да, несколько filename в webpack-html-plugin. А publicPath это для вебпака, для корректной работы дев сервера, пути можно менять в константах
Подскажите, пожалуйста, все делаю как у вас, нахожу некоторые проблемы в коде из-за версий, но они легко исправляются, но вот liveReload не работает, уже и указывал - hot: true, не помогает, что может быть?
спасибо, сам нашел, если кому будет интересно в webpack 5 нужно дописать в webpack.dev.conf.js -> target: 'web'
если дальше копать то нужно прикрутить pug/jade
Яку тему ти використовуєш для VSC?
Приветствую! Появилась надобность срочно разобраться в Webpack, хотя я вообще далёк от этих систем сборки и никогда с ними дело не имел. Даже npm стал для меня открытием пару дней назад) Вопрос в чём: мне понравилась проделанная автором работа и его шаблон, хотелось бы применить его к своей работе. У меня есть свои заготовки по html, less, и т.д. Как мне этот шаблон Вебпака прикрутить к моему шаблону структуры файлов? Чтобы не устанавливать через npm каждый модуль вручную и редактировать конфиг вебпака, т.е. последовательно повторяя всё за видео.
наверно своими подробностями ушёл от темы) В общем, как использовать чужой шаблон вебпака? Файлы то в нём конфиги и т.д. все отредактированы. Но модули не установлены.
Я чуть-чуть поковырялся, и если я правильно понял, то просто при совмещении структуры файлов этого шаблона и моего, надо в npm просто написать npm install ? И оно установит сразу всё подряд, что указано в конфиге, я правильно понял?
@@user-wg3cl5qp1e Именно так. У тебя есть package.json в котором прописаны все зависимости. Копируешь его в нужную тебе папку, в консоли пишешь npm install и ВУАЛЯ. Ну и конфиги любезно предоставленные автором скачиваешь. А также про файл .babelIrc не забудь.
@@user-sn2vl7iw9m Благодарю за ответ. А вы пробовали скачивать этот шаблон ? В режиме продакшана не работают картинки. Там ниже в комментах человек решил проблему, но я не совсем понял, что надо сделать. А мне надо уходить через час с доделанной работой. Вы не в курсе, в чём там проблема? Если знаете, распишите пожалуйста подробнее
@@user-wg3cl5qp1e Да, шаблон скачивал. У меня также после продакшн сборки, если просто открывать dist/index.html тоже не подключаются ни стили ни картинки ни скрипты. Посмотрел на пути по которому подключаются вышеуказанные файлы. Стало ясно, что они относительные а не абсолютные ( Не берут свое начало из корня локального диска) именно по этому они и не подключаются т.к. если вы обратите внимание, то при открытом index.html в URL строке, у вас указан абсолютный путь к файлу. Когда я изменил пути к нужным нам файлам на абсолютные ( как у index.html) webpack в консоли выдал мне вот такую ошибку:
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.output.filename should be one of these:
string | function
-> Specifies the name of each output file on disk. You must **not** specify an absolute path here! The `output.path` option determines the location on disk the files are written to, filename is used solely for naming the individual files.
Details:
* configuration.output.filename: A relative path is expected. However, the provided value "I:\\HTML CSS\\Training\\MyTemplate\\webpack_template\\build\\assetsjs/[name].js" is an absolute path!
Please use output.path to specify absolute path and output.filename for the file name.
* configuration.output.filename should be an instance of function
Из которой становится ясно, что пути к нужным нам файлам и должны оставаться относительными т.к. мы будем запускать проект на сервере а не на локальном компьютере им любоваться. Вроде бы всё, расписал как можно подробнее.
Имею одностраничный проект и многостраничный проект в одной папке
что-то вроде:
проект1
куча подпапок с страницами
проект2
index.html
src
dist
как прописывать filename у htmlwebpackplugin или как исправить иерархию, чтобы все было нормально? Спасибо. (шаблон один, отличаются только содержание шапки)
И еще: сижу на винде, после каждого запуска build пакета при попытке коммита git ругается на lf в dist/*.js файлах. можно ли как-то сказать вебпаку, чтобы он сохранял файлы с crlf?
С двумя проектами лучше 2 сборки использовать, если они нужны одновременно то порты менять. про коммиты не знаю,, кинь скрин в t.me/jackcoder
Мужик не парь мозги, окончанием срок IDE занимается а не вебпак. Да и гит при коммите ( на винде ) автоматом ставит окончание crlf.
@@user-sn2vl7iw9m уже нашел опцию в гите, отвечающую за автосмену окончания строк. По дефолта она была выключена